Web API 이벤트루프(2) [ TIL ] [ Javascript ]

 

Problem

 

Web API 에 대해서 알아보장

---

Try

 

Web API 는 브라우저에서 제공하는 API 로 DOM, Ajax, TimeOut 등이 있다.

CallStack 에서 실행된 비동기 함수는 Web API 를 호출하고, Web API 는 콜백 함수를 테스크 큐에 넣는다.

 

코드 작성

console.time("첫번째 setTimeout");
console.time("두번째 setTimeout");
setTimeout(function timer() {
  console.log("2초가 걸릴까요?");
  console.timeEnd("첫번째 setTimeout");
}, 2000);
console.log("안녕하심니까");

setTimeout(function timeout() {
  console.log("5초가 걸릴까요?");
  console.timeEnd("두번째 setTimeout");
}, 5000);

console.log("하이요");

function a() {
  console.log("함수 a 입니다.");
  b();
}

function b() {
  console.log("함수 b 입니다.");
}

function c() {
  console.log("함수 c 입니다.");
  a();
  b();
}

c();

 

이 코드의 실행과정을 생각해보자.

 

호출 스택:

전역 -> console.time push & pop -> console.time push & pop -> setTimeout push web API 호출 & pop -> console.log push & pop -> console.log push & pop -> c push -> console.log push & pop -> a push -> console.log push & pop -> b push -> console.log push & pop -> b pop -> a pop -> b push -> b pop -> c pop -> setTimeout push web API 호출 & pop -> 대기 -> callback2 push -> console.log push & pop -> console.timeEnd push & pop -> callback2 pop -> callback5 push -> console.log push & pop -> console.timeEnd push & pop 0> callback5 pop -> 큐도 비었고 호출 스택도 비었으니 종료

 

Web API :

callback2 -> 2000ms -> callback2 테스크 큐 push & pop

callback5 -> 5000ms -> callback5 테스크 큐 push & pop

 

테스크 큐:

callback2 -> 호출 스택으로 이동

callback5 -> 호출 스택으로 이동

 

실행 결과

 

---

Solve

 

호출 스택과 Web API 의 연관성을 테스트 해봤고, 살짝이지만 테스크 큐 를 맛봤다.

Web API 에 실제로 setTimeout 이 옮겨 간다고 생각했으나 호출하고 없어진다. 

Web API 가 하는 역할이 이해가 안되었었지만 이 역할에 대해 나름 정리할 수 있었다.

 

 

---

What I Learned

setTimeout 은 Web API 호출 후 Web API 는 그 콜백을 가지고 타이머를 작동한다는 것을 알게되었다.

이벤트 루프에 대한 간단한 동작들을 적어보면서 이해 할 수 있었다.

헷갈렸던 setTimeout 과 Web API 에 대해서 알 수 있었다.

 

이번 TIL 에서 언급했던 큐 에 대해서 공부할 예정이다.