event-loop.md

이벤트 루프 (Event Loop)

자바스크립트는 단일 스레드 기반 언어로, 자바스크립트 엔진이 단일 콜 스택을 갖는다. 즉, 요청이 동기적으로 처리된다.

그렇다면 비동기 요청은 어떻게 처리될까? 그것은 바로 자바스크립트를 실행하는 환경인 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행 환경을 상호 연동시켜주는 장치가 바로 이벤트 루프이다. 따라서, 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다.

콜 스택(Call Stack)과 힙(Heap)

자바스크립트 엔진이 자바스크립트를 실행할 때, 원시 타입 및 참조 타입을 저장하는 메모리 구조로 콜 스택과 힙을 가진다.

• 콜 스택 : 원시타입 값(기본형 데이터)과 함수 호출의 실행 컨텍스트를 저장하는 곳이다.
• 힙 : 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장하는 곳이다.

콜 스택과 힙의 동작 원리

1. 전역 실행 컨텍스트가 생성되고 원시값은 콜스택에, 참조값은 힙에 저장된다.
2. 함수가 실행되면 새로운 함수 실행 컨텍스트가 생성되며, 동일하게 원시값은 콜스택, 참조값은 힙에 저장된다.
3. 함수 실행이 끝나면 함수 실행 컨텍스트는 콜스택에서 제거된다.
4. 전체 코드의 실행이 끝나고 전역 실행 컨텍스트가 콜스택에서 제거된다. 전역 실행 컨텍스트가 제거됨에 따라서, 힙의 객체를 참조하는 스택의 값이 없기 때문에 가비지 컬렉터에 의해 제거된다.

동작 과정

이벤트 루프는 어떤 요청이 발생하면 그 작업에 대해 스레드 실행만을 일으킬 뿐 요청에 대한 처리는 워커 스레드가 실행한다.

워커 스레드가 콜백 함수의 실행을 마치면 이벤트 루프로 응답하게 되고, 이벤트 루프는 이것을 실행하여 클라이언트에게 결과를 응답해준다.

태스크 큐 & 마이크로태스크 큐

자바스크립트의 실행 환경은 2가지 큐를 갖고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백 함수 등의 태스크가 담기는 공간이다.

태스크의 종류에 따라 다른 큐에 담기게 되는데, 그 중 setTimeout, setInterval, UI 렌더링, requestAnimationFrame 등이 태스크 큐에, Promise, MutationObserver 등이 마이크로태스크 큐에 담긴다.

이벤트 루프는 2개의 큐를 감시하고 있다가 콜스택이 비게 되면 콜백함수를 꺼내와서 실행한다. 이때 마이크로태스크 큐의 콜백함수가 우선순위를 갖기 때문에, 마이크로태스크 큐의 콜백함수를 전부 실행하고 나서 태스크 큐의 콜백함수들을 실행한다.

참고

• youtube | what the heck is the event loop anyway
• github | 이벤트 루프 동작 예시