이벤트 루프

03/04

 

 

JavaScript 의 Event Loop 는, 단일 스레드 방식인 JS 가 비동기 작업을 수행하고 동시성을 지원할 수 있게 해주는 핵심 메커니즘이다. 'Call Stack 이 비었을 때만 Queue 의 작업을 가져와 실행한다' 라는 단순하지만 확실한 규칙의 반복으로, 단일 스레드 구조의 한계를 극복하는 똑똑한 방식.

구성 요소로는,
Call Stack : 현재 실행 중인 함수들이 쌓이는 곳. LIFO 방식으로 작동.
Task Queue : 비동기 작업이 완료된 후 실행될 콜백 함수들이 대기하는 곳.
Event Loop : Call Stack 이 비어 있는지 확인하고, 비어 있다면 Callback Queue 의 작업을 Stack 으로 옮겨 실행한다.

큐는 크게 두 종류로 나뉘며, 우선 순위가 다르다. 이벤트 루프는 Macrotask 를 하나 처리하기 전에, Microtask queue 에 쌓인 모든 작업을 먼저 처리한다.
Microtask Queue (높은 우선순위) : Promise.then, MutationObserver, async/await
Macrotask Queue (낮은 우선순위) : setTimeout, setInterval, setImmediate

---

동작 원리

동기 코드 실행
모든 코드는 일단 Call Stack 에서 순서대로 실행된다.

비동기 요청
setTimeout 이나 fetch 같은 비동기 함수를 만나면, JS 엔진은 이를 Web APIs(브라우저 환경) 으로 넘기고 다음 코드를 바로 실행한다.

대기열 이동
Web APIs 에서 작업이 완료되면, 결과 콜백 함수를 Tast Queue 로 보낸다.

루프 확인
이벤트 루프는 끊임없이 Call Stack 을 확인한다.

실행
Call Stack 이 완전히 비어있는 것이 확인되면, Task Queue 의 첫 번째 함수를 Stack 으로 끌어올려, 실행한다.

---

이런 과정을 통해, fetch 로 데이터를 가져오는 동안 스레드가 멈춰 브라우저 화면이 굳어버리는 것을 방지할 수 있고, 무거운 작업(네트워크, 타이머 등)을 브라우저에 맡기고 JS 엔진은 멈춤 없이 다음 코드를 처리할 수 있게 된다.
다만, Call Stack 에서 무한 루프가 돌거나, 너무 오래 걸리는 작업을 수행하면, 이벤트 루프가 Queue 에서 함수를 가져오지 못해 브라우저 응답 없음 상태가 된다.

마이크로태스크와 매크로태스크 큐의 우선순위 변화를 직관적으로 보여주는 시각화 된 사이트가 있는데,

JS Visualizer 9000

여기의 예제들을 보면, 예상과 다른 순서로 동작했던 이유를 알 수 있다.