[JS] 이벤트루프

자바스크립트 이벤트 루프(Event Loop) 완전 정복

이벤트루프는 자바스크립트의 비동기 처리 메커니즘을 이해하는 데 핵심이 되는 개념이다.

---

1. 자바스크립트는 왜 이벤트 루프가 필요할까?

자바스크립트는 싱글 스레드(single-thread) 언어

즉, 한 번에 하나의 작업만 실행할 수 있다.

그렇다면 다음과 같은 상황에서는 어떻게 될까?

while (true) {
  // 무한 루프
}
console.log('이 코드는 절대 실행되지 않아요.');

이처럼 하나의 작업이 블로킹(blocking)되면 다른 코드가 실행되지 않는 문제가 생김

이를 해결하기 위해 자바스크립트는 비동기 처리를 도입했고, 그 핵심이 바로 이벤트 루프

---

2. 이벤트 루프의 구조

자바스크립트의 실행 환경(예: 브라우저, Node.js)은 다음과 같은 구조를 가진다.

• 콜 스택(Call Stack)
• 태스크 큐(Task Queue / Callback Queue)
• 이벤트 루프(Event Loop)
• (마이크로태스크 큐 Microtask Queue)

🔹 콜 스택(Call Stack)

현재 실행 중인 함수들이 쌓이는 공간

자바스크립트는 여기 있는 작업을 동기적으로 처리함

function a() {
  b();
}
function b() {
  console.log('Hello');
}
a(); // a → b → console.log()

🔹 태스크 큐(Task Queue)

setTimeout, setInterval, DOM 이벤트, fetch 콜백 등 비동기 작업의 콜백이 대기하는 큐

콜 스택이 비면 여기 있는 작업이 하나씩 이동한다.

🔹 마이크로태스크 큐(Microtask Queue)

Promise.then, MutationObserver 등의 콜백이 저장되는 큐

태스크 큐보다 우선순위가 높다.

---

3. 이벤트 루프의 동작 원리

이벤트 루프는 아주 단순한 역할을 반복한다.

1. 콜 스택이 비어 있는지 확인
2. 비어 있으면 마이크로태스크 큐에서 작업을 모두 꺼내 실행
3. 마이크로태스크가 모두 끝나면 태스크 큐에서 하나를 꺼내 실행
4. 1~3을 반복

이런 식으로 자바스크립트는 동기 코드와 비동기 코드가 자연스럽게 섞여 실행될 수 있도록 함

---

4. 예제 코드로 이해하기

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

실행 순서: 1 → 4 → 3 → 2

• 1, 4: 동기 → 콜 스택에서 바로 실행
• Promise.then: 마이크로태스크 큐 → 콜 스택이 비자마자 실행
• setTimeout: 태스크 큐 → 마이크로태스크가 끝난 후 실행

---

5. 요약

용어	설명	우선순위
Call Stack	실행 중인 동기 코드가 쌓이는 공간	가장 먼저 실행됨
Microtask Queue	Promise.then, queueMicrotask 등	높은 우선순위
Task Queue	setTimeout, 이벤트 핸들러 등	낮은 우선순위
Event Loop	위의 요소들을 조율하며 실행 순서를 관리	-

 

---

마무리

이벤트 루프는 자바스크립트의 비동기 처리 방식의 핵심이다. (싱글 스레드이지만 비동기 처리를 할 수 있게 만듦)