Event Loop는 JavaScript의 동작 방식 중 하나로, 비동기적으로 실행되는 코드를 처리하는 방식입니다.

JavaScript는 Single Threaded 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 따라서, Event Loop는 JavaScript에서 비동기적으로 실행되는 코드들을 처리하기 위한 메커니즘입니다.

Event Loop는 Call Stack, Web APIs, Callback Queue로 구성됩니다. Call Stack은 현재 실행 중인 코드의 위치를 추적하고, Web APIs는 비동기적으로 실행되는 코드를 처리합니다. Callback Queue는 Web APIs에서 실행이 완료된 코드들이 저장되어 있는 대기열입니다.

Event Loop는 Call Stack이 비어있을 때마다 Callback Queue에서 다음 실행할 코드를 가져와 Call Stack에 넣어 실행합니다. 이를 통해 JavaScript에서 비동기적으로 실행되는 코드들을 처리하고, 동시에 다른 작업들도 처리할 수 있게 됩니다.

따라서, JavaScript에서 비동기적으로 실행되는 코드를 작성할 때에는, Event Loop의 원리를 이해하고 적절히 활용하는 것이 중요합니다.

[ Call Stack ]

Stack은 LIFO( Last In First Out )규칙으로 push, pop된다.

• JavaScript Engine 이 코드를 한 줄 한 줄 읽으면서 호출된 코드를 Call Stack에 추가하고, LIFO 규칙으로 코드를 실행한다.

• Call Stack에는 코드에 작성된 함수가 호출되어 처리되는 데 Web APIs 함수들이 호출되면 처리되지 않고 대기실로 보내진다. 이렇게 Call Stack은 Web APIs 는 무시하고 계속 다음 작업을 처리해 나간다.

  (Call Stack : Web APIs 같은 거 눈에 안 띄게 해라.. → setTimeout(), EventListener, Promise ...)

[ Event Loop ]

• Call Stack에서 호출된 함수가 처리되면서 Event Loop가 JavaScript 런타임 환경 전체를 순회하면서 다음과 같은 작업들을 처리하고 다닌다.

  Render업데이트 : Render에서는 CRP처리를 하고,

  Queue 확인 : Queue에 쌓여있는 콜벡 함수가 있으면 Call Stack으로 이동시킨다.

  (Task Queue, Microtask Queue)

• Event Loop는 여러가지 Queue에서 Call Stack으로 가지고 오는 역할만 한다고 생각하면 된다.