모듈 시스템 도입 이전에는 파일 의존성에 맞게 script 태그 순서가 중요했다. 모든 파일들이 전역 상태로 공유 되었기 때문에 script 순서와 이미 정의된 변수를 덮어 씌우지 않도록 신경 써야 했다. 자바스크립트 애플리케이션은 점점 복잡해졌고 전역 상태가 오염되는 것을 피하기 위해 모듈이 해결책이 되었다. Module 애플리케이션 개발할 때 크기가 커지면 파일을 여러 개로 분리하여 관리한다. 분리된 파일을 모듈이라 부르는데 대개 클래스나 특정 목적을 가진 여러 개의 함수로 구성된 라이브러리로 구성된다. 자바스크립트 크기가 커지고 기능도 복잡해지면서 모듈 시스템이 등장하게 되었다. 모듈 시스템 덕분에 import, export 관계를 명시하여 파일간 의존성을 파악하기 쉬워졌다. Module Patte..

이벤트 바인딩이란 DOM 요소에 이벤트와 이벤트 핸들러를 연결해주는 것을 말한다. 이벤트 바인딩하는 방법 HTML 이벤트 핸들러 HTML 요소의 이벤트 속성을 이용하여 이벤트 핸들러를 연결하는 방법이다. DOM 이벤트 핸들러 클릭 DOM 이벤트 리스너 클릭 하나의 이벤트에 다수의 이벤트 핸들러를 추가할 수 있고 이벤트 캡처링과 버블링을 지원한다. addEventListener 세 번째 인자로 false 이면 버블링, true이면 캡처링 이벤트 버블링 해당 요소에서 이벤트가 발생하면 해당 태그부터 최상위 태그까지 순차적으로 이벤트 핸들러가 동작한다. 이벤트 캡처링 이벤트 핸들러가 최상위 태그에서 해당 태그까지 순차적으로 실행된다.

블록킹, 논블록킹은 프로세스 유휴 상태에 대한 개념이고 동기와 비동기는 프로세스 순서에 대한 개념이다. Blocking vs Non-blocking 다른 주체가 작업할 때 자신의 제어권 유무로 볼 수 있다. Blocking 호출한 함수가 호출된 함수에게 제어권을 넘기면 호출된 함수가 끝날 때까지 가지고 있다가 호출한 함수에게 되돌려 주는 경우 Non-blocking 호출한 함수가 호출된 함수에게 제어권을 넘기면 호출된 함수가 작업이 끝나지 않더라도 제어권을 호출한 함수에게 바로 넘겨주는 경우 Sync vs Async 결과를 받았을 때 순서와 결과에 관심 유무로 판단할 수 있다. Synchronous 호출된 함수의 실행 결과, 종료를 호출한 함수가 관심을 가지고 있는 경우 Asynchronous 호출된 함..

네트워크 레벨에서 요청을 가로채서 API 요청에 대한 응답을 할 수 있다. Mock Service Worker 설치하기 npm install msw --save-dev Mocks 정의하기 모의 요청을 정의하기 위해 request handler 함수를 사용한다. 이를 통해 메서드, URL 등을 기반으로 모든 요청을 캡처하고 반환할 응답을 지정할 수 있다. request handler 목록, 브라우저 및 서버별 설정을 mock definition이라 불린다. API 모킹 관련 모듈을 단일 디렉토리에서 보관하는 것을 권장한다. mkdir src/mocks mocks 디렉토리가 있다면, request handler가 있을 모듈을 만든다. touch src/mocks/handlers.js API 선택하기 MSW로..

일단 자바스크립트는 싱글 쓰레드 언어인데, 이는 오직 하나의 콜스택과 하나의 힙 메모리를 가진다는 것을 의미한다. 그러므로 자바스크립트는 한 번에 하나의 코드만을 실행할 수 있다. 자바스크립트에는 두 가지 작업이 있는데, 하나는 동기 작업 다른 하나는 비동기 작업이다. 동기 작업은 코드가 즉시 실행되고 비동기 작업은 로딩 과정을 거치고 실행된다는 차이가 있다. 동기식 코드 한줄씩 실행되는 방식으로 이전 라인이 끝나기 전에 각 라인 코드는 기다린다. 시간이 오래 걸리는 연산이면 다음 코드의 실행을 막는다. (Blocking) 비동기식 코드 비동기 코드는 백그라운드에서 실행되는 작업이 완료되면 코드가 실행된다. 본질적으로 논블록킹이다. (Non-Blocking) 실행은 비동기 작업이 끝나는 것을 기다리지 않..

일급 객체 다음 조건을 만족하는 객체를 말한다. 무명 리터럴로 생성할 수 있다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 함수는 일급 객체로 함수를 객체와 동일하게 사용할 수 있다. 그러나 일반 객체와 다른 점은 함수 객체는 호출할 수 있고 함수 객체만이 가지는 고유 프로퍼티가 있다. 함수 객체의 프로퍼티 브라우저 콘솔에서 console.dir 메서드를 사용하여 함수 객체 내부를 볼 수 있다. 함수 객체의 프로퍼티들을 볼 수 있다. function square(num){ return num*num; } console.log(Object.getOwnPropertyDescriptors(square)); square 함수의 모든 프로퍼티의 프로..