← 개발 기록

1. 동기 코드 실행: JavaScript는 먼저 모든 동기 코드를 실행합니다. 따라서 '시작'과 '끝'이 먼저 콘솔에 출력됩니다.
2. 비동기 작업 처리:
   • setTimeout은 매크로태스크(macrotask)큐에 작업을 추가합니다.
   • Promise는 마이크로태스크(microtask)큐에 작업을 추가합니다.
3. 이벤트 루프 실행 순서:
   • 이벤트 루프는 현재 실행 중인 스크립트가 완료된 후 먼저 마이크로태스크 큐의 모든 작업을 처리합니다.
   • 그 다음 매크로태스크 큐에서 하나의 작업을 가져와 실행합니다.
4. 실행 결과:
   • 모든 동기 코드가 실행된 후, 이벤트 루프는 마이크로태스크 큐를 확인하고 Promise의 콜백을 실행합니다.
   • 그 다음 매크로태스크 큐를 확인하고 setTimeout의 콜백을 실행합니다. 따라서, Promise의 콜백이 setTimeout의 콜백보다 먼저 실행됩니다. 이는 JavaScript 엔진이 마이크로태스크를 우선적으로 처리하기 때문입니다. 만약 두 콜백 모두에 console.log('1')이 있다면, Promise의 1이 먼저 출력되고, 그 다음 setTimeout의 1이 출력될 것입니다. 이 동작을 이해하는 것은 복잡한 비동기 코드를 작성하고 디버깅할 때 매우 중요합니다. 특히 Node.js 환경에서 I/O 작업을 다루거나, 브라우저에서 DOM 업데이트와 같은 작업을 할 때 이런 지식이 유용하게 활용됩니다.