JavaScript Academy · 강의

queueMicrotask와 실행 순서

실행 순서를 정확하게 제어합니다.

queueMicrotask와 실행 순서은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

queueMicrotask 알아보기

queueMicrotask는 프로미스를 만들지 않고 마이크로태스크를 직접 예약하는 방법입니다. 콜백은 현재 동기 코드가 끝난 후, 어떤 매크로태스크보다 먼저 실행됩니다.

작업을 바로 다음 마이크로태스크 확인 시점으로 미룰 때 가장 깔끔한 도구입니다.

기본 사용법

queueMicrotask에 함수를 전달합니다. 동기 코드가 끝난 후 함수가 실행됩니다.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

프로미스와 같은 우선순위

queueMicrotask 콜백과 프로미스 .then은 같은 마이크로태스크 큐를 공유합니다. 예약된 순서대로 실행됩니다.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

setTimeout보다 먼저 실행됩니다

모든 마이크로태스크와 마찬가지로 queueMicrotask 콜백은 어떤 setTimeout 매크로태스크보다 먼저 실행됩니다. 더 일찍 예약된 매크로태스크라도 마찬가지입니다.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

처리 과정 안의 실행 순서

마이크로태스크는 FIFO 순서로 실행됩니다. 큐에 먼저 들어간 마이크로태스크가 큐를 처리할 때 먼저 실행됩니다.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

마이크로태스크 중첩하기

마이크로태스크는 또 다른 마이크로태스크를 큐에 넣을 수 있습니다. 새 마이크로태스크는 같은 처리 과정에서 현재 큐에 들어 있는 마이크로태스크 뒤에 실행되며, 어떤 매크로태스크보다 먼저 실행됩니다.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

전체 실행 순서 예제

동기 코드, 마이크로태스크, 매크로태스크를 함께 사용해 보겠습니다. 규칙을 따라가 보세요. 동기 코드가 먼저 실행되고, 그다음 마이크로태스크가 순서대로 실행되며, 마지막으로 타이머가 실행됩니다.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

async/await와의 실행 순서 섞기

await 후속 실행도 마이크로태스크이므로, 예약된 순서에 따라 queueMicrotask와 번갈아 실행됩니다.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

queueMicrotask를 사용하는 이유

현재 호출 스택이 끝난 후, 브라우저가 화면을 그리거나 타이머가 실행되기 전에 작은 작업 하나를 지연해야 할 때 사용합니다. 버리는 프로미스를 만드는 데 따르는 비용과 해결 의미를 피할 수 있습니다.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

무한 마이크로태스크 반복 피하기

마이크로태스크는 매크로태스크보다 먼저 완전히 처리되므로, 항상 자신을 다시 큐에 넣는 콜백은 타이머와 렌더링을 영원히 막습니다. 항상 종료 조건을 두어야 합니다.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

완전한 작동 모델

각 이벤트 루프 순서에서는 매크로태스크 또는 초기 스크립트를 실행한 다음 모든 마이크로태스크를 처리하고, 렌더링한 후 반복합니다. queueMicrotask를 사용하면 이 처리 단계에 정확히 연결할 수 있습니다.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

빠른 확인

queueMicrotask 콜백은 setTimeout(fn, 0)과 비교해 언제 실행될까요?

복습: queueMicrotask와 실행 순서

세밀한 예약 방식을 익혔습니다.

queueMicrotask는 프로미스 없이 마이크로태스크를 예약합니다.
프로미스 콜백과 마이크로태스크 큐를 공유하며 FIFO 순서로 실행됩니다.
모든 마이크로태스크는 어떤 매크로태스크와 렌더링보다 먼저 처리됩니다.
루프 모델은 매크로태스크, 마이크로태스크 처리, 렌더링, 반복입니다.

자주 묻는 질문

“queueMicrotask와 실행 순서” 강의는 무료인가요?

네 — “queueMicrotask와 실행 순서” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“queueMicrotask와 실행 순서”에서 뭘 배우나요?

실행 순서를 정확하게 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“queueMicrotask와 실행 순서” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기