Before handling networking methods in JS

비동기 통신을 위한 환경, JS Engine

브라우저가 JS를 해석하여 사용하거나

애플리케이션 서버에서 Node.js를 통해 사용할 때

Asynchronous request 처리는

JS 자체가 아닌 JS를 실행하는 환경에서 담당한다.

<JS Engine>

- Call stack

- Microtask queue

<Environment support>

- Event Loop

- Web API

- Macrotask queue

즉, JS Engine이 가진 공간인 Heap, Callstack만으로는

비동기 요청을 해결하지 않는다.

예를 들어, 구글 크롬의 V8 JS Engine에서는

함수가 호출될 때, 하나의 Call stack에 순차적으로 보관하고

Last In First Out 순서로 처리하는데

return 될 때, 스택으로부터 pop up할 뿐이다.

스택에 쌓여있는 함수가 실행되는 동안에는

다른 작업이 이를 방해할 수 없는데,

예를 들어, 

Bottom |   a   |   b   |   c   | Top

1. C->B 순서로 함수 처리가 완료되었다.

2. A를 실행하려는 찰나, D라는 함수가 호출되어 Call stack에 쌓인다.

Bottom |   a   |   d    | Top

3. D->A 순으로 실행한다.

위 예시에서, 

D가 실행되는 와중, A의 코드를 실행하다가

다시 D의 Context로 돌아와서 마저 실행하는 작업을

JS 환경에서는 하지 않는다.

즉, 한 함수가 끝날 때까지 다른 작업의 방해를 받지 않는다.

그리고 작업 종류와 스케줄링 방식에 따라 이는 병목이 될 수도 있다.

JS Engine은 스케줄링을 위해 다음 환경 2개를 필요로 한다.

비동기 통신을 위한 환경,
이벤트 루프(MacroTask, MicroTask) & WebAPI

 

스레드 관점에서는

1. JS Engine의 단일 스레드 기반와

2. JS Engine과 통신하는 이벤트 루프 구동 환경의 다수의 스레드

가 비동기 요청에 대한 처리를 가능하게 한다.

이벤트 루프 with MacroTask 

이벤트 루프는 while문 내에서 2가지를 확인한다.

1. 현재 실행중인 태스크가 있는가 ? 
    있다면  작업이 끝날 때 까지 paused.

2. 매크로태스크 큐에 태스크가 있는가 ?
   2.1 있다면, 선입선출 방식으로 태스크를 인출하여
       main thread에서 처리한다.

   2.2 없다면, sleep 상태에 들어간다.
        태스크가 생기면 2.1로 이동한다.

이벤트 루프 with MicroTask

MicroTask는 

- promise(.then /catch/ finally )

- async/await ,

- queueMicrotask(function) 

로 생성되는 작업이다.

MicroTask는 매크로태스크의 작업보다 우선수위가 높다.

따라서 다음과 같은 로직이 추가된다.

1. macroTask 처리  

2. microtask queue의 모든 작업을 처리

3. macroTask 처리

2번의 특성으로 인해

마이크로태스크 큐에 1-4번까지의 마이크로태스크가 있다면

1~4번까지 처리될 동안 동일한 맥락이 보장되며

다른 작업이 이 맥락을 훼손하지 않는다.

sleep 상태

JS 명렁어 처리를 하지않아

JS 명령어 처리에 대한 cpu 자원 소비가 0에 가까운 상태 

Web API

대표적인 비동기 호출 함수인 setTimeout, fetch 등은

WebAPI 영역에 정의되어 있으며 

백그라운드에서 스케줄링을 지원한다.

foo라는 함수를 0초 뒤에 실행하는, 

setTImeout( foo, 0);

의 경우 

1. setTimeout()이 callstack에서 pop up되며 foo 함수가 webAPI로 전달

2. webAPI가 foo 함수를
   지정된 딜레이 (0초로 명시하지만 chrome에서는 묵시적으로 4ms)

   만큼 대기시킨다.

3. 시간이 지나고나서, 콜백을 태스크 큐로 이동시킨다.

* 태스크 큐의 작업들은 WebAPI , V8 Engine 에서 언제든지 추가될 수 있다.

* V8 Engine 관점에서는 이 태스크 큐를 Macrotask queue라고 부른다.