Web APIs: 웹 브라우저가 직접 관리하는 별도의 영역
비동기 처리의 핵심 구성 요소
1. 자바스크립트 엔진 (런타임 / Call Stack)
- 자바스크립트 코드를 한 줄씩 실행하는 공간
- 동기 코드는 여기서 처리됨
console.log("A"); // 실행됨 → Stack에서 빠짐
2. Web APIs (브라우저가 제공)
- setTimeout, fetch, DOM 이벤트 리스너 등을 처리
- 이 작업들은 자바스크립트 엔진이 아니라 브라우저가 처리함
setTimeout(() => {
console.log("비동기 실행");
}, 1000);- setTimeout 함수는 엔진이 아니라 Web API 영역으로 보내짐
- 1초가 지난 뒤, 콜백은 Callback Queue로 이동
3. Callback Queue (Task Queue)
- Web API 작업이 끝나고, 실행할 준비가 된 콜백 함수들이 대기하는 곳
4. Event Loop (이벤트 루프)
- Call Stack이 비어 있으면 → Callback Queue에서 콜백을 가져와 Stack에 올려서 실행시킴
console.log("A");
setTimeout(() => {
console.log("B");
}, 1000);
console.log("C");
// console.log("A") → 바로 실행 (Call Stack → 출력)
// setTimeout(...) → Web API에게 넘김 → 1초 기다림
// console.log("C") → 바로 실행
// 1초 후 → 콜백 함수가 Callback Queue로 이동
// Call Stack이 비었으므로, Event Loop가 콜백을 실행함 → "B" 출력