이벤트 루프 (Event loop)가 뭔가요?

[rkskekzzz]

• [ ] Task Queue와 Microtask Queue의 차이가 뭔가요?

[rkskekzzz]

1. 이벤트 루프 (Event loop)가 뭔가요?

   이벤트 루프는 javascript engine, runtime, callback queue와 큰 연관이 있습니다. 우선 javascript는 single thread 프로그래밍 언어이기 때문에 단 하나의 call stack을 가지게 됩니다. 그래서 javascript runtime이 비동기 요청에 대한 작업을 수행하게 됩니다. 이때, 비동기 적으로 수행된 callback function을 Callback Queue에 보관하게 됩니다. 여기서 Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣습니다. 이러한 반복적인 행동을 틱(tick) 이라 부릅니다. Callback Queue는 내부적으로 크게 Task Queue와 Microtask Queue로 나누어져 있습니다

2. Task Queue와 Microtask Queue의 차이가 뭔가요?

   Callback Stack 에 추가되는 우선순위의 차이가 있습니다. 마이크로태스크 큐의 콜백함수가 우선순위를 가지기 때문에 마이크로태스크 큐의 콜백함수를 전부 실행하고 나서 태스크 큐의 콜백함수들을 실행합니다. 마이크로태스크 큐에는 Promise, Mutation Observer의 콜백함수들이 담기게 되고, 태스크 큐에는 setTimeout, requestAnimationFrame의 콜백함수들이 담기게 됩니다.