JavaScript Academy · 강의

매크로태스크와 작업 큐

타이머와 입출력이 예약되는 방식을 이해합니다.

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

매크로태스크란 무엇인가요

매크로태스크(작업이라고도 합니다)는 현재 동기 코드가 완료된 후 나중에 실행되도록 예약된 작업 단위입니다. setTimeout 콜백이 대표적인 예입니다.

매크로태스크는 호출 스택이 비워질 때까지 작업 대기열에서 기다립니다.

setTimeout은 작업을 지연합니다

setTimeout은 나중에 실행할 콜백을 등록합니다. 지연 시간이 0이어도 현재 실행 중인 모든 동기 코드가 끝난 후에 실행됩니다.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

작업 대기열

타이머가 만료되면 해당 콜백이 작업 대기열에 들어갑니다. 이벤트 루프는 호출 스택이 비어 있을 때만 이 대기열에서 작업 하나를 가져와 끝까지 실행한 다음 다시 확인합니다.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

작업은 대기열에 들어온 순서대로 실행됩니다

같은 지연 시간을 가진 작업은 예약된 순서대로 실행됩니다. 작업 대기열은 FIFO입니다. 먼저 들어온 것이 먼저 나옵니다.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

지연 시간은 정확한 시간이 아니라 최솟값입니다

전달한 지연 시간은 콜백이 실행 가능한 상태가 되기 전까지의 최소 시간입니다. 실제 실행은 스택이 비워지고 앞선 작업이 완료된 뒤에만 이루어지므로 더 늦어질 수 있습니다.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

지연 시간에 따른 정렬

지연 시간이 다르면 순서도 달라집니다. 짧은 지연 시간이 더 빨리 실행 가능한 상태가 되므로 일반적으로 예약 순서와 관계없이 긴 지연 시간보다 먼저 실행됩니다.

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

한 번의 반복마다 작업 하나

이벤트 루프는 한 번의 순환마다 정확히 하나의 매크로태스크를 실행한 다음, 다음 순환 전에 다른 작업을 수행합니다. 이를 통해 작업 사이에도 시스템이 계속 응답할 수 있습니다.

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

중첩된 타이머는 나중에 대기열에 들어갑니다

작업 안에서 예약된 타이머는 이미 대기 중인 작업의 뒤에 대기열에 들어가므로 이후의 이벤트 루프 순환에서 실행됩니다.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval도 매크로태스크입니다

setInterval은 반복되는 매크로태스크를 예약합니다. 여기서는 몇 차례만 반복한 뒤 clearInterval로 중지하여 출력량을 제한합니다.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

동기 실행이 항상 우선합니다

지연 시간이 아무리 짧아도 모든 매크로태스크는 현재 실행에서 동기 코드가 모두 끝날 때까지 기다립니다. 먼저 스택이 비워져야 합니다.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

매크로태스크가 중요한 이유

매크로태스크를 사용하면 실행을 차단하지 않고 작업을 지연할 수 있습니다. 무거운 작업을 시간 단위의 여러 부분으로 나누면 앱이 계속 응답할 수 있습니다. 하지만 매크로태스크가 가장 높은 우선순위를 갖는 것은 아닙니다. 다음 매크로태스크가 실행되기 전에 마이크로태스크(Promise)가 먼저 실행됩니다. 다음에서 살펴보겠습니다.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

빠른 확인

setTimeout(cb, 0) 콜백은 언제 실행될까요?

복습: 매크로태스크

지연된 작업이 예약되는 방식을 배웠습니다.

매크로태스크(setTimeout, setInterval)는 작업 대기열에서 기다립니다.
대기열은 FIFO이며, 이벤트 루프는 한 번의 순환마다 작업 하나를 실행합니다.
지연 시간은 최솟값이고 동기 코드는 항상 먼저 실행됩니다.
마이크로태스크의 우선순위가 더 높으며, 다음에서 살펴보겠습니다.

자주 묻는 질문

“매크로태스크와 작업 큐” 강의는 무료인가요?

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

“매크로태스크와 작업 큐”에서 뭘 배우나요?

타이머와 입출력이 예약되는 방식을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“매크로태스크와 작업 큐” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기