11. 이벤트 루프(Event Loop) - 2

마이크로태스크(Microtasks)와 매크로태스크(Macrotasks)

마이크로태스크와 매크로태스크는 JavaScript에서 비동기 작업을 처리하는 메커니즘입니다. 이 둘은 이벤트 루프와 함께 동작하여 비동기 작업을 조절하고 실행 순서를 결정합니다. 이번 챕터에서는 마이크로태스크와 매크로태스크의 개념을 설명하고, 각각의 동작 원리와 코드 예제를 통해 이해해보겠습니다.

1. 마이크로태스크와 매크로태스크의 개념

• 마이크로태스크: Promise의 then, catch, finally 메서드와 queueMicrotask 함수로 생성된 작업들을 의미합니다. 마이크로태스크는 현재 스택이 비어있을 때 즉시 실행됩니다.
• 매크로태스크: setTimeout, setInterval, requestAnimationFrame과 같은 태스크들을 매크로태스크라고 합니다. 매크로태스크는 현재 실행 중인 코드가 완료된 이후에 실행됩니다.

2. 마이크로태스크와 매크로태스크의 동작 원리

• 마이크로태스크: 마이크로태스크는 현재 실행 중인 코드가 완료된 직후에 실행됩니다. 따라서 다른 매크로태스크나 이벤트 루프의 다음 사이클보다 우선순위를 가집니다.
• 매크로태스크: 매크로태스크는 현재 실행 중인 코드가 완료된 이후에 실행됩니다. 따라서 이전 사이클의 마이크로태스크들이 모두 처리된 이후에 실행됩니다.

3. 예제 코드

아래는 마이크로태스크와 매크로태스크의 동작을 보여주는 간단한 코드 예제입니다.

console.log('Start');

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

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

console.log('End');

 

위의 코드를 실행하면 'Start', 'End'가 먼저 출력되고, 그 후에 'Micro task (Promise)', 'Macro task (setTimeout)'가 출력됩니다. 이는 마이크로태스크가 매크로태스크보다 우선순위가 높기 때문에 먼저 실행된 결과입니다.

4. 결론

마이크로태스크와 매크로태스크는 JavaScript의 이벤트 루프를 통해 비동기 작업을 관리하는 데 중요한 역할을 합니다. 이 둘을 이해하면 비동기 코드의 동작 원리를 파악하고 예측할 수 있으며, 효율적인 코드를 작성할 수 있습니다. 따라서 JavaScript를 다루는 개발자에게 중요한 개념 중 하나입니다.