이벤트 루프와 비동기 처리
중요도: ⭐⭐⭐⭐⭐
JavaScript 비동기 동작 원리의 핵심으로, 성능 최적화와 디버깅에 필수적입니다.
이벤트 루프와 비동기 처리
자바스크립트의 이벤트 루프는 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘입니다. 이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성됩니다.
이벤트 루프 동작 과정
이벤트 루프는 다음 순서로 작업을 처리합니다:
- Call stack을 확인하고, Call stack이 비어있는 경우 다음 단계로 진행
- Micro task queue의 작업을 Call stack으로 옮김
- Micro task queue가 비어있는 경우, Macro task queue의 작업을 Call stack으로 옮기고 처리
실행 순서 예시
console.log("1. 동기 코드 시작");
// 매크로태스크 (Macrotask)
setTimeout(() => {
console.log("4. setTimeout (매크로태스크)");
}, 0);
// 마이크로태스크 (Microtask)
Promise.resolve().then(() => {
console.log("3. Promise (마이크로태스크)");
});
console.log("2. 동기 코드 끝");
// 실행 순서: 1 → 2 → 3 → 4JavaScript 동작 원리
자바스크립트는 싱글 스레드 기반의 언어이며, V8 엔진을 사용합니다. V8 엔진은 크게 **메모리 힙(Memory heap)**과 콜 스택(Call stack) 두 요소로 구성되어 있습니다.
주요 구성 요소
Memory heap 메모리 할당이 이뤄지는 곳입니다.
Call Stack 코드가 실행될 때 호출 스택이 쌓이는 곳입니다.
Web APIs 콜 스택에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 콜백 큐에 밀어 넣습니다. Web API에는 DOM, Ajax, SetTimeout 등이 존재합니다.
Callback Queue 함수를 저장하는 자료구조로, 선입선출 형식으로 함수를 처리합니다. TaskQueue라고도 불립니다.
Event Loop 이벤트 루프는 콜 스택이 다 비워지면 콜백 큐에 존재하는 함수들을 하나씩 콜 스택에 옮기는 역할을 합니다.
마이크로태스크 vs 매크로태스크
| 분류 | 마이크로태스크 (Microtask) | 매크로태스크 (Macrotask) |
|---|---|---|
| 우선순위 | 높음 | 낮음 |
| 처리 시점 | 현재 실행 스택이 비워진 직후 | 마이크로태스크 큐가 비워진 후 |
| 예시 | Promise, queueMicrotask, MutationObserver | setTimeout, setInterval, DOM 이벤트 |
복잡한 실행 순서 예시
console.log("0. 전역 시작");
async function complexExample() {
console.log("1. 함수 시작");
// Promise 체인
Promise.resolve()
.then(() => console.log("4. 첫 번째 마이크로태스크"))
.then(() => console.log("6. 두 번째 마이크로태스크"));
// setTimeout (매크로태스크)
setTimeout(() => console.log("8. setTimeout"), 0);
// 즉시 실행되는 마이크로태스크
queueMicrotask(() => console.log("7. queueMicrotask"));
console.log("2. 함수 끝");
}
complexExample();
console.log("3. 전역 끝");
// 실행 순서: 0 → 1 → 2 → 3 → 4 → 5 (await 이후) → 6 → 7 → 8이벤트 루프 처리 순서
- Call Stack 실행: 동기 코드를 모두 실행
- Microtask Queue 처리: Promise, queueMicrotask 등
- UI 렌더링 (브라우저 환경)
- Macrotask Queue 처리: setTimeout, setInterval, DOM 이벤트 등
면접 팁
이벤트 루프에 대해 질문받을 때는 단순히 동작 과정만 나열하지 말고, 실제 코드 예시와 함께 마이크로태스크와 매크로태스크의 실행 순서를 설명할 수 있어야 합니다. 또한 실무에서 어떻게 비동기 코드를 최적화했는지, 콜백 지옥을 어떻게 해결했는지 등의 경험도 함께 언급하면 좋습니다.
Last updated on