[JavaScript] Event Loop

브라우저 이벤트 루프(Event Loop) 정리

목차

• 1. 이벤트 루프란?
• 2. 브라우저 환경의 구조 (런타임)
• 3. 태스크 큐의 종류와 우선순위
• 4. 이벤트 루프의 동작 과정

1. 이벤트 루프란?

자바스크립트는 싱글 스레드(Single Thread) 언어입니다. 한 번에 하나의 작업만 처리할 수 있음에도 불구하고, 브라우저에서 여러 작업을 동시에 처리하는 것처럼 느껴지는 이유는 바로 이벤트 루프 덕분입니다. 이벤트 루프는 호출 스택이 비어있는지 확인하고, 기다리고 있는 비동기 작업들을 적절한 시점에 실행해주는 역할을 합니다.

---

2. 브라우저 환경의 구조

• Call Stack: 현재 실행 중인 함수들이 쌓이는 공간 (LIFO 구조)
• Web APIs: 브라우저에서 제공하는 API (setTimeout, DOM, AJAX 등). 비동기 작업을 실제로 수행합니다.
• Task Queue: 비동기 작업의 콜백 함수들이 대기하는 공간입니다.
• Event Loop: 스택이 비어있을 때 큐에 있는 함수를 스택으로 옮겨줍니다.

---

3. 태스크 큐의 종류와 우선순위

중요: 마이크로태스크 큐가 항상 먼저 실행됩니다 ⭐

• Microtask Queue (우선순위 상): Promise.then, MutationObserver 등
• (Macro)task Queue (우선순위 하): setTimeout, setInterval, setImmediate 등

---

4. 이벤트 루프의 동작 과정

순서 요약

1. 동기 코드가 실행되어 Call Stack에 쌓였다가 처리됩니다.
2. 비동기 작업이 발생하면 Web API로 넘겨지고, 완료 시 태스크 큐에 콜백이 쌓입니다.
3. 이벤트 루프는 Call Stack이 완전히 비어있는지 지속적으로 감시합니다.
4. 스택이 비면, 마이크로태스크 큐의 모든 작업을 먼저 처리합니다.
5. 그 후 일반 태스크 큐의 작업을 하나씩 스택으로 옮겨 실행합니다.

💡 면접 포인트
"setTimeout(callback, 0)이 0초 뒤에 실행되지 않는 이유는 무엇인가요?"라는 질문에 대해, 호출 스택이 비어있어야 하며 태스크 큐에서 자기 차례가 올 때까지 대기해야 하기 때문이라고 답변할 수 있어야 합니다.