Note/JavaScript43 모듈 : 모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각이다. 그리고 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.○ export : 공개가 필요한 한정적 자산에 대해 명시적으로 선택적 공개가 가능하도록 하는 것.○ import : 모듈이 공개(export)한 자산을 선택해 자신의 스코프 내로 불러들여 재사용 하는 것.[ES6 모듈(ESM)]○ ES6에서 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능이 추가됨.지원 : Chrome 61이상 / FF 60 이상 / SF 10.1 이상 / Edge 16 이상형식 : script 태그에 type="module" 어트리뷰트를 추가한다.※ 일반적인 자바스크립트 파일이 아닌 ESM임을 명확히 하기 위해 파일 확장자명을 mjs.. 2025. 2. 24. 에러 처리 [try ... catch ... finally 문]에러 처리방법 ① : if문 / 단축평가 / 옵셔널 체이닝 연산자를 통해 확인하여 처리에러 처리방법 ② : 에러 처리 코드를 미리 등록해두고 에러가 발생하면 체러 처리 코드로 점프하게끔 하는 방법(try catch 문)- 형태try {// 실행할 코드} catch (err) {// try 코드 블록에서 에러 발생 시 실행될 코드} finally {// 에러 발생과 상관없이 반드시 한 번 실행될 코드}효과 : try...catch...finallly 문으로 에러 처리를 하면 프로그램이 강제 종료 되지 않는다.[Error 객체]생성자 함수인스턴스Error일반적 에러 객체SyntaxError자바스크립트 문법에 맞지 않는 문을 해석할 때 발생ReferenceE.. 2025. 2. 24. Ajax [Ajax란?]: 자바 스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식.○ Ajax의 장점변경할 부분을 갱신하기 위한 데이터 외에 다른 데이터들은 서버로부터 전송받지 않기 때문에 불필요한 데이터 통신이 발생하지 않음.그렇기 때문에 화면 갱신을 위한 화면 깜빡임이 없음.비동기 방식으로 동작하기 때문에 서버에 요청을 보낸 이후 블로킹이 생기지 않음.[JSON]○ JSON이란? : 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷이며, 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.○ 형식 key : 키는 반드시 큰따옴표로 묶어야 한다.value : 객체 리터럴과 같은 표기법을 사용.. 2025. 2. 24. 비동기 프로그래밍 [동기처리와 비동기 처리]: 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식이다. 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 실행 대기중인 태스크들이다. 그렇기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다.function foo() {console.log('foo');}function bar() {console.log('bar');}sleep(foo, 3*1000);bar();여기서 foo 함수가 3초 이후에 실행되도록 sleep 함수가 실행되었기 때문에 bar 함수가 실행되기까지는 3초 이상이 걸린다. 그럼 그 3초이상의 시간동안 bar 함수는 블로킹된다.실행 중인 태스크가 종료할 때.. 2025. 2. 24. 타이머 [호출 스케줄링]호출 스케줄링이란?: 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 예약하기 위해 타이머 함수를 사용하는 것.타이머 함수 : setTimeout, setInterval타이머 제거 함수 : clearTimeout, clearInterval[타이머 함수]○ setTimeout(호출될 콜백함수, 타이머 시간(생략시 0), 콜백 함수에 전달할 인수1, 인수2, 인수3, ...)전달받은 시간에 단 한번 동작하는 타이머를 생성한다.○ clearTimeout(timerId)생성된 setTimeout 함수의 호출 스케줄링을 취소한다.예시)const timerId = setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee');cle.. 2025. 2. 24. DOM DOM이란?DOM(Document Object Model) : 렌더링 엔진이 HTML 문서를 파싱하여 브라우저가 이해할 수 있도록 만들어진 자료구조.[노드]: HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.변환되는 요소 : 어트리뷰트 → 어트리뷰트 노드 / 텍스트 콘텐츠 → 텍스트 노드예시)Hello : 요소 노드class="greeting" : 어트리뷰트 노드Hello : 텍스트 노드[트리 자료구조]루트 노드 : 최상위 노드 / 트리 자료구조의 시작 노드 / 부모 노드가 없음 / 0개 이상의 자식 노드를 가짐리프 노드 : 자식 노드가 없는 노드=> DOM : 노드 객체들로 구성된 트리 자료구조 (혹은 DOM 트리)[노드 객체의 타입]○ 문서 노드document.. 2025. 2. 24. 이전 1 2 3 4 ··· 8 다음 반응형