자바스크립트 이벤트 루프, 싱글 스레드의 비밀 풀기 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 자바스크립트의 핵심 메커니즘 중 하나인 이벤트 루프(Event Loop)에 대해 알아보겠습니다. 이 개념은 자바스크립트의 비동기 처리를 이해하는 데 매우 중요한데요. 혹시 "왜 자바스크립트는 싱글 스레드인데도 여러 작업을 동시에 처리할 수 있을까?"라는 의문을 가진 적이 있다면, 바로 이 이벤트 루프가 그 비밀 열쇠랍니다!

---

📌 이벤트 루프란 무엇인가요?

자바스크립트는 싱글 스레드(Single Thread) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있는 구조인데요. 그럼에도 불구하고 비동기적으로 코드를 실행하여 사용자가 끊김 없는 경험을 하게 만듭니다. 이 모든 건 이벤트 루프 덕분이에요.

이벤트 루프는 실행 컨텍스트와 작업 큐(Task Queue)를 관리하여 비동기 작업을 효율적으로 처리하는 메커니즘입니다.

---

🍕 피자 가게에 비유한 이벤트 루프

상상해볼까요? 당신이 피자 가게에서 혼자 일하고 있는 직원이라고 생각해보세요. 싱글 스레드죠! 하지만 당신은 혼자서도 여러 주문을 처리할 수 있습니다:

1. 손님이 주문을 하면, 주문서를 작성해서 대기열(Task Queue)에 넣습니다.
2. 피자를 만들면서 오븐에 넣는 작업을 하죠. 이때 오븐이 작동하는 동안 다른 손님의 주문서를 확인하고 준비합니다.
3. 오븐이 다 구워지면 "띵!" 소리와 함께 알림(Callback)이 옵니다. 이제 완성된 피자를 손님에게 전달하면 됩니다.

이 비유에서:

• 오븐: 비동기 작업(예: API 호출, 타이머)
• 대기열(Task Queue): 비동기 작업의 콜백이 저장되는 공간
• 직원(싱글 스레드): 이벤트 루프가 처리하는 역할

---

🛠️ 이벤트 루프의 동작 원리

이제 이벤트 루프가 실제로 어떻게 동작하는지 살펴볼게요. 😊

1. Call Stack(호출 스택)

자바스크립트 엔진은 Call Stack이라는 공간을 사용해 함수를 실행합니다. 스택 구조로, 마지막에 호출된 함수가 가장 먼저 실행되고 완료되면 스택에서 제거됩니다.

2. Web APIs

브라우저에서 제공하는 비동기 작업(API 호출, 타이머 등)는 Call Stack에서 바로 실행되지 않습니다. 대신 Web APIs가 처리하고, 완료된 후 콜백을 Task Queue로 보냅니다.

3. Task Queue

Task Queue에는 완료된 비동기 작업의 콜백 함수가 대기하고 있습니다.

4. Event Loop

이제 이벤트 루프가 등장합니다. 이벤트 루프는 계속해서 Call Stack이 비어있는지 확인하고, 비어있다면 Task Queue에서 작업을 가져와 실행합니다.

---

📝 코드로 이해하기

아래 예제를 통해 이벤트 루프의 동작을 직접 살펴볼까요?

console.log("1. 시작!"); // Call Stack에 추가됨

setTimeout(() => {
  console.log("3. 비동기 작업 완료!"); // Task Queue에 추가됨
}, 1000);

console.log("2. 진행 중..."); // Call Stack에 추가됨

실행 순서:

1. console.log("1. 시작!")이 실행됩니다.
2. setTimeout은 Web API로 전달되고, 1초 후 콜백이 Task Queue로 이동합니다.
3. console.log("2. 진행 중...")이 실행됩니다.
4. 1초 후, 이벤트 루프가 Task Queue에서 콜백을 가져와 실행합니다.

출력 결과:

1. 시작!
2. 진행 중...
3. 비동기 작업 완료!

---

🔍 마이크로태스크와 매크로태스크

비동기 작업에는 Microtasks와 Macrotasks가 있습니다. 둘의 차이를 간단히 살펴볼게요:

1. Microtasks (예: Promise)

• Task Queue보다 우선 처리됩니다.

• 예제:

  console.log("A");
  Promise.resolve().then(() => console.log("B"));
  console.log("C");

  출력:

  A
  C
  B

2. Macrotasks (예: setTimeout)

• Microtasks가 모두 처리된 후 실행됩니다.

---

😊 마무리하며..

이벤트 루프는 자바스크립트의 비동기 처리에서 핵심적인 역할을 담당하는 메커니즘이에요. 덕분에 자바스크립트는 싱글 스레드임에도 마치 여러 작업을 동시에 처리하는 것처럼 동작할 수 있답니다.

여러분도 이제 이벤트 루프의 동작 원리를 이해했으니, 비동기 코드 작성이 훨씬 쉬워질 거예요! 😊 항상 새로운 것을 배우는 여러분을 응원합니다!