1. 싱글 스레드 자바스크립트

자바스크립트가 싱글 스레드라는 것은 자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 이루어진다는 것을 의미한다. 하나의 작업이 끝나기 전까지는 뒤이은 작업이 실행되지 않는다는 것이다.

이러한 특징은 자바스크립트 개발자에게 동시성을 고민할 필요가 없다는 아주 큰 장점이 되지만, 반대로 때에 따라서 웹페이지에서는 단점이 될 수 있다. 하나의 작업이 끝나기 전까지는 다른 작업이 실행되지 않으므로 어떠한 작업이 오래 걸린다면 사용자에게 마치 웹페이지가 멈춘 것 같은 느낌을 줄 수 있다.

결론적으로 Run-to-Compleiton,
즉 자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다.

2. 이벤트 루프란?

호출 스택(call stack)과 이벤트 루프

호출 스택은 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이다. 이 호출 스택이 비어 있는지 여부를 확인하는 것이 바로 이벤트 루프다.

이벤트 루프의 역할은 호출 스택에 실행 중인 코드가 있는지, 그리고 태스크 큐에 대기하는 함수가 있는지 반복해서 확인하는 역할을 한다. 호출 스택이 비었다면 태스크 큐에 대기 중인 작업이 있는지 확인하고, 이 작업을 실행 가능한 오래된 것부터 순차적으로 꺼내와서 실행하게 된다. 이 작업 또한 마찬가지로 태스크 큐가 빌 때까지 이루어진다.

자바스크립트 코드 실행은 싱글 스레드에서 이루어지지만 외부 Web API등은 모두 자바스크립트 코드 외부에서 실행되고 콜백이 태스크 큐로 들어가는 것이다. 이벤트 루프는 호출 스택이 비고, 콜백이 실행 가능한 떄가 오면 이것을 꺼내서 수행하는 역할을 하는 것이다.

3. 태스크 큐와 마이크로 태스크 큐

태스크 큐에도 마이크로태스크 큐(Microtask Queue)와 일반 태스크 큐(Macrotask Queue) 두 가지 종류가 있다.

마이크로 태스크 큐는 기존 태스크 큐보다 우선권을 갖는다.
마이크로 태스크 큐가 빌 때까지는 기존 태스크 큐의 실행은 뒤로 미루어진다.

태스크 큐: setTimeout, setInterval, setImmediate
마이크로 태스크 큐: process.nextTick, Promises, queueMicroTask

실행 순서 예제

console.log("Start"); // 1

setTimeout(() => {
  console.log("setTimeout");
}, 0); // 4 (Macrotask)

Promise.resolve().then(() => {
  console.log("Promise");
}); // 3 (Microtask)

console.log("End"); // 2

🔥 실행 과정

1️⃣ console.log("Start") 실행 → 출력: "Start"
2️⃣ setTimeout()은 Web API에서 처리 후 일반 태스크 큐(Macrotask Queue)에 등록
3️⃣ Promise.then()은 마이크로태스크 큐(Microtask Queue)에 등록
4️⃣ console.log("End") 실행 → 출력: "End"

5️⃣ 마이크로태스크 큐 실행: Promise.then() 실행 → 출력: "Promise"
6️⃣ 일반 태스크 큐 실행: setTimeout() 실행 → 출력: "setTimeout"

🌟 출력 순서: Start > End > Promise >setTimeout

즉, 마이크로 태스크 큐는 항상 일반 태스크 큐보다 먼저 실행된다.

4. 정리

📌 호출 스택(Call Stack)

• 현재 실행 중인 함수가 쌓이는 공간
• 싱글 스레드에서 실행되며, 하나씩 실행 후 제거됨.

📌 이벤트 루프(Event Loop)

호출 스택과 태스크 큐를 계속 감시하면서 호출 스택이 비어 있을 때 태스크 큐에서 대기 중인 작업을 실행하는 역할

• 호출 스택이 비었는지 확인
• 비어 있다면, 태스크 큐에서 대기 중인 작업을 실행.

📌 태스크 큐(Task Queue, 콜백 큐)

• 비동기 작업(Web API, setTimeout, fetch 등)에서 완료된 콜백이 대기하는 곳.
• 호출 스택이 비면 이벤트 루프가 꺼내서 실행.

📌 마이크로 태스크 큐(Micro Task Queue)

• 호출 스택이 비면 즉시 실행되는 태스크
• 일반 태스크 큐보다 우선 순위가 높음