diff --git "a/\353\271\204\353\217\231\352\270\260.md" "b/\353\271\204\353\217\231\352\270\260.md" new file mode 100644 index 0000000..618faa1 --- /dev/null +++ "b/\353\271\204\353\217\231\352\270\260.md" @@ -0,0 +1,9 @@ +# 비동기 + +| 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먾저 실행하는 자바스크립트의 특성 + +### 심화 학습 + +- callback +- Promise +- async/await diff --git "a/\354\213\244\355\226\211_\354\273\250\355\205\215\354\212\244\355\212\270.md" "b/\354\213\244\355\226\211_\354\273\250\355\205\215\354\212\244\355\212\270.md" new file mode 100644 index 0000000..bc9c0b8 --- /dev/null +++ "b/\354\213\244\355\226\211_\354\273\250\355\205\215\354\212\244\355\212\270.md" @@ -0,0 +1,18 @@ +# 실행 컨텍스트 + +| 코드가 실행하기 위해 필요한 주변 환경 정보들을 모아둔 객체 + +- 자바스크립트에서는 코드가 실행하기 위해 필요한 주변 환경 정보들을 모아두는데, 이를 실행 컨텍스트라고 한다. +- 블록에 의해서 구성된다. + +### Variable Environment(변수 환경)와 Lexical Environment(렉시컬 환경)으로 나눌 수 있다 + +#### Variable Environment + +- 딱 실행되면 처음에 딱 외부 환경을 수집해 저장해놓는다. (변경되지 않음) +- 현재의 컨텍스트와 관련된 코드의 변수를 수집한다. (호이스팅) + +#### Lexical Environment + +- 처음에는 Variable Environment와 같다. +- 실시간으로 변경사항을 반영한다. diff --git "a/\354\235\264\353\262\244\355\212\270_\353\243\250\355\224\204.md" "b/\354\235\264\353\262\244\355\212\270_\353\243\250\355\224\204.md" new file mode 100644 index 0000000..894be6d --- /dev/null +++ "b/\354\235\264\353\262\244\355\212\270_\353\243\250\355\224\204.md" @@ -0,0 +1,14 @@ +# 이벤트 루프 + +| Task Queue에서 하나씩 이벤트들을 꺼내 콜스택으로 올려 동작시키는 루프를 말한다. + +- 자바스크립트는 싱글 스레드 기반 언어이기 때문에 한 번에 하나씩 작업을 진행 +- 이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고, 태스크 큐에 담긴 콜백 함수들을 콜스택에 넘겨주는 역할을 함 + +#### 비동기 작업 실행 순서 + +1. 코드가 호출 스택에 쌓임 +2. 자바스크립트 엔진은 비동기 작업을 Web API에게 넘김 +3. Web API는 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해 태스크 큐에 넘겨줌 +4. 이벤트 루프는 콜스택과 태스크 큐를 보고 있다가, 콜스택에 쌓인 게 없으면 콜백함수를 콜스택으로 넘겨줌 +5. 콜스택에 쌓인 콜백함수가 실행, 콜스택에서 제거됨 diff --git "a/\354\235\264\353\262\244\355\212\270_\354\234\204\354\236\204.md" "b/\354\235\264\353\262\244\355\212\270_\354\234\204\354\236\204.md" new file mode 100644 index 0000000..26f92b1 --- /dev/null +++ "b/\354\235\264\353\262\244\355\212\270_\354\234\204\354\236\204.md" @@ -0,0 +1,17 @@ +# 이벤트 위임 + +| 상위 노드에서 하위 노드의 이벤트를 제어하는 방식 + +#### 이벤트 버블링 + +- 특정 요소에 이벤트가 발생했을 때, 해당 이벤트가 그 요소의 상위 요소로 전달되는 것 + +#### 이벤트 캡쳐링 + +- window로부터 이벤트가 발생되는 곳을 찾으려 하는 것 + +#### 이벤트 동작 방식 + +1. 이벤트가 발생되는 곳을 확인하기 위해 캡쳐링을 해서 감지함 +2. Target을 발견함 +3. Bubbling을 수행함