비동기 처리 (Web APIs, Event Loop)

1. 원리
2. Web APIs와 브라우저 역할
3. 이벤트 루프와 작업 처리
4. 예제 코드
5. 요약

원리

• 자바스크립트에서 setTimeout, setInterval, fetch 같은 비동기 작업은 브라우저의 Web APIs에서 처리됨

Web APIs와 브라우저 역할

• setTimeout/setInterval:
  브라우저가 타이머를 설정하고 관리함.
  타이머가 완료되면 해당 콜백을 이벤트 큐(Event Queue)로 전달함.

• fetch:
  네트워크 요청과 같은 I/O 작업은 브라우저가 처리함.
  데이터가 준비되면 Promise를 해결하고 관련 콜백을 이벤트 큐로 보냄.

이벤트 루프와 작업 처리

브라우저는 다음과 같은 단계로 작업을 처리함

1. 자바스크립트 메인 스레드에서 실행:
   모든 동기 코드는 자바스크립트 엔진(예: V8)에서 실행됨.

2. Web APIs에 요청:
   비동기 작업(setTimeout, fetch, DOM 이벤트 등)은 Web APIs에 의해 처리되고 대기 상태로 들어감.

3. 이벤트 큐에 작업 전달:
   비동기 작업이 완료되면 해당 콜백은 이벤트 큐에 추가됨.

4. 이벤트 루프(Event Loop):
   메인 스레드가 비어 있으면(즉, 실행 중인 동기 코드가 없으면) 이벤트 큐에서 대기 중인 콜백을 가져와 실행함.

예제 코드

console.log("Start");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 1000);

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log("Fetched Data:", data));

console.log("End");

실행 순서:
1. "Start" 출력 → 동기 코드.
2. setTimeout 타이머 시작 (Web APIs에서 처리).
3. fetch 요청 시작 (브라우저 네트워크 작업 처리).
4. "End" 출력 → 동기 코드.
5. 1초 후 setTimeout 콜백 실행 → "Inside setTimeout" 출력.
6. fetch 응답 도착 → "Fetched Data" 출력.

요약

• Web APIs가 비동기 작업을 처리하고, 완료되면 콜백을 이벤트 큐에 추가함.
• 이벤트 루프(Event Loop)가 큐의 작업을 순차적으로 처리함.
• 따라서 브라우저는 단순히 자바스크립트를 실행하는 것 외에 다양한 비동기 작업도 관리함.