JavaScript Academy · 강의

마이크로태스크와 프로미스

프로미스 콜백이 먼저 실행되는 이유를 알아봅니다.

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

마이크로태스크란 무엇인가

마이크로태스크는 우선순위가 높은 지연 작업입니다. 프로미스 콜백(.then, .catch, .finally)과 queueMicrotask는 모두 마이크로태스크를 예약합니다.

핵심 규칙은 다음과 같습니다. 각 동기 실행이 끝나면 모든 마이크로태스크가 매크로태스크보다 먼저 처리됩니다.

프로미스 콜백은 지연됩니다

이미 해결된 프로미스도 .then 콜백을 마이크로태스크로 예약합니다. 콜백은 동기적으로 실행되지 않습니다.

console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');

마이크로태스크가 매크로태스크보다 먼저 실행됩니다

이것이 가장 중요한 실행 순서 규칙입니다. 타이머를 먼저 예약했더라도 프로미스 콜백은 setTimeout 콜백보다 먼저 실행됩니다.

setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');

마이크로태스크 큐는 완전히 처리됩니다

이벤트 루프는 다음 매크로태스크를 실행하기 전에 전체 마이크로태스크 큐를 비웁니다. 여러 프로미스 콜백은 이 처리 과정에서 모두 연이어 실행됩니다.

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

연결된 프로미스

연결된 각 .then은 이전 단계가 완료될 때 새로운 마이크로태스크를 예약합니다. 그래도 대기 중인 타이머보다 모두 먼저 실행됩니다.

setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
  .then(() => console.log('then 3'));
console.log('sync');

큐 처리 중 예약되는 마이크로태스크

마이크로태스크가 또 다른 마이크로태스크를 예약하면 새 마이크로태스크도 같은 처리 과정에서 매크로태스크보다 먼저 실행됩니다. 큐가 정말로 빌 때까지 계속 처리됩니다.

Promise.resolve().then(() => {
  console.log('micro A');
  Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');

해결된 값은 다음 단계로 전달됩니다

.then 처리 함수가 반환한 값은 연결된 다음 처리 함수의 입력이 되며, 이 과정 전체가 마이크로태스크를 통해 이루어집니다.

Promise.resolve(2)
  .then(n => n * 3)
  .then(n => n + 1)
  .then(n => console.log('result', n));
console.log('sync first');

async/await는 마이크로태스크를 사용합니다

await 뒤의 코드는 마이크로태스크로 재개됩니다. 따라서 더 일찍 예약된 타이머보다 먼저 대기 후속 실행이 이루어집니다.

async function run() {
  console.log('a');
  await null;
  console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');

통합 실행 순서 예제

지금까지 배운 내용을 모두 적용해 보겠습니다. 순서를 예측해 보세요. 동기 코드가 먼저 실행되고, 그다음 모든 마이크로태스크가 실행되며, 마지막으로 매크로태스크가 실행됩니다.

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

마이크로태스크 고갈이 위험한 이유

마이크로태스크는 항상 매크로태스크보다 먼저 실행되므로, 계속해서 더 많은 마이크로태스크를 예약하는 마이크로태스크는 타이머와 렌더링을 고갈시켜 실행되지 못하게 할 수 있습니다. 마이크로태스크 연결은 유한하게 유지해야 합니다.

let n = 0;
function loop() {
  if (n++ < 3) {
    console.log('micro ' + n);
    Promise.resolve().then(loop);
  }
}
setTimeout(() => console.log('macro after micros'), 0);
loop();

이 실행 순서가 중요한 이유

마이크로태스크가 매크로태스크보다 먼저 실행된다는 사실을 알면 프로미스 결과가 타이머 콜백보다 먼저 나타나는 이유와 순서 관련 오류가 발생하는 이유를 이해할 수 있습니다. 규칙은 간단합니다. 동기 코드, 모든 마이크로태스크 처리, 매크로태스크 하나, 그리고 반복입니다.

console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');

빠른 확인

프로미스 .then과 setTimeout(fn, 0)이 모두 대기 중입니다. 어느 쪽이 먼저 실행될까요?

복습: 마이크로태스크와 프로미스

우선순위 규칙을 배웠습니다.

마이크로태스크는 프로미스와 queueMicrotask에서 생성됩니다.
전체 마이크로태스크 큐는 어떤 매크로태스크보다 먼저 처리됩니다.
async/await의 후속 실행은 마이크로태스크입니다.
끝없이 이어지는 마이크로태스크 연결은 타이머와 렌더링을 고갈시킬 수 있습니다.

자주 묻는 질문

“마이크로태스크와 프로미스” 강의는 무료인가요?

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

“마이크로태스크와 프로미스”에서 뭘 배우나요?

프로미스 콜백이 먼저 실행되는 이유를 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“마이크로태스크와 프로미스” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기