[javascript] 마이크로태스크 큐와 매크로태스크 큐

14 Dec 2023

javascript

=============================

서론

이번 글에서는 자바스크립트의 마이크로태스크 큐와 매크로태스크 큐에 대해 알아보겠습니다. 이 두 가지 큐는 비동기 처리에 사용되며, 자바스크립트의 이벤트 루프와 관련이 깊습니다.

마이크로태스크 큐

마이크로태스크 큐는 자바스크립트의 Promise나 MutationObserver 콜백과 같은 비동기 작업들이 수행되는 곳입니다. 마이크로태스크 큐는 매크로태스크 큐보다 우선순위가 높아 먼저 실행됩니다. Promise의 then 메서드로 전달된 함수가 마이크로태스크 큐에서 실행됩니다.

매크로태스크 큐

매크로태스크 큐는 타이머 콜백, 이벤트 핸들러, AJAX 요청 콜백 등의 비동기 작업들이 대기하는 곳입니다. 이 큐는 사용자 인터페이스 업데이트가 발생하기 전에 실행됩니다.

마이크로태스크 큐와 매크로태스크 큐의 사용

아래는 간단한 예제 코드입니다.

console.log('Script Start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('Script End');

위 코드의 실행 결과는 다음과 같습니다.

Script Start
Script End
Promise
setTimeout

결론

마이크로태스크 큐와 매크로태스크 큐는 비동기 작업을 관리하는데 중요한 역할을 합니다. 이를 잘 이해하고 활용하여 효율적으로 비동기 코드를 작성하는 것이 중요합니다.

참고 자료

이상으로 마이크로태스크 큐와 매크로태스크 큐에 대한 간단한 소개를 마치도록 하겠습니다. 감사합니다.