자바스크립트는 일꾼(Thread)이 하나뿐인데 어떻게 동시에 여러 일을 처리할까요? 브라우저의 Web APIs, Task Queue, Microtask Queue를 순회하는 이벤트 루프(Event Loop) 덕분입니다.
console.log("1. 동기 코드 시작"); // setTimeout은 Task Queue (Macrotask)로 들어감 setTimeout(() => { console.log("4. setTimeout 콜백 실행 (제일 늦음)"); }, 0); // Promise.then은 Microtask Queue로 들어감 (우선순위가 가장 높음!) Promise.resolve().then(() => { console.log("3. Promise 콜백 실행 (Microtask)"); }); console.log("2. 동기 코드 끝"); /* [실행 순서 결과] 1. 동기 코드 시작 (Call Stack에서 즉시 실행) 2. 동기 코드 끝 (Call Stack에서 즉시 실행) 3. Promise 콜백 실행 (Call Stack이 비워지면 Microtask부터 처리) 4. setTimeout 콜백 실행 (Microtask가 다 비워진 후 처리) */