이벤트 루프와 Web APIs의 관계

관련 주제 

• '이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관'

 

이벤트 루프와 Web APIs의 관계

자바스크립트는 싱글 스레드 언어로 한번에 하나의 작업만 실행할 수 있다.

하지만 브라우저에서 비동기 작업을 처리할때는 이벤트 루프와 Web APIs가 함께 작동하여 여러 작업을 효율적으로 수행할 수 있다.

즉, Web APIs가 없을 경우에는 자바스크립트는 싱글 스레드 언어이므로 모든 작업을 순차적으로 실행해야하는 비극을 겪을 수 있다.

 

 

Web APIs 란?

브라우저가 제공하는 기능으로 자바스크립트가 직접 실행할 수 없는 작업을 담당한다.

자바스크립트는 Web APIs에 작업을 위임하고, Web APIs는 작업이 끝나면 콜백을 다시 자바스크립트로 넘겨주게 된다.

즉, Web APIs는 자바스크립트의 비동기 처리를 담당하는 중요한 요소이며, 이벤트 루프를 통해 자바스크립트와 상호작용한다.

 

유형

Web APIs	설명
타이머 API	setTimeout, setInterval 등 일정 시간 후 실행
DOM API	document.querySelector(), addEventListener() 등
네트워크 API	fetch(), XMLHttpRequest() 등 서버 요청 처리
웹 워커(Web Worker)	백그라운드에서 실행되는 JS 스레드
이벤트 핸들러	click, keydown 같은 사용자 이벤트

 

 

 

이벤트 루프 (Event Loop) 지난글

자바스크립트가 작업을 실행하는 방식을 결정하는 메커니즘으로, 콜 스택이나 콜백 큐를 조정하여 비동기 작업을 효율적으로 처리한다.

 

 

이벤트 루프와 Web APIs 상호작용 과정

브라우저의 Web APIs는 작업이 완료되면 이벤트 루프를 통해 콜백을 자바스크립트에 반환한다.

 

 

예시 

console.log('Start'); // ① 동기

setTimeout(() => {
  console.log('Inside setTimeout'); // ④ Macrotask
}, 0);

fetch('https://api.example.com')
  .then(() => console.log('Fetch response received')); // ③ Microtask

console.log('End'); // ② 동기

 

출력

• Start
• End
• Fetch response received
• Inside setTimeout

 

풀이

이벤트 루프 관점 (태스크큐 → 마이크로 태스크큐) 

1. console.log('Start')
   1. 콜스택에 등록 → 바로 실행 → 'Start' 출력 → 콜스택에서 제거
2. setTimeout(...)
   1. setTimeout 함수가 콜스택에 등록 → Web APIs 영역에 콜백과 타이머 등록 → 콜스택에서 제거
   2. setTimeout(fn, 0ms) 여도 브라우저 최소지연시간 '1ms~4ms'가 필요하기에 무조건 다음 이벤트 루프 틱에서 실행
   3. (다음 이벤트 루프 틱) 타이머 종료 시 태스크큐에 콜백을 등록
3. fetch(...)
   1. fetch 함수가 콜스택에 등록 → Web APIs 영역에서 비동기로 네트워크 요청 → Promise 객체 리턴, then은 아직 pending → 콜스택에서 제거
   2. (네트워크 요청에 따라 콜백 실행 타이밍이 달라짐, 0ms 라고 쳤을때) 응답이 완료되면 then 콜백을 마이크로 태스크큐에 등록
4. console.log('End)
   1. 1번과 동일  
5. 이벤트 루프 틱이 돌면서 태스크큐 확인, setTimeout의 최소지연시간으로 인해 첫번째 틱에는 해당 콜백이 태스크큐에 없으므로 다음 마이크로태스크큐 확인
6. 마이크로 태스크큐에 fetch.then 실행하는데 이때 마이크로태스크큐는 한번 실행될때, 대기하는 전부 실행하는 특성이 있음.
7. 이후 다음 이벤트 루프 틱
   1. 콜스택 → 태스크큐 확인 → setTimeout의 콜백 콜스택으로 이동 후 실행 → 마이크로태스크큐 확인 (비었음) → 콜스택과 큐 전체 비어있게 되면 이벤트 루프 대기

 

실행 관점

보통 이해하기 위하여 이렇게 학습한다. (마이크로 태스크큐 → 태스크큐) 

1. console.log('Start')
2. setTimeout(...)
   1. setTimeout 함수가 콜스택에 등록 → Web APIs 영역에 콜백과 타이머 등록 → 콜스택에서 제거
   2. 타이머가 끝날 경우 태스크큐에 등록
3. fetch(...)
   1. fetch 함수가 콜스택에 등록 → Web APIs 영역에서 비동기로 네트워크 요청 → Promise 객체 리턴, then은 아직 pending → 콜스택에서 제거
   2. 응답이 완료되면 then 콜백을 마이크로 태스크큐에 등록
4. console.log('End)
5. 이벤트 루프는 항상 마이크로태스크큐 → 태스크큐 순서로 실행된다. 따라서 fetch의 콜백 → setTimeout의 콜백 순으로 실행된다.

 

---

 

Q. 즉, Web APIs는 타이머 동작만하는거구나? 

A. 맞다.

Web APIs는 setTimeout의 콜백을 직접 실행하는 것이 아니며 setTimeout의 타이머를 관리한 후 콜백을 태스크 큐로 전달할 뿐이다.

이벤트 루프가 콜백을 태스크큐에서 콜스택으로 push하는 역할을 하고, 콜백의 실행은 콜스택에서 실행 순번이 왔을때 JS 엔진이 pop해서 실행한다.

 

---