이벤트 루프 (Event Loop)

<JavaScript는 싱글 스레드임>

JavaScript가 코드를 한 번에 한 줄씩, 순차적으로 실행한다는 의미입니다. 모든 JavaScript 코드는 메인 스레드에서 (싱글 스레드란 여러 작업을 병렬로 처리하지 않고, 순차적으로 처리하는 구조를 의미합니다) 실행되며, 한 번에 하나의 작업만 수행할 수 있습니다. 따라서 이 스레드에서는 여러 코드를 병렬로 동시에 실행할 수 있는 방법이 없습니다.

 

<이벤트 루프에 대해>

함수 실행 스택이 비워질 때마다 대기열(큐)에서 작업을 꺼내어 실행 스택에 배치하는 역할을 합니다.

 

이벤트 루프 작동 방식 :

1. 호출 스택(Call Stack):
   JavaScript는 현재 실행 중인 함수(프로그램이 실행되는 위치)를 추적하기 위해 호출 스택을 사용합니다. 각 함수 호출은 호출 스택에 추가되고, 완료되면 스택에서 제거됩니다.
2. 콜백 큐(Callback Queue):
   I/O 작업이나 타이머와 같은 비동기 작업은 브라우저나 Node.js 런타임에 의해 처리됩니다. 이러한 작업이 완료되면, 관련 함수(콜백)가 콜백 큐에 추가됩니다.
3. 이벤트 루프(Event Loop):
   이벤트 루프는 호출 스택과 콜백 큐를 지속적으로 확인합니다. 호출 스택이 비어 있을 때 콜백 큐의 첫 번째 함수를 호출 스택으로 이동하여 실행할 준비를 합니다.
4. 실행(Execution):
   호출 스택의 맨 위에 있는 함수가 실행됩니다. 이 함수에 비동기 코드가 포함되어 있다면, 추가 비동기 작업을 시작할 수 있습니다.
5. 콜백 실행(Callback Execution):
   비동기 작업이 완료되면 그 작업에 대한 콜백이 콜백 큐에 추가됩니다.
6. 반복(Repeat):
   이벤트 루프는 이 과정을 계속 반복하여 호출 스택이 비어 있을 때만 콜백 큐에서 다음 함수를 가져와 실행합니다.

<Task queue & Macrotask queue>

Task Queue는 Web API가 수행한 비동기 함수를 넘겨받아 Event Loop가 해당 함수를 Call Stack에 넘겨줄 때까지 비동기 작업에 대한 콜백 함수를 쌓아놓는 곳입니다. 
Task Queue 대표적인 콜백함수는 : setTimeout(), setInterval(), setImmediate(), UI 렌더링, requestAnimationFrame()와 같은 task를 넘겨받습니다.

 

Microtask Queue는 task queue (macrotask) 보다 우선순위가 높으며 먼저 실행됩니다. 따라서 Microtask queue의 콜백함수를 전부 실행하고 나서 task queue의 콜백함수들을 실행합니다.
Microtask Queue 대표적인 콜백함수는 : Promise, MutationObserver, async/await, process.nextTick 같은 비동기 호출을 넘겨받습니다. 

아래 예시로 순서 확인 가능합니다.

일반 호출 스택이 먼저 실행되고 Microtask (Promise) 가 다음으로 실행하고 task queue가 가장 마지막으로 작동된걸 볼 수 있습니다. 따라서 Task Queue는 일반적인 비동기 작업을 대기하는 큐이며, Microtask Queue는 주로 빠른 반응이 필요한 작업을 대기하는 큐로 우선순위가 높습니다.

 

참고 자료 :
https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

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

이벤트 루프 - JavaScript | MDN

https://www.geeksforgeeks.org/what-is-an-event-loop-in-javascript/

What is an event loop in JavaScript ? - GeeksforGeeks