From a01de5db0c12161478bad4d9fcd1b663bd5ea8f2 Mon Sep 17 00:00:00 2001 From: Min Kyung Kang Date: Tue, 26 Oct 2021 21:54:13 +0900 Subject: [PATCH 1/4] =?UTF-8?q?docs:=20JS=20-=20=EC=8B=A4=ED=96=89=20?= =?UTF-8?q?=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...250\355\205\215\354\212\244\355\212\270.md" | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 "\354\213\244\355\226\211_\354\273\250\355\205\215\354\212\244\355\212\270.md" 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와 같다. +- 실시간으로 변경사항을 반영한다. From 262f171dd28872fc73f7d25335810236f61da08b Mon Sep 17 00:00:00 2001 From: Min Kyung Kang Date: Tue, 26 Oct 2021 21:54:27 +0900 Subject: [PATCH 2/4] =?UTF-8?q?docs:=20JS=20-=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=A3=A8=ED=94=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...62\244\355\212\270_\353\243\250\355\224\204.md" | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 "\354\235\264\353\262\244\355\212\270_\353\243\250\355\224\204.md" 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. 콜스택에 쌓인 콜백함수가 실행, 콜스택에서 제거됨 From ff76a9cb0dc82f2fd2bfd4674ada443cd4bbed89 Mon Sep 17 00:00:00 2001 From: Min Kyung Kang Date: Tue, 26 Oct 2021 21:54:35 +0900 Subject: [PATCH 3/4] =?UTF-8?q?docs:=20JS=20-=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=9C=84=EC=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...244\355\212\270_\354\234\204\354\236\204.md" | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 "\354\235\264\353\262\244\355\212\270_\354\234\204\354\236\204.md" 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을 수행함 From 24bf893fcaa9289767789125e26b07df19a2c1bf Mon Sep 17 00:00:00 2001 From: Min Kyung Kang Date: Tue, 2 Nov 2021 21:12:35 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EB=B9=84=EB=8F=99=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\353\271\204\353\217\231\352\270\260.md" | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 "\353\271\204\353\217\231\352\270\260.md" 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