이벤트 루프: 호출 스택, 큐, 마이크로태스크
JavaScript의 실행 과정을 시각화합니다. 호출 스택, 작업 큐, Promise에서 생성되는 마이크로태스크와 비동기 작업 중에도 UI가 차단되지 않는 이유를 살펴봅니다.
이벤트 루프: 호출 스택, 큐, 마이크로태스크은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
JavaScript는 단일 스레드로 실행됩니다
JavaScript는 단일 스레드에서 실행되므로 한 번에 하나의 코드만 실행할 수 있습니다. 그런데도 네트워크 요청, 타이머, UI 이벤트 같은 수천 개의 비동기 작업을 차단 없이 처리합니다. 어떻게 가능할까요? 바로 이벤트 루프 덕분입니다.
호출 스택
호출 스택은 JavaScript가 현재 실행 중인 함수를 추적하는 곳입니다. 함수를 호출하면 프레임이 스택에 추가되고, 함수가 반환되면 프레임이 제거됩니다. 스택이 가득 차면(무한 재귀 등) 스택 오버플로가 발생합니다.
function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();
// Call stack during c():
// c ← top
// b
// a
// (anonymous)Web API — 작업 위임
JavaScript가 비동기 함수(setTimeout, fetch, addEventListener)를 호출하면 작업이 브라우저의 Web API로 전달됩니다. JS 엔진은 기다리지 않고 다음 줄을 계속 실행합니다.
console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2작업 큐(매크로태스크 큐)
웹 API 작업이 완료되면(타이머가 실행되거나 fetch가 해결되면) 콜백이 작업 큐(매크로태스크 큐)에 추가됩니다. 이벤트 루프는 호출 스택이 비어 있을 때만 콜백을 호출 스택으로 이동합니다.
마이크로태스크 큐
프라미스는 마이크로태스크 큐라는 우선순위가 높은 큐를 사용합니다. 각 작업이 완료된 후 다음 작업을 가져오기 전에 대기 중인 모든 마이크로태스크를 처리합니다. 마이크로태스크는 항상 다음 매크로태스크보다 먼저 실행됩니다.
console.log('1');
setTimeout(() => console.log('timeout'), 0); // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout실행 중인 이벤트 루프
이벤트 루프의 알고리즘은 다음과 같습니다. 1) 현재 작업이 완전히 끝날 때까지 호출 스택에서 실행합니다. 2) 마이크로태스크 큐 전체를 처리합니다. 3) 필요에 따라 렌더링합니다. 4) 다음 매크로태스크를 가져온 후 반복합니다.
queueMicrotask()
queueMicrotask(fn)은 프라미스를 생성하지 않고 콜백을 마이크로태스크 큐에 예약합니다. 직접 사용할 일은 드물지만, 라이브러리가 예약을 구현하는 방식을 이해하는 데 유용합니다.
queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask긴 작업이 사용자 인터페이스를 멈추게 하는 이유
동기 작업이 너무 오래 실행되면(대량의 데이터를 빠르게 반복 처리하는 경우 등) 이벤트 루프가 사용자 인터페이스 이벤트나 렌더링을 처리할 수 없습니다. 이로 인해 페이지가 멈춥니다. 긴 작업은 setTimeout을 사용해 여러 덩어리로 나누어 이벤트 루프에 제어권을 돌려주세요.
// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }
// Better — yield periodically:
async function processInChunks(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
}
}웹 워커 — 진정한 병렬 처리
CPU를 많이 사용하는 작업에는 자체 이벤트 루프를 가진 별도의 스레드인 웹 워커를 사용하세요. 워커는 postMessage를 통해 주 스레드와 통신합니다. 공유 메모리가 없으므로 경쟁 조건도 발생하지 않습니다.
requestAnimationFrame
requestAnimationFrame(callback)은 다음 브라우저 화면 다시 그리기 전에 콜백을 예약합니다. JavaScript로 애니메이션을 구현할 때 사용하세요. 화면 새로 고침 속도(일반적으로 60fps)에 맞춰 실행됩니다.
function animate(timestamp) {
// update positions based on timestamp
element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);이벤트 루프 시각화
latentflip.com/loupe의 대화형 데모를 사용하면 코드를 붙여 넣고 호출 스택, 웹 API, 작업 큐, 이벤트 루프가 느린 속도로 작동하는 모습을 확인할 수 있습니다. 작동 원리를 익히는 데 매우 유용합니다.
빠른 확인
프라미스가 해결된 후 해당 프라미스의 .then() 콜백은 어떤 큐에서 실행되나요?
복습: 이벤트 루프
JavaScript는 단일 스레드로 실행됩니다. 비동기 작업은 웹 API로 이동합니다. 콜백은 작업 큐(setTimeout, fetch 콜백) 또는 마이크로태스크 큐(프라미스)를 통해 돌아옵니다. 이벤트 루프는 각 작업이 끝난 후 다음 렌더링이나 매크로태스크보다 먼저 마이크로태스크를 모두 처리합니다. 긴 동기 코드는 모든 작업을 차단합니다.
자주 묻는 질문
“이벤트 루프: 호출 스택, 큐, 마이크로태스크” 강의는 무료인가요?
네 — “이벤트 루프: 호출 스택, 큐, 마이크로태스크” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“이벤트 루프: 호출 스택, 큐, 마이크로태스크”에서 뭘 배우나요?
JavaScript의 실행 과정을 시각화합니다. 호출 스택, 작업 큐, Promise에서 생성되는 마이크로태스크와 비동기 작업 중에도 UI가 차단되지 않는 이유를 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“이벤트 루프: 호출 스택, 큐, 마이크로태스크” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 이벤트 루프: 호출 스택, 큐, 마이크로태스크
- 콜백과 콜백 지옥
- Promise: then, catch, finally, Promise.all
- async/await와 오류 처리