[42장] 비동기 프로그래밍 (2)

 

- 목표

1. 자바스크립트 엔진
2. 이벤트 루프, 태스크 큐
3. 정리

---

📝 자바스크립트 엔진

자바스크립트 엔진은 싱글 스레드 방식으로 동작한다. 이때 싱글 스레드 방식으로 동작하는 것은 브라우저가 아닌 브라우저에 내장된 자바스크립트 엔진이라는 것에 주의해야한다. 만약에 모든 자바스크립트 코드가 싱글스레드로 동작한다면 자바스크립트는 비동기로 동작할 수 없다. 즉, 엔진은 싱글스레드로 동작하지만, 브라우저는 멀티 스레드로 동작한다.

자바스크립트의 엔진(V8) 은 위 그림과 같이 크게 2개의 영역으로 구분된다.

- Call Stack  : 소스 코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료 구조인 실행 컨텍스트 스택

- Heap : 객체가 저장되는 메모리 공간

이처럼 콜 스택과 힙으로 구성된 자바스크립트 엔진은 단순히 task 가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행한다.

---

📝 이벤트 루프, 태스크 큐

자바스크립트는 싱글 스레드로 동작해서 한번에 하나의 task 를 처리하는 것이 일반적이다. 하지만, 자바스크립트를 사용하는 브라우저를 보면 한번에 다양한 task 가 동시에 처리 되는 것처럼 보인다. 이것은 자바스크립트의 동시성을 지원하는 이벤트 루프가 동작했기에 가능한 일이다. 

 

 

 

- 이벤트 루프

콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지 확인하고  태스크 큐에 대기중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 빈 상태이고 태스크 큐에 대기중인 함수가 있으면 순차적(FIFO) 으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동시켜 실행한다. 이것으로 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.

 

- 태스크 큐

비동기 함수의 콜백 함수나 이벤트 핸들러가 일시적으로 보관되는 영역으로 태스크 큐와 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로 태스크 큐도 존재한다. 만약 태스크 큐와 마이크로 태스크 큐 두곳 모도두에 대기중인 함수가 있고, 콜 스택이 빈 것을 이벤트 루프가 확인한 경우 마이크로 태스크 큐의 함수가 먼저 콜 스택으로 이동하여 실행된다.

---

🔥 배운점

비동기 처리를 하는 경우 특정 상황에서 생각한것과 순서가 다르게 처리되는 경우를 마주한 적이 있는데 그 것이 마이크로 태스크 큐와 일반 태스크 큐의 차이에서 나타나는 것임을 알았고, 그것으로 순서가 다르게 처리되는 상황을 이해할 수 있었다.

 

- 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop

이벤트 루프 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/API/HTML_DOM_API/Microtask_guide

JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기 - Web API | MDN