이벤트 루프가 대체 뭐길래? JS 개발자라면 꼭 알아야 할 개념

🧵 자바스크립트는 싱글 스레드 언어이다 

자바스크립트는 싱글 스레드 (Single Thread) 언어이다.

여기서 스레드란? 프로세스의 실행 단위를 말한다.

즉, 싱글 스레드는 일꾼(Worker)이 한 명 뿐이라는 뜻이다.

 

이게 무슨 의미냐면?

• 한 번에 하나의 작업만 실행할 수 있다.
• 작업이 끝나야 다음 작업을 실행할 수 있다. (기다려야 함)

근데 우리는 웹에서 동시에 여러가지 작업을 하는 것처럼 보인다. 🤔

파일 다운로드도 하고, 웹 서핑도 하고, 동영상도 보면서 다른 작업도 할 수 있다. 이건 어떻게 가능할까?

바로 논블로킹 (Non-blocking) 방식 덕분이다! 

---

⚡ 블로킹(Blocking)과 논블로킹(Non-blocking)

자바스크립트는 싱글 스레드라서, 일을 순서대로 처리한다.

그런데 만약 어떤 작업이 오래 걸린다면?

console.log("A");
setTimeout(() => console.log("B"), 3000); // 3초 뒤 실행
console.log("C");

 

우리는 직관적으로 A -> B -> C 순서로 실행될 거라고 생각할 수도 있다. 하지만 실제 결과는?

A
C
B (3초 뒤 실행)

 

이게 바로 논블로킹 방식 때문이다 😎

 

🔴 블로킹 방식

• 하나의 작업이 끝날 때까지 다음 작업이 대기해야 함
• 오래 걸리는 작업이 있으면 전체 프로그램이 멈춤

🟢 블로킹 방식

• 오래 걸리는 작업을 비켜두고, 다른 작업을 먼저 실행
• 작업이 끝나면 나중에 결과를 받아 처리

자바스크립트가 싱글 스레드인데도 빠르게 동작할 수 있는 이유는 바로 이벤트 루프덕분이다!

---

🔁 이벤트 루프 (Event Loop)

자바스크립트는 오래 걸리는 작업을 만나면 기다리지 않고, 나중에 실행할 수 있도록 따로 관리한다. 이걸 담당하는 게 바로 이벤트 루프다.

자바스크립트가 동작하는 원리를 쉽게 이해하려면 브라우저 내부 구성을 먼저 살펴봐야 한다.

 

브라우저 내부 구성도

 

1️⃣  자바스크립트 엔진 

• Memory Heap (메모리 힙): 객체, 배열, 함수 등의 데이터가 저장되는 공간
• Call Stack (콜 스택): 실행할 코드를 쌓아두는 공간 (FILO: First In Last Out)

2️⃣ Web APIs 

• 브라우저가 제공하는 기능 (ex: setTimeout, fetch, DOM 조작 등)
• 비동기적으로 처리되므로 완료 시점을 예측할 수 없음

3️⃣ Callback Queue (콜백 큐) 

• 나중에 실행될 작업들이 대기하는 공간 (FIFO: First In First Out)
• 콜 스택이 비어있을 때 실행됨

4️⃣ Event Loop (이벤트 루프)  

 

이벤트 루프는 콜 스택과 콜백 큐를 계속 감시하면서 다음 순서의 작업을 실행한다.

 

✅ 이벤트 루프 동작 방식

1. 콜 스택이 비었는지 확인한다. (비어있지 않으면 대기)
2. 콜백 큐에서 가장 오래된 작업을 꺼내 콜 스택으로 보낸다.
3. 해당 작업이 실행되고, 완료되면 콜 스택에서 제거한다.
4. 이 과정을 프로그램이 종료될 때까지 반복한다.

→ 이제 우리가 앞에서 봤던 코드 (setTimeout)이 왜 3초 뒤에 실행되는지 이해할 수 있다!

---

콜백 큐는 한 가지만 있는 게 아니다! 🤯

콜백 큐에는 여러 가지 종류가 있다. 우선순위도 다르다!

 

1️⃣ 마이크로태스크 큐 (Microtask Queue)

• Promise.then, async/await 등의 비동기 코드가 들어감
• 우선순위가 가장 높음 🔥 (가장 먼저 실행)

2️⃣ 애니메이션 프레임 (Animation Frames)

• requestAnimationFrame 같은 화면 업데이트 관련 작업이 들어감 

3️⃣ 태스크 큐 (Task Queue)

• setTimeout, setInterval 등의 비동기 작업이 들어감 
• 마이크로태스크보다 낮은 우선순위

---

 

참조

[JavaScript] 이벤트 루프(Event Loop)에 대해서 파헤쳐 봅시다.