동기 코드·Promise·timer의 실행 순서를 예측합니다.
JavaScript 한 실행 맥락은 call stack의 동기 작업을 끝낸 뒤 microtask queue를 비우고 다음 task를 처리합니다. Promise 콜백은 microtask, setTimeout 콜백은 task이므로 0ms라도 순서가 다릅니다.
긴 동기 계산은 렌더링과 입력을 막으므로 Worker로 옮기거나 작은 작업으로 나눕니다.
microtask를 끝없이 예약해도 다음 렌더링과 task가 굶을 수 있습니다.
비동기 오류와 취소를 호출 경계까지 전달하고 UI의 오래된 요청 결과를 무시하도록 request id나 AbortController를 사용합니다.
await가 브라우저 전체를 멈추는 것이 아니라 현재 async 함수의 나머지를 예약한다는 점을 구분하세요.
직접 바꿔보세요두 번째 Promise와 timer를 추가하고 실행 순서를 먼저 적은 뒤 확인하세요.