이벤트 루프

이벤트루프

1. Javasript Engine

• Memory Heap
• Call Stack(Last In First Out):

2. Web API(background)
3. Event Queue(First In Last Out)

브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다.
단일 쓰레드는 하나의 작업만을 할 수 있는데, 이를 보완하여 동시성을 지원하는 것이 이벤트 루프이다.

1. 모든 이벤트들이 Call Stack에 순차적으로 쌓여 실행이 된다
2. 이때 비동기 작업들은 실행을 나중으로 미루어 진다
3. Call Stack이 비워지면 대기하던 비동기 작업들이 Event Queue에 순차적으로 진입 후 Call Stack에서 순차적으로 실행 된다
   (타이머 함수보다 프로미스가 먼저 실행).
   Memory Heap: 당분간은 동적으로 생성된 객체, 변수에 대한 메모리 할당이 이루어지는 곳이라고 알고있으면 될 것 같다.

이해를 돕기 위해 이벤트 루프를 시각적으로 구현 해보았다.

참조: https://poiemaweb.com/js-event