✅ Web API란?

브라우저가 제공하는 비동기 처리를 위한 기능 세트

자바스크립트 자체에는 없음!

자바스크립트는 기본적으로 로직을 순서대로 처리하는 언어고,

시간 재기, 이벤트 감지, 네트워크 요청 처리 같은 건 전~부 브라우저가 해주는 거다.

---

🧰 Web API의 대표 기능군

기능	설명	콜백 큐
setTimeout, setInterval	타이머	Task Queue
addEventListener	유저 이벤트 감지 (click, scroll 등)	Task Queue
fetch, XMLHttpRequest	네트워크 요청	Task Queue (응답 후) + Microtask (then)
DOM MutationObserver	DOM 변경 감지	Microtask Queue
requestAnimationFrame	다음 페인트 타이밍에 콜백	별도 Queue (Frame Queue)
Web Worker, Shared Worker	멀티 스레드 처리	메시지 Queue
Geolocation, WebSocket, FileReader 등	기타 하드웨어 및 I/O API	Task Queue 등 상황에 따라 다름

---

💡 비동기 처리가 가능한 이유: 브라우저는 멀티스레드니까

• 자바스크립트는 싱글 스레드
• 브라우저는 내부적으로 수십 개의 스레드 운영함
  • 타이머 스레드
  • 네트워크 스레드
  • 렌더링 스레드
  • 입력 이벤트 스레드
  • 미디어/오디오 디코딩 스레드

→ JS는 그냥 “야, 이거 좀 해줘~” 하고 명령만 내리는 입장

→ Web API가 알아서 다 처리함

---

📦 Web API → 큐 등록 구조

예: fetch

fetch("/data.json")
  .then(res => res.json())
  .then(data => console.log(data));

1. JS가 fetch() 호출 → Web API가 네트워크 요청 시작
2. JS는 다음 코드로 넘어감 (Non-blocking)
3. 응답이 오면:
   • 브라우저가 .then() 콜백을 Microtask Queue에 등록
4. 콜스택 비면 → Microtask Queue 실행

---

🧪 실전 코드 예제: Web API 구분해보기

console.log("Start");

setTimeout(() => console.log("Timeout!"), 0);

document.addEventListener("click", () => console.log("Clicked!"));

Promise.resolve().then(() => console.log("Promise done"));

fetch("/some-data").then(() => console.log("Fetched!"));

console.log("End");

코드	Web API 사용 여부	큐
setTimeout	✅ 타이머 스레드	Task Queue
addEventListener	✅ 이벤트 스레드	Task Queue
Promise.then	✅ (JS에 내장)	Microtask Queue
fetch	✅ 네트워크 스레드 → 응답 후 Microtask	Microtask Queue
console.log	❌ 동기 실행	Call Stack

---

⚠️ Web API가 없으면?

// 자바스크립트만으로는 불가능한 코드
setTimeout(() => {}, 1000); // ❌ JS 내부엔 없음

→ 브라우저 없이 동작하는 순수 JS 환경(Node.js 같은 거)에서는

→ setTimeout은 브라우저 대신

libuv 같은 C++ 기반의 타이머 시스템

이 따로 구현돼 있음

---

요약 문장 3줄로 박제해라 ✍️

1. Web API는 브라우저가 제공하는 비동기 도우미들이다
2. JS는 직접 일 안 하고, Web API한테 맡긴다
3. Web API가 끝나면 Task나 Microtask 큐에 콜백을 등록한다

---

자 이제 질문 들어간다 🧨

🔍 다음 중 Web API가 “직접 관여”하지 않는 건 뭐게?

A. setTimeout()

B. addEventListener()

C. Promise.resolve().then()

D. fetch()

정답 뭐라고 생각해?

한 번 머리 굴려서 대답해봐. 왜 그런지도 같이 말해보자. 😤

정답은…C

✅ 다시 정리해보자 — 왜 C가 맞는가?

항목	Web API 사용 여부	이유
setTimeout()	✅	브라우저 타이머 Web API가 시간 재고 Task Queue에 콜백 등록
addEventListener()	✅	브라우저 이벤트 스레드가 이벤트 감지, Task Queue에 등록
✅ Promise.resolve().then()	❌	JS 엔진 자체 기능. Web API 관여 없음. 바로 Microtask Queue에 등록
fetch()	✅	브라우저 네트워크 스레드가 요청, 응답 완료 시 Microtask 등록

---

🧠 중요한 포인트 다시 박제해라:

✅ Promise.then()은 Web API를 거치지 않는다

→ JS 엔진이 바로 Microtask Queue에 등록해버림

그래서 실제로 JS에서 비동기 흐름 짤 때:

• Promise는 매우 빠르게 실행됨 (즉시 Microtask로)
• setTimeout은 아무리 0초라도 한 사이클 밀림
• → 이걸 기반으로 순서 예측이 가능해지는 거지 😎