[JS] Event Loop에 대해서

---

소개

JavaScript는 싱글 스레드 기반 언어로, 한 번에 하나의 작업만을 처리할 수 있는 특성을 가지고 있습니다. 그러나 JavaScript는 비동기 프로그래밍을 지원하며, 이는 Event Loop를 통해 가능해집니다.

동기 vs. 비동기

• 동기(Synchronous) 프로그래밍: 작업이 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업이 시작됩니다. 블로킹이 발생할 수 있어 전체 프로그램이 일시 중지될 수 있습니다.

• 비동기(Asynchronous) 프로그래밍: 작업이 독립적으로 실행되며, 결과를 기다리지 않고 다음 작업을 수행합니다. 이벤트가 발생하거나 콜백 함수를 통해 비동기적으로 동작합니다.

Event Loop의 역할

JavaScript의 Event Loop는 Call Stack, Callback Queue, 및 Web APIs로 구성되어 있습니다.

1. Call Stack(호출 스택): 함수의 호출과 반환을 기록하는 스택 구조입니다. 함수가 호출되면 스택에 쌓이고, 반환되면 스택에서 제거됩니다.

2. Callback Queue(콜백 큐): 비동기 작업의 완료 후 실행될 콜백 함수들이 대기하는 곳입니다.

3. Web APIs: 브라우저나 Node.js와 같은 환경에서 제공하는 API들로, 비동기 작업을 처리합니다.

Event Loop는 다음과 같은 프로세스를 반복합니다.

1. Call Stack이 비어있는지 확인합니다.
2. 비어있다면, Callback Queue의 첫 번째 콜백을 Call Stack으로 이동시킵니다.
3. 해당 콜백이 실행되면서 필요에 따라 새로운 비동기 작업이 발생할 수 있습니다.
4. 이러한 비동기 작업은 Web APIs에 의해 처리되고, 완료되면 해당 콜백은 Callback Queue로 이동합니다.
5. 다시 Call Stack이 비어있으면, Callback Queue의 다음 콜백을 Call Stack으로 이동시킵니다.

예시

다음은 간단한 예시 코드입니다.

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 2000);

console.log("End");

위 코드에서 setTimeout 함수는 비동기적으로 실행되며, 2초 후에 Callback Queue로 이동합니다. Event Loop는 Call Stack이 비어있을 때 해당 콜백을 실행하게 됩니다. 따라서 출력 결과는 다음과 같습니다.

Start
End
Timeout

이를 통해 Event Loop가 비동기 작업을 어떻게 처리하는지 간단히 이해할 수 있습니다.

JavaScript에서의 Event Loop는 개발자가 비동기 코드를 효과적으로 다룰 수 있도록 도와주며, 웹 애플리케이션의 빠른 응답성을 지원합니다.