자바스크립트는 어떻게 멈추지 않고 일할까? 이벤트 루프와 비동기 프로그래밍의 비밀"
1. 서론: 자바스크립트의 역설, "싱글 스레드인데 빠르다?" 자바스크립트는 한 번에 하나의 일만 처리할 수 있는 싱글 스레드(Single Thread) 언어입니다. 하지만 우리가 사용하는 웹사이트는 네트워크 요청을 보내면서도 애니메이션이 돌아가고, 사용자 클릭에 즉각 반응합니다. 어떻게 한 개의 스레드로 이 모든 '동시성'을 구현하는 걸까요? 그 비밀은 자바스크립트 엔진 자체가 아닌, 브라우저가 제공하는 이벤트 루프(Event Loop) 아키텍처에 있습니다. 2. 자바스크립트 런타임의 구조 자바스크립트가 실행되는 환경(브라우저나 Node.js)은 여러 구성 요소가 협력하는 구조입니다. Call Stack: 작성한 코드가 순차적으로 쌓이고 실행되는 곳입니다. Web APIs: 브라우저에서 제공하는 별도의 스레드입니다. setTimeout , fetch , DOM 이벤트 등이 여기서 처리됩니다. Task Queue (Callback Queue): Web API에서 처리가 끝난 콜백 함수들이 대기하는 공간입니다. Event Loop: Call Stack이 비어있는지 끊임없이 감시하며, 비어있을 때 Queue에 대기 중인 함수를 Stack으로 옮겨줍니다. 3. 태스크의 우선순위: 매크로 vs 마이크로 모든 비동기 작업이 똑같은 대기 줄에 서는 것은 아닙니다. 여기서 자바스크립트의 실행 순서가 결정됩니다. Microtask Queue (우선순위 높음): Promise.then , MutationObserver , process.nextTick 등이 들어갑니다. Macrotask Queue (우선순위 낮음): setTimeout , setInterval , setImmediate 등이 들어갑니다. 중요한 점: 이벤트 루프는 매크로 태스크를 하나 처리하기 전에, 반드시 마이크로 태스크 큐에 쌓인 모든 작업을 먼저 비웁니다. 이 순서를 모르면 코드의 실행 결과를 예측할 수 없습니다. 4. 실무 경험 사례: ...