위 이미지는 자바스크립트 엔진 중 V8을 나타낸 이미지다.
자바스크립트는 싱글 스레드이다. 스레드가 하나이기 때문에 동시에 하나의 작업만 처리할 수 있다고 생각할 수 있다.
하지만 자바스크립트는 여러 개의 작업을 처리하는 모습을 볼 수 있다.
자바스크립트 엔진은 메모리 할당을 관리하는 heap과 call stack만 존재하는 것을 알 수 있다.
즉, 동시성에 대한 처리는 자바스크립트 외부에서 처리하고 있음을 알 수 있다.
자바스크립트는 단일 스레드기반의 언어라서, 단일 호출 스택을 사용하지만, 실제로 자바스크립트를 이용하는 환경 (브라우저, Nodejs)에서는 여러개의 스레드를 활용하며, 이러한 환경을 자바스크립트 엔진과 상호 연동하기 위해서 사용하는 것이 바로 이벤트 루프다.
JS 엔진 구성요소
각각의 요소를 알아보자
- Memory Heap
- Call Stack
- Web APIs
- Task Queue
- Event Loop
메모리 힙 (Memory Heap)
메모리 할당이 일어나는 곳이며 객체(변수, 함수 등)들이 담긴다.
호출 스택 (Call Stack)
자바스크립트는 싱글 스레드이므로 단일 호출 스택이다.
코드가 실행되면 코드의 내부의 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳이다.
Web APIs
Web APIs는 자바스크립트 엔진이 아니라 브라우저에서 제공하는 API입니다.
- DOM (document)
- AJAX (XMLHttpRequest)
- Timeout (setTimeout)
자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청(ajax) 메소드, DOM 이벤트 등의 메소드를 지원합니다.
콜스택에서 불러온 함수 중 비동기적인 함수이면 Web API 가 이것의 Run함수를 호출합니다.
비동기적 처리라 했으니 DOM, Ajax, SetTimeout 등이 이것에 해당하며 Web API에서 처리를 끝마친 함수를 Callback Queue으로 옮깁니다.
Task Queue
Task Queue는 Web API에서 보내진 비동기 처리가 모이는 곳으로 콜 스택과는 다르게 FIFO되는 큐의 특징을 가집니다.
여기 모인 비동기함수는 이제부터 이벤트 루프의 감시하에 놓이게 됩니다.
이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간이라고 생각해도 됩니다.
특이하게 프로미스는 태스크 큐에서 마이크로 태스크에 추가됩니다.
마이크로 태스크는 일반 태스크보다 더 높은 우선순위를 가집니다.
즉, 태스크 큐에 대기중인 것이 있다 해도 마이크로 태스크에 있는 것을 우선해서 실행합니다.
| 매크로 | 비동기 API는 작업이 완료되면 콜백함수를 태스크 큐에 추가 |
|---|---|
| 마이크로 | 일반 태스크 큐에 있는 것보다 높은 우선 순위를 가짐 (promise 등) |
Event Loop
이벤트 루프는 호출 스택과 태스크 큐를 감시합니다.
호출 스택이 비게 되면 태스크 큐에 쌓인 비동기 함수를 FIFO 순서대로 호출 스택으로 보내주는 역할을 합니다.
참고링크
