이벤트 루프
자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 매커니즘
JS는 기본적으로 한 번에 1개의 작업만 처리함.
하지만 이벤트 루프가 콜 스택과 태스크 큐를 관리하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와줌
콜 스택
현재 실행 중인 코드들이 쌓이는 곳
태스크 큐
비동기 작업이 완료되면 그 결과를 대기시키는 곳
ex)
js에서 setTimeout(callback,0)을 호출하면, 콜백함수는 바로 실행되지 않고, 웹 API에 의해 타이머가 설정되고, 그 타이머가 0밀리초 이후 만료되면 콜백 함수가 태스크 큐로 추가. 이후에 콜 스백이 비어있으면 이벤트 루프가 태스크 큐에 대기중인 callback을 꺼내서 실행
따라서 setTimeout(callback,0)을 호출해도 현재 실행 중인 모든 동기 작업들이 완료된 후에야 콜백이 실행 됨.
그래서 setTimeout(callback,0)을 사용하면 코드의 실행을 다음 이벤트 루프 사이클로 미뤄짐
그래서 이벤트 루프는 js의 비동기 작업을 처리하는데 매우 중요한 역할
덕분에 UI업데이트, 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적으로 처리할 수 있음
태스크 큐의 종류
매크로태스크 큐
setTimeout, setInterval 같은 일반적인 비동기 작업들이 대기하는 큐.
매크로태스크 큐의 작업은 이벤트 루프가 콜 스택, 마이크로태스크 큐의 작업을 모~두 처리 후 하나씩 처리
마이크로태스크 큐
Promise.then() 과 같이 중요도가 높은 작업들이 대기하는 큐
매크로태스크 큐보다 우선순위가 높음
이벤트 루프는 콜 스택이 비어있을 때 매크로태스크 큐보다 마이크로태스크 큐에 있는 모든 작업을 먼저 처리함
