42장 비동기 프로그래밍 - 문소희

docs/42_비동기 프로그래밍/문소희.md

@@ -0,0 +1,110 @@
+# 🚀 비동기 프로그래밍
+
+## 🔎 1. 동기 처리와 비동기 처리
+
+> 자바스크립트 엔진은 **단 하나의 실행 컨텍스트를 가지기 때문에 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.** 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 **동기<sup>synchronous</sup> 처리라고 하고,** 종료되지 않은 상태에도 다음 태스크를 곧바로 실행하는 방식을 **비동기<sup>asynchronous</sup> 처리라고 한다.**
+
+함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트<sup>콜 스택</sup>가 생성되고, 실행 컨텍스트 스택에 푸시되면서 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 스택에서 팝되어 제거된다.
+
+```javascript
+const foo = () => {};
+const bar = () => {};
+
+foo();
+bar();
+```
+
+![](https://velog.velcdn.com/images/zivivle/post/2b377843-f8f5-45e6-9401-b807ac7a7284/image.png)
+
+실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 호출되는 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 즉, _함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다._
+
+**자바스크립트 엔진은 단 하나의 실행 컨텍스트를 가지며,** 이는 함수를 실행할 수 있는 창구가 단 하나이고 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 `실행 중인 실행 컨텍스트`를 제외한 모든 실행 컨텍스트는 실행 대기 중인 태스크<task>들이며, 대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 팝되어 스택에서 제거되면<sub>(현재 실행 중인 함수가 종료하면)</sub> 실행되기 시작한다.
+
+자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 **블로킹<sup>blocking (작업 중단)</sup>이 발생한다.** 이처럼 현재 실행 중인 태스크가 종료할 때까지 **다음에 실행될 태스크가 대기하는 방식을 동기<sup>synchronous</sup> 처리라고 한다.**
+
+![](https://velog.velcdn.com/images/zivivle/post/d2905f9a-a22a-4f68-8d59-bde5bbaff7de/image.png)
+
+`setTimeout` 함수는 일정 시간이 경과한 이후에 콜백 함수를 호출하지만 이후의 태스크를 블로킹하지 않고 곧바로 실행한다. 이처럼 **현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기<sup>asynchronous</sup> 처리라고 한다.**
+
+비동기 함수는 전통적으로 콜백 패턴을 사용하는데, 이 콜백 패턴은 콜백 헬<sup>callback hell</sup>을 발생시켜 가독성을 나쁘게 하고, 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다.
+
+**타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 이벤트 루프와 태스크 큐와 깊은 관계가 있는 비동기 처리 방식으로 동작한다.**
+
+![](https://velog.velcdn.com/images/zivivle/post/bbcd16ec-72c9-4748-bc17-3e23392a0d3c/image.png)
+
+| 장/단점 | 동기 처리 방식                      | 비동기 처리 방식 |
+| ------- | ----------------------------------- | ---------------- |
+| 장점    | 실행 순서 보장                      | 블로킹 발생 X    |
+| 단점    | 앞선 태스크 종료 시까지 블로킹 발생 | 실행 순서 보장 X |
+
+## 🔎 2. 이벤트 루프와 태스크 큐
+
+> 이벤트 루프<sup>event loop</sup>는 브라우저에 내장되어 있는 기능 중 하나로, 자바스크립트의 동시성<sup>concurrency</sup>을 지원한다.
+
+대부분의 자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다.
+
+#### ✨ 콜 스택<sup>call stack</sup>
+
+> 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 **실행 컨텍스트 스택을 콜 스택이라고 한다.**
+
+함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.
+
+#### ✨ 힙<sup>heap</sup>
+
+> **힙은 객체가 저장되는 메모리 공간이다.** 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
+
+메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정<sub>(동적 할당)</sub>해야 한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화되어 있지 않다는 특징이 있다.
+
+#### ✨ Web API
+
+> 브라우저에서 제공하는 API이며, DOM API와 타이머 함수, HTTP 요청<sub>ajax</sub>과 같은 비동기 처리를 포함한다.
+
+![](https://velog.velcdn.com/images/zivivle/post/420c45ef-3403-4420-ab46-5ab4a298132e/image.png)
+
+콜 스택과 힙으로 구성되어 있는 자바스크립트 엔진은 _태스크가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행한다._ **비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다.** 예를 들어, `setTimeout`의 콜백 함수 평가와 실행은 자바스크립트 엔진이 담당하지만 _호출 스케줄링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저 또는 Node.js가 담당한다._
+
+이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.
+
+#### ✨ 태스크 큐<sup>task queue/event queue/callback queue</sup>
+
+> 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
+
+태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.
+
+#### ✨ 이벤트 루프<sup>event loop</sup>
+
+> 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수<sub>(콜백 함수, 이벤트 핸들러 등)</sub>가 있는지 반복해서 확인한다.
+
+**만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적<sup>FIFO, Fist In First Out</sup>으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.** 이때 콜 스택으로 이동한 함수는 실행된다. 즉, _태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다._
+
+![](https://velog.velcdn.com/images%2Fboram_in%2Fpost%2Fe3d6254b-5b87-47d1-8847-02b44b93ee6a%2F비동기.gif)
+
+**비동기 함수인 `setTimeout`의 콜백 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면 콜 스택에 푸시되어 실행된다.** 싱글 스레드 방식으로 동작하는 것은 브라우저가 아닌 브라우저에 내장된 자바스크립트 엔진이다. **만일 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면 자바스크립트는 비동기로 동작할 수 없다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.** 브라우저와 자바스크립트 엔진이 협력해 비동기 함수인 `setTimeout` 함수를 실행하는 것이다. 👀
+
+### 💭 이런 식으로 동작해요
+
+```javascript
+function foo() {
+  console.log('foo');
+}
+
+function bar() {
+  console.log('bar');
+}
+
+setTimeout(foo, 0); // 0초(실제로는 4ms) 후에 foo 함수 호출
+bar();
+```
+
+1. 전역 코드가 평가되어 전역 실행 컨텍스트가 생성되고 콜 스택에 푸시된다.
+2. 전역 코드가 실행되기 시작하여 setTimeout 함수가 호출되면서 함수 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다. 브라우저의 Web API인 타이머 함수도 함수 실행 컨텍스트를 생성한다.
+3. setTimeout 함수가 실행되면 콜백 함수를 호출 스케줄링하고 종료되어 콜 스택에서 팝된다. 이때 호출 스케줄링, 즉 타이머 설정과 타이머가 만료되면 _콜백 함수를 태스크 큐에 푸시하는 것은 브라우저의 역할이다._
+4. 브라우저가 수행하는 4-1과 자바스크립트 엔진이 수행하는 4-2는 병행 처리된다.  
+   4-1. 브라우저는 타이머를 설정하고 타이머의 만료를 기다린다. 이후 타이머가 만료되면 **4ms 후에 콜백 함수 foo가 태스크 큐에 푸시되어 대기하게 된다.** (지연 시간이 4ms 이하인 경우 최소 지연 시간 4ms가 지정된다.) 태스크 큐에 푸시되어 대기하는 콜백 함수는 콜 스택이 비어야 호출되므로 `setTimeout` 함수로 호출 스케줄링한 콜백 함수는 정확히 지연 시간 후에 호출된다는 보장은 없다. 즉, 약간의 시간차가 발생할 수 있다.  
+   4-2. bar 함수가 호출되어 bar 함수의 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 되고, 종료되면 콜 스택에서 팝된다. 이때 브라우저가 타이머를 설정한 후 4ms가 경과되었다면 **foo 함수는 아직 태스크 큐에서 대기 중이다.**
+5. 전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝되면서 콜 스택에는 아무런 실행 컨텍스트도 존재하지 않게 된다.
+6. 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고 태스크 큐에서 대기 중인 콜백 함수 foo가 이벤트 루프에 의해 콜 스택에 푸시된다. 이렇게 현재 실행 중인 실행 컨텍스트가 되고, foo 함수가 종료되면 콜 스택에서 팝된다.
+
+## 👀 REFERENCE
+
+모던 자바스크립트 Deep Dive 42장 비동기 프로그래밍