[JS] 메시지 큐와 이벤트 루프 (Message Queue and Event Loop)

자바스크립트의 특징

자바스크립트는 기본적으로 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고, 한번에 한 가지 일만 처리할 수 있습니다. 자바스크립트를 작동시키는 엔진은 메모리힙(Memory Heap)과 콜스택(CallStack)을 동작시킵니다.

하지만 자바스크립트로 AJAX처리나 setTimeOut, addEventListener 등 함수를 이용해 비동기적 작업 처리가 가능합니다.  이런 작업이 가능한 이유는 자바스크립트 런타임이 메모리힙과 스택으로만 이뤄진 것이 아니라 브라우저에서 제공하는 Web API와 Event Queue와 Event Loop라는 것이 존재하기 때문입니다. 

메시지 큐 

메시지 큐는 자료구조 큐(Queue) 기반으로 구서오디어 있습니다. LIFO(Last in First Out, 후입선출) 구조인 스택과는 달리 먼저 들어온 것이 먼저 나가는 FIFO(First In First Out, 선입 선출) 구조의 특징을 가집니다. 

출처: https://angularcss.blogspot.com/2019/06/event-loop.html

콜스택이 비어있게 되면 메시지 큐에 있는 콜백 함수를 꺼내와 실행합니다. 여기서 메시지 큐에서 콜백 함수를 꺼내오는 과정은 이벤트 루프가 담당합니다. 

이벤트 루프 실행 과정 

1. greet() 함수가 실행되면 콜스택에 쌓이고, 리턴값이 출력되면 스택에서 꺼냅니다. 

출처: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

2. respond() 함수는 setTimeout 함수를 호출합니다. setTimeout은 브라우저 Web API에서 제공합니다. setTimeout에 콜백함수가 넘겨지면서 respond함수도 스택에서 나옵니다. 

출처: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

3. Web API에서 우리가 넘겨준 두번째 인자 값에 따라서 1초 동안 타이머를 실행하고, 메시지큐에 넘겨줍니다. 

출처: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

4. 이제 드디어 이벤트 루프가 일할 차례입니다! 만약에 콜스택이 비어있다면, 큐에 담겨져있는 첫번째 아이템을 콜스택으로 넘겨줍니다. 

출처: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

5. 드디어 콜백 함수가 스택에서 실행됩니다. 리턴값을 출력하고나면 콜스택에서 빠져나오게 됩니다. 

출처: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

요약하자면 자바스크립트가 실제 구동되는 환경(브라우저, Node.js 등)인 런타임에서는 여러개의 스레드가 작동합니다. 단일 호출 스택인 자바스크립트 엔진에서 비동기적인 함수 호출을 실행하기 위한 장치가 바로 메시지큐와 이벤트 루프입니다. 

 

참고 자료

✨♻️ JavaScript Visualized: Event Loop

GitHub - leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know.

[Youtube] 그러니까 이벤트 루프가 뭐라고?