JavaScript 이벤트 루프(event loop)는 비동기 작업을 어떻게 처리하나요?

Question

IT Interview Practice · Accepted Answer

JavaScript는 **단일 스레드**에서 실행되므로 한 번에 한 가지 일만 할 수 있습니다. **이벤트 루프(event loop)**는 블로킹 없이 비동기 작업을 처리할 수 있게 해줍니다: 콜 스택을 실행하고, 스택이 비면 큐에서 콜백을 꺼냅니다.

우선순위가 다른 두 개의 큐가 있습니다:
- **마이크로태스크(Microtasks)**: Promise 콜백(`.then`), `queueMicrotask`. 각 태스크 이후, 렌더링 전에 **완전히** 비워집니다.
- **매크로태스크(Macrotasks)**: `setTimeout`, I/O, UI 이벤트. 루프 반복마다 하나씩 처리됩니다.

```js
console.log("1");                         // 동기
setTimeout(() => console.log("2"), 0);    // 매크로태스크
Promise.resolve().then(() => console.log("3")); // 마이크로태스크
console.log("4");                         // 동기
// 출력: 1, 4, 3, 2
```

## 왜 그 순서인가

1. 동기 코드가 먼저 실행됩니다: `1`, `4`.
2. 스택이 비면 → **모든 마이크로태스크**를 비웁니다: `3`.
3. 그다음 **매크로태스크 하나**를 가져옵니다: `2`.

그래서 둘 다 "비동기"임에도 `Promise.then`은 항상 `setTimeout(…, 0)`보다 **먼저** 실행됩니다 — 마이크로태스크가 우선순위를 가지기 때문입니다.

## 실용적 결과

```js
// ❌ 단일 스레드를 막음 — UI가 5초간 멈춤
while (Date.now() - start < 5000) {}
```

긴 동기 작업은 모든 것(렌더링, 클릭)을 막습니다. 무거운 CPU 작업은 **Web Worker**(실제 별도 스레드)로 떠넘기세요.

## 왜 중요한가

이벤트 루프를 이해하면 비동기 순서, promise가 타이머보다 먼저 resolve되는 이유, 메인 스레드를 절대 막지 말아야 하는 이유를 설명할 수 있습니다 — 모든 비동기 JavaScript의 핵심 멘탈 모델입니다.

왜 그 순서인가

실용적 결과

왜 중요한가

관련 질문