🌀 19. JavaScript Event Loop 정리 — 비동기 처리 흐름 이제는 제대로 알고 싶었다

JS는 싱글 스레드 언어지만 비동기 처리를 잘 한다.
그 중심에는 바로 이벤트 루프(Event Loop)라는 개념이 있다.

이번 글은 이벤트 루프가 뭔지,
call stack, task queue, microtask queue, Web APIs가 어떻게 연결되는지
정확히 알고 싶어서 정리한 글이다.

---

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

동시에 한 줄씩만 실행할 수 있다.
그런데 어떻게 setTimeout도 되고, fetch도 되고, 클릭 이벤트도 처리될까?

그건 JS가 Web API와 비동기 큐(Task Queue, Microtask Queue)를 활용해서
실제로는 비동기적으로 동작하도록 구성되어 있기 때문이다.

---

✅ 전체 구조: Event Loop 핵심 구성요소

+------------------+     +---------------------+
|  Call Stack      |<----|    Event Loop       |
+------------------+     +---------------------+
        ^   ^                         |
        |   |                         ↓
+------------------+        +------------------+
| Task Queue       |<-------|  Web APIs (DOM, setTimeout, etc.)
+------------------+        +------------------+
        ^
        |
+------------------+
| Microtask Queue  |
| (Promise, queueMicrotask) |
+------------------+

---

✅ 실행 순서 요약

1. 코드가 Call Stack에서 실행된다.
2. 비동기 작업(setTimeout, fetch 등)은 Web API에 넘긴다.
3. 완료된 작업은 Queue에 들어간다.
4. Microtask Queue가 항상 먼저 실행된다.
5. 그 다음 Task Queue의 작업이 실행된다.
6. 이 모든 흐름을 Event Loop가 계속 반복하면서 처리한다.

---

✅ 예제를 통한 흐름 이해

console.log('시작');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('끝');

출력 순서

시작  
끝  
promise  
setTimeout  

---

이유

• console.log('시작') → Call Stack 실행
• setTimeout → Web API로 넘겨짐 → Task Queue로 대기
• Promise.then → Microtask Queue에 등록됨
• console.log('끝') → Call Stack 실행

✅ Microtask(Promise) → Task(setTimeout) 순서로 실행됨

---

✅ 마이크로태스크 vs 태스크

구분	설명	예시
Microtask	현재 실행 끝나고 바로 실행됨	Promise.then, queueMicrotask
Task	다음 틱(tick)에서 실행됨	setTimeout, setInterval, DOM 이벤트

---

✅ 실전에서 겪었던 문제

문제: setState 바로 다음에 상태가 안 바뀜

setValue(1);
console.log(value); // 이전 값 출력됨

이유: setState는 비동기로 처리 → Microtask로 예약됨
그래서 코드 흐름에선 아직 값이 바뀌지 않은 상태임

→ 해결: useEffect, useLayoutEffect 등으로 반응하게 만들기

---

✅ 요약 & 흐름 정리

• JS는 싱글 스레드지만 Web API + Queue 구조로 비동기 처리가 가능
• Event Loop는 Call Stack이 비면 Microtask → Task 순으로 큐를 처리
• 비동기 흐름을 정확히 이해하면 setTimeout, Promise, fetch, async/await 동작 순서를 정확히 예측할 수 있음

---

📝 내가 느낀 점

솔직히 "JS는 싱글 스레드니까 느려" 정도로만 알고 있었는데,
이번에 Event Loop 구조를 제대로 이해하고 나니까
비동기 코드가 왜 그렇게 실행되는지 눈에 보이기 시작했다.

이제는 setTimeout, Promise, fetch를 쓰기 전에
“이건 큐에서 어떻게 처리되겠지” 하고 흐름이 그려진다.

---

🔄 “비동기를 안다고 말하려면, 이벤트 루프를 그릴 수 있어야 한다.”

---