💭 이벤트 루프?
이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 메커니즘이다.
이벤트 루프가 콜 스택과 태스크 큐를 매개하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와준다.
🤔 콜 스택? 태스크 큐?
콜 스택은 현재 실행 중인 함수들이 쌓이는 곳
태스크 큐는 비동기 작업이 완료될 때 그 결과를 대기시키는 곳
예를 들어 setTimeout(callback, 0)을 호출하면 웹 API에 의해 타이머가 설정되고, 그 타이머가 0밀리초 후에 만료되면 콜백 함수가 태스크 큐에 추가된다. 그 후 콜 스택이 비어 있는 시점에 이벤트 루프가 태스크 큐에서 대기 중인 콜백 함수를 꺼내서 실행한다.
따라서 setTImeout(callback, 0)을 호출해도 현재 실행 중인 모든 동기 작업들이 완료된 후에야 콜백이 실행된다.
➡️ 따라서 이것을 사용하면 코드의 실행이 다음 이벤트 루프 사이클로 미뤄진다.
♻️ 태스크 큐는 매크로태스크 큐와 마이크로태스크 큐로 나눠진다.
매크로태스크 큐는 setTimeout(), setInterval()과 같은 일반적인 비동기 작업들이 대기하는 큐이다. 매크로태스크 큐의 작업은 이벤트 루프가 콜 스택과 마이크로태스크 큐의 작업을 모두 처리한 후, 하나씩 처리한다.
마이크로태스크 큐는 Promise.then()과 같이 중요도가 높은 작업들이 대기하는 큐이다. 우선순위가 매크로태스크 큐보다 높다. 이벤트 루프는 콜 스택이 비어있는 시점에 매크로태스크를 실행하기 이전에 마이크로태스크 큐에 있는 모든 작업들을 먼저 처리한다.
