Microtask vs Macrotask — 왜 Promise가 setTimeout보다 먼저 실행되나

# Microtask vs Macrotask — 왜 Promise가 setTimeout보다 먼저 실행되나

```javascript
setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
console.log("sync");
```

출력 순서는 `sync → promise → timeout`이다. `setTimeout(fn, 0)`인데 왜 Promise보다 늦을까?

## 두 종류의 큐

이벤트 루프에는 사실 큐가 두 종류 있다.

**Macrotask 큐 (Task Queue)**
- `setTimeout`, `setInterval`, `setImmediate` 콜백
- I/O 이벤트 콜백 (파일 읽기 완료, 네트워크 응답 등)
- 이벤트 루프가 한 번 돌 때 **하나만** 처리

**Microtask 큐 (Microtask Queue)**
- `Promise.then/catch/finally` 콜백
- `queueMicrotask()`로 직접 등록한 콜백
- `MutationObserver` (브라우저)
- 이벤트 루프가 macrotask를 처리한 후 **모두 비울 때까지** 처리

## 처리 순서

```
1. 콜 스택에서 현재 실행 완료
2. Microtask 큐 전부 처리 (추가되는 microtask도 계속 처리)
3. 렌더링 (브라우저 한정)
4. Macrotask 큐에서 하나 처리
5. 다시 2번으로
```

이 순서 때문에 Promise 콜백은 setTimeout보다 먼저 실행된다.

## 실제로 문제가 되는 패턴

Microtask가 계속 추가되면 macrotask는 영원히 처리되지 않는다:

```javascript
function infiniteMicrotask() {
    Promise.resolve().then(infiniteMicrotask);
}
infiniteMicrotask();
// setTimeout 콜백이 절대 실행되지 않음
// 이벤트 루프가 microtask 큐를 영원히 비우려 하기 때문
```

재귀적 Promise 체인은 `setImmediate`나 `setTimeout(fn, 0)`으로 주기적으로 양보(yield)해야 한다.

## Node.js의 `process.nextTick()`

Node.js에는 `process.nextTick()`이라는 특수 케이스가 있다. 이름과 달리 "다음 이벤트 루프 틱"이 아니라, **현재 작업이 끝난 직후, microtask 큐보다 먼저** 실행된다.

```javascript
setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
process.nextTick(() => console.log("nextTick"));
console.log("sync");
// 출력: sync → nextTick → promise → timeout
```

`process.nextTick()`의 우선순위: 동기 코드 > nextTick > Promise microtask > macrotask.

이걸 모르면 Node.js 이벤트 순서 버그를 디버깅할 때 정말 고통스럽다. 실제로 많은 타이밍 버그가 nextTick과 Promise microtask 사이의 순서 오해에서 나온다.

## 다음: libuv와 스레드 풀

Promise와 setTimeout 얘기는 순수 JavaScript 레벨이다. 파일 I/O나 DNS 조회가 어떻게 비동기로 처리되는지는 libuv의 스레드 풀 이야기다.

Microtask vs Macrotask — 왜 Promise가 setTimeout보다 먼저 실행되나

// COMMENTS

ON THIS PAGE