Javascript에서 마이크로태스크 큐(Microtask Queue)란?

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

1. 이벤트 루프와 큐

JavaScript는 싱글 스레드(한번에 하나의 작업만 실행) 언어이며, 비동기 작업을 처리하기 위해 이벤트 루프(Event Loop) 를 사용해서 비동기 방식으로 여러 작업을 동시에 처리하는 것처럼 보이게 합니다. 이벤트 루프는 다음과 같은 큐를 관리합니다.

• 매크로태스크 큐 (MacroTask Queue): 일반적인 비동기 작업이 여기에 들어갑니다.
  예: setTimeout, setInterval, setImmediate(Node.js), I/O 작업 등.
• 마이크로태스크 큐 (Microtask Queue): 매크로태스크보다 더 높은 우선순위를 가지며, 실행이 끝나면 바로 다음 이벤트 루프에서 처리됩니다.
  예: Promise.then(), MutationObserver, queueMicrotask() 등

---

2. 마이크로태스크가 실행되는 순서

1. 현재 실행 중인 콜 스택(Call Stack) 이 비어질 때까지 모든 동기 코드가 실행됩니다.
2. 마이크로태스크 큐에 있는 모든 작업을 처리할 수 있을 때까지 실행합니다.
3. 마이크로태스크가 모두 실행된 후, 이벤트 루프가 매크로태스크 큐에서 하나의 작업을 가져와 실행합니다.
4. 다시 마이크로태스크 큐를 비울 때까지 실행합니다.
5. 이 과정을 반복합니다.

---

3. 마이크로태스크 예제

console.log("1");

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

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

console.log("4");

 

✅ 실행 결과

1
4
3 (Promise.then)
2 (setTimeout)

 

✅ 실행 과정

1. console.log("1") 실행 → 1 출력
2. setTimeout(..., 0) 실행 → 매크로태스크 큐에 추가됨
3. Promise.resolve().then(...) 실행 → 마이크로태스크 큐에 추가됨
4. console.log("4") 실행 → 4 출력
5. 현재 콜 스택이 비었으므로, 마이크로태스크 큐 실행
   • console.log("3 (Promise.then)") 실행 → 3 출력
6. 이제 매크로태스크 큐 실행
   • console.log("2 (setTimeout)") 실행 → 2 출력

---

4. 마이크로태스크의 우선순위

마이크로태스크는 이벤트 루프의 각 반복(iteration)마다 매크로태스크보다 먼저 실행됩니다.
즉, 매크로태스크가 실행되기 전에 마이크로태스크 큐에 있는 모든 작업을 먼저 실행합니다.

예제:

setTimeout(() => console.log("매크로태스크"), 0);

queueMicrotask(() => console.log("마이크로태스크 1"));
queueMicrotask(() => console.log("마이크로태스크 2"));

console.log("동기 코드");

 

✅ 실행 결과

 

동기 코드
마이크로태스크 1
마이크로태스크 2
매크로태스크

 

✅ 실행 과정

1. setTimeout(...) 실행 → 매크로태스크 큐에 추가됨
2. queueMicrotask(...) 실행 → 마이크로태스크 큐에 추가됨 (2개)
3. console.log("동기 코드") 실행 → 동기 코드 출력
4. 마이크로태스크 큐 실행
   • 마이크로태스크 1 출력
   • 마이크로태스크 2 출력
5. 매크로태스크 실행
   • 매크로태스크 출력

---

5. 마이크로태스크를 활용하는 경우

• 비동기 작업 후 즉시 실행해야 하는 코드
  • Promise.then()을 활용하여 비동기 코드 실행 후 작업을 이어서 실행할 수 있음.
• MutationObserver를 이용한 DOM 변경 감지
  • DOM이 변경될 때 마이크로태스크를 사용하여 빠르게 반응 가능.

---

✅ 정리

1. 마이크로태스크는 매크로태스크보다 먼저 실행됨
2. 마이크로태스크 큐에는 Promise.then(), queueMicrotask(), MutationObserver 등의 작업이 들어감
3. 이벤트 루프에서 매크로태스크 실행 전에 마이크로태스크 큐가 완전히 비워짐
4. 마이크로태스크를 활용하면 빠르고 효율적인 비동기 처리가 가능함