비동기 공부하다가 이벤트 루프라는 데서 완전 막혔어요. setTimeout에 0을 줬으면 바로 실행될 줄 알았는데 아니더라고요.
console.log('1 시작');
setTimeout(() => console.log('2 타임아웃'), 0);
Promise.resolve().then(() => console.log('3 프로미스'));
console.log('4 끝');
저는 당연히 1, 2, 3, 4 순서로 나올 줄 알았는데 실제로 돌려보니까
1 시작
4 끝
3 프로미스
2 타임아웃
이렇게 나와요. 딜레이를 0으로 줬는데도 setTimeout이 제일 마지막에 실행되는 게 이해가 안 돼요. 그리고 Promise.then 이 setTimeout보다 먼저 나오는 것도 신기하고요. 둘 다 비동기인데 왜 순서가 갈리는 거죠?
검색해보니까 마이크로태스크(microtask)랑 매크로태스크(macrotask)라는 게 있고 큐가 따로 논다는 것 같은데, 이게 정확히 어떻게 굴러가는 건지 그림이 안 그려져요. 콜스택이 비면 뭘 먼저 꺼내오는 건가요. Promise가 태스크 큐랑 다른 큐에 들어간다는 건지도 헷갈려요.
실행 순서를 예측할 수 있게 이벤트 루프가 도는 과정을 단계별로 좀 설명해주실 수 있을까요. 실무에서 이걸 알아야 하는 상황도 있는 건지 궁금합니다.