비동기 프로그래밍에서 'microtask'와 'macrotask'의 차이는 무엇인가요?

Q1: 비동기 프로그래밍에서 'microtask'와 'macrotask'란 무엇인가요?
- Microtask 는 자바스크립트 런타임 내에서 우선순위가 높은 작업 큐로서, 현재 실행 중인 작업이 끝난 직후에 처리되는 작업들을 말합니다. 대표적으로 `Promise`의 `.then()`, `queueMicrotask()` 등이 여기에 해당합니다.
- Macrotask 는 상대적으로 우선순위가 낮은 작업 큐로, 이벤트 루프의 한 사이클마다 하나씩 실행되는 작업입니다. 타이머(`setTimeout`, `setInterval`), I/O 이벤트, UI 이벤트 처리 등이 macrotask에 속합니다.

---

Q2: microtask와 macrotask가 각각 어떻게 실행되나요?
1. 현재 스크립트(콜 스택에 있는 작업)를 실행한다.
2. 콜 스택이 비면, 먼저 모든 microtask 큐에 있는 작업 을 순서대로 전부 처리한다.
3. 이후에 macrotask 큐에서 하나의 작업 을 꺼내 실행한다.
4. 실행이 끝나면 다시 2~3단계를 반복한다.

이 때문에 microtask가 macrotask보다 먼저 실행되고, microtask 큐가 모두 비워진 후에야 macrotask를 실행합니다.

---

Q3: microtask와 macrotask의 구체적인 예시는 무엇인가요?
- Microtask 예시
- `Promise.then()`, `Promise.catch()`, `Promise.finally()` 콜백
- `queueMicrotask()`로 등록한 콜백
- `MutationObserver` 콜백
- Macrotask 예시
- `setTimeout()`, `setInterval()` 콜백
- DOM 이벤트 핸들러 (예: 클릭, 키보드 이벤트)
- I/O 작업 콜백 (네트워크 요청 완료 등)
- UI 렌더링 작업 (브라우저마다 다름)

---

Q4: microtask와 macrotask 차이를 이해하기 위한 간단한 코드 예시는?
```javascript
console.log('script start');

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

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

console.log('script end');
```

출력 순서
```
script start
script end
promise.then (microtask)
setTimeout (macrotask)
```

해설:
- 먼저 스크립트가 즉시 실행되고,
- `Promise.then` 콜백(microtask)은 현재 콜 스택이 빈 직후 실행되고,
- `setTimeout` 콜백(macrotask)은 microtask 실행 후에 실행됩니다.

---

Q5: 왜 microtask가 macrotask보다 우선적으로 처리되나요?
microtask 큐는 현재 실행 컨텍스트가 끝난 후 즉시 후속 작업들을 처리하기 위해 설계되었습니다. 이로 인해 다음 렌더링 전에 비동기 작업의 결과를 신속하게 반영할 수 있습니다. 반면 macrotask는 상대적으로 더 큰 단위의 작업 또는 덜 긴급한 이벤트 처리를 위해 예약됩니다.

---

Q6: microtask를 과도하게 사용하면 어떤 문제가 발생하나요?
microtask를 무한히 생성하면 macrotask가 실행되지 않아 UI 업데이트나 사용자 이벤트 처리 등이 지연될 수 있습니다. 이는 브라우저가 멈춘 것 같은 현상으로 이어지므로 주의가 필요합니다.

---

Q7: microtask와 macrotask 차이를 이해하는 것이 중요한 이유는 무엇인가요?
비동기 코드의 실행 순서와 타이밍을 정확히 이해해야 디버깅, 성능 최적화, UI 반응성 개선 등에 도움이 됩니다. 특히 `Promise`와 `setTimeout`을 혼용할 때 의도치 않은 실행 순서 문제를 방지할 수 있습니다.

---

정리하면,
- Microtask : 우선순위가 높은 작업 큐, 현재 작업 후 바로 실행 (주로 Promise 콜백)
- Macrotask : 우선순위가 낮은 작업 큐, microtask가 모두 처리된 후 실행 (주로 타이머, 이벤트 콜백)

이 차이를 이해하는 것이 비동기 프로그래밍에서 올바른 로직 설계에 필수적입니다.

비동기 프로그래밍에서 'microtask'와 'macrotask'는 JavaScript의 이벤트 루프(Event Loop)에서 작업을 처리하는 두 가지 주요 개념입니다. 이 두 가지는 비동기 작업의 우선순위와 실행 순서를 결정하는 데 중요한 역할을 합니다. 아래에서 이 두 개념의 차이점과 각각의 특징에 대해 자세히 설명하겠습니다. 1. 이벤트 루프와 태스크 큐 JavaScript는 단일 스레드로 동작하는 언어입니다. 즉, 한 번에 하나의 작업만 수행할 수 있습니다. 이를 위해 JavaScript는 이벤트 루프라는 메커니즘을 사용하여 비동기 작업을 처리합니다. 이벤트 루프는 두 가지 주요 큐를 가지고 있습니다: macrotask 큐 와 microtask 큐 . - Macrotask 큐 : 일반적으로 setTimeout, setInter<a href='https://sangseek.com/sangseeks/val/ko'>val</a>, I/O 작업 등과 같은 비동기 작업이 들어가는 큐입니다. 이 큐의 작업은 이벤트 루프가 한 사이클을 마친 후에 실행됩니다. - Microtask 큐 : Promise의 then, catch, <a href='https://sangseek.com/sangseeks/finally/ko'>finally</a>와 같은 작업이 들어가는 큐입니다. microtask는 macrotask보다 우선적으로 실행됩니다. 즉, 현재 실행 중인 스크립트가 완료된 후, macrotask 큐의 작업을 처리하기 전에 microtask 큐의 모든 작업이 완료될 때까지 실행됩니다. 2. 실행 순서 이벤트 루프는 다음과 같은 순서로 작업을 처리합니다: 1. 현재 실행 중인 스크립트 가 완료될 때까지 실행됩니다. 2. Microtask 큐 의 모든 작업이 처리됩니다. 이때 microtask 큐가 비어있지 않다면, 계속해서 microtask 큐의 작업을 실행합니다. 3. Macrotask 큐 의 첫 번째 작업이 실행됩니다. 4. 다시 1번으로 돌아가서 현재 실행 중인 스크립트를 처리합니다. 이러한 실행 순서 덕분에 microtask는 macrotask보다 항상 먼저 실행됩니다. 3. 예시 아래의 코드를 통해 microtask와 macrotask의 실행 순서를 이해할 수 있습니다. ```javascript console.log('Start'); setTimeout(() => { console.log('Macrotask 1'); }, 0); Promise.resolve().then(() => { console.log('Microtask 1'); }); setTimeout(() => { console.log('Macrotask 2'); }, 0); Promise.resolve().then(() => { console.log('Microtask 2'); }); console.log('End'); ``` 위 코드를 실행하면 다음과 같은 결과가 출력됩니다: ``` Start End Microtask 1 Microtask 2 Macrotask 1 Macrotask 2 ``` 이 결과에서 볼 수 있듯이, `console.log('Start')`와 `console.log('End')`가 먼저 실행되고, 그 다음에 microtask 큐의 작업인 `Microtask 1`과 `Microtask 2`가 실행됩니다. 마지막으로 macrotask 큐의 작업인 `Macrotask 1`과 `Macrotask 2`가 실행됩니다. 4. 성능과 사용 사례 - Microtask 는 빠른 작업을 처리할 때 유용합니다. 예를 들어, Promise를 사용하여 비동기 작업의 결과를 처리할 때 microtask를 사용하면, 다음 이벤트 루프 사이클까지 기다리지 않고 즉시 결과를 처리할 수 있습니다. 이는 사용자 경험을 향상시키는 데 도움이 됩니다. - Macrotask 는 더 긴 작업이나 I/O 작업을 처리할 때 사용됩니다. 예를 들어, setTimeout을 사용하여 특정 시간 후에 작업을 실행할 수 있습니다. 이는 UI 업데이트와 같은 작업을 비동기적으로 처리할 수 있게 해줍니다. 결론 microtask와 macrotask는 JavaScript의 비동기 프로그래밍에서 중요한 역할을 하며, 이 두 가지의 차이를 이해하는 것은 성능 최적화와 사용자 경험 개선에 필수적입니다. microtask는 우선적으로 실행되며, macrotask는 그 다음에 실행됩니다. 이러한 이해를 바탕으로 비동기 작업을 설계하고 구현하는 데 도움이 될 것입니다.