웹 브라우저 이벤트 루프 개념 간단 정리

1. 자바스크립트 엔진 이해하기
   자바스크립트 엔진인 V8은 Memory Heap과 Call Stack으로 이루어져 있다.
   

• Memory Heap = 메모리 할당이 일어나는 곳
• Call Stack = 실행될 코드의 한 줄 단위로 할당되어 동작
  (JS는 인터프리터 언어이기 때문에 한번에 컴파일해서 동작하는 것이 아니라 한줄마다 해석해서 동작하기 때문에 Call Stack 에 코드가 한줄씩 담겨서 실행이 된다.)
• Web APIs = 비동기 처리를 담당한다.
• Callback Queue = 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당된다.
• Event Loop = Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.

Callback Queue를 더 자세하게 보면 3개로 나뉘는데
event loop가 Call stack에 옮기는 우선 순위는 Microtask Queue > Animation > Task Queue 순서이다. 그래서 promise(micretask)가 setTimeOut(task)보다 늦게 callback queue에 들어갔더라고 해도 event loop는 call stack에 promise를 먼저 넣게 된다.

⚠️ 동작 움직임을 더 자세하게 보고 싶으면 아래 유튜브를 참고하면 좋을 것 같다..
https://www.youtube.com/watch?v=QFHyPInNhbo
https://www.youtube.com/watch?v=S1bVARd2OSE