## 이벤트 루프란 무엇인가 자바스크립트는 **싱글 스레드 언어**이기 때문에 기본적으로 한번에 하나의 작업만 수행할 수 있다. 하지만 사용자 이벤트 처리, 네트워크 요청, 타이머, 애니메이션 같은 작업들은 동시에 발생하기도 하고, 이런 작업들이 동시에 처리되어야 더 좋은 사용자 경험을 제공할 수 있다. 이런 이유로 브라우저에는 **이벤트 루프**라는 **비동기 작업 처리 메커니즘**을 제공하고 있다. ## 구성 요소 이벤트 루프는 단독으로 동작하는 것이 아니라 여러 구성 요소와 함께 동작한다. * **콜 스택 (Call Stack)** \ 자바스크립트에서 현재 실행 중인 함수들이 쌓이는 스택이다.\ 함수가 호출되면 스택에 push되고 함수의 실행이 종료되면 스택에서 pop된다. * **Web API**\ Web API는 setTimeout이나 DOM 이벤트 같은 브라우저에서 별도로 제공하는 기능이다.\ 이러한 API들은 자바스크립트의 메인 스레드와는 별개의 스레드에서 실행된다. * **마이크로 태스크 큐 (Microtask Queue) / 태스크 큐 (Task Queue)**\ 태스크 큐와 마이크로 태스크 큐는 콜백 함수들이 대기하는 곳이다. * **마이크로 태스크 큐** : [[Promise]], MutationObserver 등에 전달된 콜백이 쌓인다. * **태스크 큐** : setTimeout이나 이벤트 핸들러 등에 전달된 콜백이 쌓인다. * **우선순위** : 마이크로 태스크 큐의 작업이 태스크 큐의 작업보다 먼저 수행된다.\ [[마이크로태스크 · 태스크 큐]] * **이벤트 루프**\ 이벤트 루프는 아래를 반복하며 태스크들을 적절하게 실행시킨다. 1. 콜 스택이 비어 있는지 확인 2. 마이크로 태스크 큐가 빌 때 까지 마이크로 태스크 큐의 작업들을 실행 3. 태스크 큐의 작업을 하나 실행 ## 이벤트 루프의 동작 흐름 아래 코드를 실행하는 흐름을 그려보면 아래와 같다. ```javascript function callback(source) { console.log(`${source} Callback executed`); } console.log("start"); Promise.resolve().then(() => callback("Microtask (Promise.then)")) setTimeout(() => callback("Macrotask (setTimeout)"), 100); console.log("end"); ``` ![[978e396b-53e1-4908-b2eb-89bb28c111be.gif]] ## 관련 링크 * [https://www.lydiahallie.com/blog/event-loop](https://www.lydiahallie.com/blog/event-loop) * [[마이크로태스크 · 태스크 큐]] * 브라우저 랜더링과 이벤트 루프