이벤트 루프는 JavaScript의 핵심 부분이며 비동기 작업을 처리하는 방식을 결정합니다. 이벤트 루프는 주요한 구성 요소로써 다음과 같은 부분으로 이루어져 있습니다.

1. Call Stack (호출 스택)

자바스크립트의 실행 컨텍스트가 담기는 곳으로, 함수가 호출될 때마다 관련 정보가 스택에 쌓이고, 함수가 종료될 때 스택에서 제거됩니다. 이 과정은 LIFO(Last In, First Out) 구조로 이루어집니다.

2. Callback Queue (콜백 큐)

비동기적으로 실행될 콜백 함수들이 대기하는 곳입니다. 콜백 함수는 이벤트 핸들러, 타이머 등의 비동기 작업이 완료되면 콜백 큐로 들어가게 됩니다.

3. Event Loop (이벤트 루프)

이벤트 루프는 호출 스택과 콜백 큐를 주시하면서, 호출 스택이 비워질 때마다 콜백 큐의 콜백 함수를 호출하여 실행합니다.

4. Web APIs

웹 브라우저에서 제공하는 API들로, setTimeout, fetch, addEventListener 등이 있습니다. 이러한 함수들은 비동기적으로 동작하고 작업이 완료되면 해당 콜백 함수가 콜백 큐에 등록됩니다.

이러한 구성 요소들은 함께 작용하여 JavaScript의 비동기적 동작을 가능하게 합니다. 이해하고 활용하면 비동기 프로그래밍에 대한 이슈를 효과적으로 다룰 수 있습니다.

더 자세한 내용은 아래 참고 자료를 참고하시기 바랍니다.

참고 자료:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
• https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/