JavaScript | JS 엔진과 런타임 환경의 구조 (스택, 힙, 이벤트루프 ..)

자바스크립트는 싱글 스레드 언어로 설계되었다. 그러나 Blocking I/O를 효율적으로 처리하기 위해 비동기 처리를 가능케 하는 여러 메커니즘과 함께 동작한다.

 

이러한 메커니즘은 자바스크립트 엔진(V8 엔진 등)과 런타임 환경(대부분의 경우 웹 브라우저, 또는 Node.js 같은 서버 사이드 환경)에 의해 제공된다.

 

이들을 포함한 자바스크립트의 핵심 구성 요소에는 콜 스택, 힙, 이벤트 루프, 태스크 큐(또는 이벤트 큐)가 있으며, 추가적으로 마이크로태스크 큐와 웹 API도 중요한 역할을 한다.

 

시간관계상 더 자세한 내용은 다음에 학습하기로 하고, 오늘은 오버뷰만 해보도록 하자!

 

---

1. 자바스크립트 엔진 내부 구성요소

자바스크립트 엔진(대표적으로 크롬의 V8) 내부의 구성요소로는 콜 스택, 힙이 있다.

 

콜 스택 (Call Stack)

함수의 호출을 기록하는 스택 구조이다. 현재 실행 중인 함수의 정보가 쌓이며, 함수가 반환될 때 해당 정보가 스택에서 제거된다.

 

힙 (Heap)

동적으로 할당된 객체들이 저장되는 메모리 영역이다. 힙은 구조화되지 않은 '큰 덩어리'의 메모리로, 객체와 같은 참조형 데이터가 저장된다.

 

 

2. 런타임 환경이 제공하는 구성요소

자바스크립트 자체는 싱글 스레드이므로, 비동기 작업들은 브라우저나 Node.js에서 실행해준다. 비동기 작업이 끝나면 그 결과를 태스크 큐에 넣고, 때가 되면 이벤트 루프가 콜 스택에 넣는 방식으로 돌아간다. 

 

1) 브라우저, Node.js 모두 제공

이벤트 루프 (Event Loop)

현재 실행 중인 태스크(콜 스택의 작업)가 완료되고, 콜 스택이 비게 되면 이벤트 루프는 태스크 큐 또는 마이크로태스크 큐에서 대기 중인 다음 태스크를 콜 스택으로 이동시킨다. 양쪽 상황을 체크하며 해당 작업을 반복한다.

 

태스크 큐나 마이크로태스크 큐에 대기 중인 태스크는 비동기 작업의 결과(예: setTimeout, 클릭 이벤트 등)를 처리할 콜백 함수이다.

 

비동기 작업 자체는 브라우저의 웹 API나 Node.js의 비동기 API를 통해 수행되며, 이러한 API들은 자바스크립트 엔진 외부에서 동작한다. 비동기 작업이 완료되면, 해당 작업의 콜백 함수가 적절한 큐(태스크 큐 또는 마이크로태스크 큐)에 추가되고, 이벤트 루프에 의해 콜 스택으로 이동하여 실행된다.

 

마이크로태스크 큐 (Microtask Queue)

 

마이크로태스크 큐는 주로 프로미스와 관련된 콜백 함수들(.then(), .catch(), .finally())을 처리하며, 태스크 큐보다 우선 순위가 높아 마이크로태스크 큐가 비어 있지 않다면 태스크 큐의 태스크들은 대기해야 한다.

 

 

태스크 큐 (Task Queue, 이벤트 큐)

비동기 작업의 콜백 함수가 실행될 준비가 되면 대기하는 큐이다. 이벤트 루프에 의해 콜 스택으로 전달되어 실행된다.

 

 

 

2) 브라우저에서만 제공

웹 API (Web APIs)

자바스크립트 엔진 자체는 비동기 작업을 직접 처리할 수 없기 때문에, 이를 위해 웹 API(예: setTimeout, XMLHttpRequest, DOM 이벤트 등)를 활용한다.

 

이러한 API들은 자바스크립트 엔진 외부에서 제공되며, 비동기 작업을 실행하고 해당 작업이 완료되면 콜백 함수를 태스크 큐(또는 이벤트 큐) 또는 마이크로태스크 큐에 넣는다. 

 

 

 

3. 비동기 작업의 처리 과정 예시

비동기 작업인 fetch() 함수를 호출하는 경우를 예시로 처리 과정을 이해해보자.

 

1. 웹 API 호출: 자바스크립트 코드에서 fetch() 함수를 사용해 네트워크 요청을 비동기적으로 수행하도록 요청한다.
2. 브라우저가 작업 수행: 이 요청은 자바스크립트 엔진을 벗어나 브라우저의 네트워크 스택을 통해 처리된다.
   • 이 과정에서 자바스크립트 엔진의 메인 스레드는 차단되지 않으므로, 다른 코드 실행이 계속될 수 있다.
3. 콜백 함수 대기: 요청에 대한 응답이 도착하면, 브라우저는 응답을 처리할 콜백 함수를 태스크 큐나 마이크로태스크 큐에 넣는다.
4. 이벤트 루프 활동: 콜 스택이 비어 있을 때, 이벤트 루프는 큐에서 콜백 함수를 콜 스택으로 옮겨 실행한다.

 

---

 

이벤트 루프 동작 과정에 대한 매우 유명한 영상