웹서비스가 동작하게 하는 기본 플로우

웹브라우저의 구성 요소

• Call Stack : 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API : 웹 브라우저에서 제공하는 API로 AJAX나 TimeOut등의 비동기 작업 수행
• Task Queue : Callback Queue 라고도 하며, Web API에서 넘겨받은 Callback함수를 저장.
• Event Loop : Call Stack이 비워져있다면, Task Queue의 작업을 Call Stack으로 옮김.

setTimeout(() => console.log("Async Hi hun"));
console.log("Hello! World");
// Hello! World
// Async Hi hun

비동기 코드는 먼저 실행됨에도 불구하고, 나중에 출력되는걸 볼 수 있다.

1. setTimeOut 함수가 실행되고, Call Stack에 setTimeOut 함수가 추가 된다.
2. setTimeOut 함수는 자바스크립트 엔진이 처리하지 않고, Web API가 처리한다. (NodeJS의 경우, Timers 모듈) Web API가 TimeOut 작업요청 시간이�지나면, Task Queue로 인자로 받은 callback 함수를 전달한다.
3. 이후, 두번째 라인의 console.log가 Call Stack에 추가된다. 그리고 Call Stack의 console.log가 곧바로 실행되고, 콘솔에는 “Hello! World” 문자열이 출력된다.
4. 이때, 자바스크립트의 Event Loop는 Call Stack이 비워져있는지 항상 확인하는데, 방금 전, console.log가 실행되며, Call Stack이 비워진 것을 확인한다.
5. Call Stack이 비워진 것을 확인한 Event Loop는 Task Queue에 있던 callback함수를 Call Stack으로 옮겨 작업을 수행한다. 이후 console.log의 문자열 “Async Hi Hun” 출력

모든 작업이 끝나면, Call Stack과 Task Queue가 비워진 것을 볼 수 있다.