이벤트 루프는 JavaScript의 비동기 실행을 관리하는 핵심 메커니즘입니다. 콜 스택, 마이크로태스크 큐, 태스크 큐의 상호작용을 이해하는 것이 중요합니다.
JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 작업을 효율적으로 처리합니다. 콜 스택이 비면 이벤트 루프가 마이크로태스크 큐를 먼저 확인하고, 그 다음 태스크 큐에서 작업을 꺼내 실행합니다. Promise.then과 setTimeout의 실행 순서가 다른 이유가 바로 이것입니다.
시나리오를 선택하고 단계별로 진행하여 콜 스택, 마이크로태스크 큐, 태스크 큐의 변화를 관찰하세요.
console.log("1");
setTimeout(() => {
console.log("2");
}, 0);
Promise.resolve().then(() => {
console.log("3");
});
console.log("4");실제 코드로 동작 원리를 확인하세요.
// 콜 스택은 현재 실행 중인 함수를 추적합니다.
// LIFO(Last In, First Out) 구조입니다.
function first() {
console.log("first 시작");
second(); // second()가 콜 스택에 push
console.log("first 끝"); // second() 완료 후 실행
}
function second() {
console.log("second 시작");
third(); // third()가 콜 스택에 push
console.log("second 끝");
}
function third() {
console.log("third"); // 가장 위에서 실행 후 pop
}
first();
// 출력: first 시작 → second 시작 → third
// → second 끝 → first 끝requestAnimationFrame 콜백이 실행됩니다.Promise.then, queueMicrotask, MutationObserver 등에 의해 생성되며, 현재 실행 중인 태스크가 끝나면 즉시, 큐가 완전히 빌 때까지 모두 실행됩니다.setTimeout, setInterval, I/O 콜백 등에 의해 생성되며, 이벤트 루프 한 바퀴에 하나씩만 실행됩니다. 따라서 마이크로태스크는 항상 다음 매크로태스크보다 먼저 처리됩니다. 마이크로태스크 내에서 새 마이크로태스크를 생성하면 그것도 같은 사이클에 처리되므로 무한 루프에 주의해야 합니다.console.log, setTimeout, Promise가 혼합된 코드의 실행 순서:setTimeout은 콜백을 태스크 큐에 등록만 합니다. 3. Promise.then은 콜백을 마이크로태스크 큐에 등록합니다. 4. 동기 코드가 모두 끝나면 마이크로태스크 큐를 먼저 비웁니다. 5. 마지막으로 태스크 큐의 콜백이 실행됩니다.