비동기 코드 - 콜스택, 태스크 큐 개념 이해하기

🧠 1️⃣ 콜 스택 (Call Stack)

현재 실행 중인 코드(함수)들이 쌓이는 곳

자바스크립트는 단일 스레드(single thread) 언어라,
한 번에 하나의 일(함수)만 실행할 수 있어요.

📦 콜 스택은 “지금 당장 실행할 함수들” 이 쌓이는 구조예요.

• 새 함수가 호출되면 → 스택에 push
• 함수가 끝나면 → 스택에서 pop

예시:

function a() {
  b();
}
function b() {
  console.log("b 실행");
}
a();

➡ 실행 순서:

1. a()가 호출되면 스택에 push
2. a() 내부에서 b() 호출 → b() push
3. b() 실행 후 종료 → pop
4. a() 실행 종료 → pop

📜 실행 흐름:

콜스택: [a] → [a, b] → [a] → []

---

⚙️ 2️⃣ 태스크 큐 (Task Queue)

비동기 함수의 콜백들이 대기하는 곳

여기에 들어가는 건 대표적으로

• setTimeout()
• setInterval()
• 이벤트 핸들러
• fetch 응답 콜백 등

이런 비동기 함수의 “콜백 함수” 들이에요.

예시:

console.log("시작");

setTimeout(() => {
  console.log("비동기 실행");
}, 0);

console.log("끝");

➡ 실행 순서:

1. "시작" → 바로 콜스택에서 실행
2. setTimeout() → 브라우저의 Web API 영역으로 보내짐
   (0초 후 콜백 실행 예약)
3. "끝" → 바로 실행
4. 콜스택이 완전히 비면 → 태스크 큐에 있던 콜백(console.log("비동기 실행"))이 스택으로 이동
5. 실행

📜 출력 순서

시작
끝
비동기 실행

---

🔄 3️⃣ 이벤트 루프(Event Loop)

콜스택과 태스크 큐를 계속 감시하는 “심판” 역할 ⚖️

• 콜스택이 비어 있으면
  → 태스크 큐에 있는 콜백을 하나 꺼내서 스택으로 보냄
• 콜스택이 바쁘면
  → 큐에 있는 콜백은 기다림

즉, "메인 코드(콜스택)" 다 끝나야 "비동기 콜백(태스크 큐)" 가 실행돼요.
그래서 setTimeout(..., 0)이어도 바로 실행되지 않고 뒤로 밀리는 이유가 바로 이거예요!

---

🔍 정리 표

구분	콜 스택(Call Stack)	태스크 큐(Task Queue)
역할	실행 중인 함수들이 쌓이는 곳	나중에 실행될 콜백들이 대기하는 곳
실행 시점	즉시 실행	콜스택이 완전히 비워진 후 실행
예시	console.log(), 함수 호출	setTimeout(), fetch(), 이벤트
처리 순서	동기적	비동기적

---

💬 비유로 정리

요소	비유
콜 스택	주방장이 지금 요리 중인 조리대
태스크 큐	주문 대기표가 쌓이는 창구
이벤트 루프	“지금 요리 끝났네? 다음 주문 넣어도 되겠다!”를 판단하는 매니저