[JavaScript] 자바스크립트에서 비동기 작업은 어떻게 동작할까?

일단 자바스크립트는 싱글 쓰레드 언어인데, 이는 오직 하나의 콜스택과 하나의 힙 메모리를 가진다는 것을 의미한다.

그러므로 자바스크립트는 한 번에 하나의 코드만을 실행할 수 있다.

 

자바스크립트에는 두 가지 작업이 있는데, 하나는 동기 작업 다른 하나는 비동기 작업이다.

 

동기 작업은 코드가 즉시 실행되고 비동기 작업은 로딩 과정을 거치고 실행된다는 차이가 있다.

 

동기식 코드

한줄씩 실행되는 방식으로 이전 라인이 끝나기 전에 각 라인 코드는 기다린다.

시간이 오래 걸리는 연산이면 다음 코드의 실행을 막는다. (Blocking)

 

비동기식 코드

비동기 코드는 백그라운드에서 실행되는 작업이 완료되면 코드가 실행된다.

본질적으로 논블록킹이다. (Non-Blocking)

실행은 비동기 작업이 끝나는 것을 기다리지 않는다.

콜백 함수 단독으로 코드를 비동기화하지 않는다.

 

런타임

자바스크립트의 런타임은 크게 JS Engine, Web API, Call Stack으로 구성된다.

자바스크립트 인터프리터가 싱글 쓰레드이지만 동시성(Concurrency)을 제공하고 논블록킹 방식으로 여러 코드들을 한 번에 실행시킬 수 있다. 이것으로 비동기 작업이 가능해진다.

자바스크립트 인터프리터가 멀티 쓰레드가 아니라 병렬성은 제외된다.

 

동시성

작업들이 동시에 발생하여 실행되지만 한 시점에서 바라볼 때 오직 하나의 작업만이 실행되고 있는 것을 의미한다.

작업들이 인터리브 방식으로 실행되고 완료된다. → 여러 작업들이 번갈아가면서 실행된다고 볼 수 있다.

 

병렬성

작업들을 동시에 실행하여 한 시점에서 바라볼 때 여러 개의 작업들이 실행되고 있는 것을 의미한다.

멀티 쓰레드 방식에서 실행된다.

 

자바스크립트 엔진

JS엔진은 런타임의 심장으로 간주할 수 있다.

JS엔진은 각 코드들이 실행되는 장소로 콜 스택과 힙 메모리로 구성된다.

 

콜 스택

코드가 실행 전에 쌓여있는 장소를 말한다.

이벤트 루프(event loop)가 있는데 자바스크립트 인터프리터를 스마트하게 만든다.

이벤트 루프가 동시성을 가능하게 만든다.

 

힙 메모리

모든 객체와 데이터가 저장되는 장소다.

 

Web API

자바스크립트는 다양한 Web API에 접근하고 많은 기능을 추가한다.

예를 들면, DOM API로 DOM Tree에 접근하여 브라우저에 보이는 HTML 요소에 변화를 줄 수 있다.

또한 시간과 관련된 함수를 제공하는 타이머 기능도 있다.

또, 브라우저 위치에 접근하는 지리 위치 API도 있다.

이처럼 자바스크립트는 다양한 Web API에 접근한다.

 

Callback Queue (Task Queue)

비동기 코드가 콜 스택으로 전달되기 전에 있는 장소다.

Web API (Promise, setTimeout, event 등)에 의해 비동기 코드가 전달된다.

이벤트 루프가 콜백 큐에서 콜 스택으로 작업을 전달하는 것을 처리한다.

 

Micro task Queue

콜백 큐와 비슷하지만 콜백 큐보다 더 높은 실행 우선순위를 가진다.

예를 들면 콜 스택이 비어 있는 상황(전역 실행 컨텍스트를 제외하고)에서 두 개의 작업이 있는데

하나는 마이크로 태스크 큐, 나머지 하나는 콜백 큐에 있다. 그러면 마이크로 태스크 큐에 있는 작업이 더 높은 우선순위를 갖는다.

 

Event Loop

콜백 큐에 있는 코드의 실행에 관한 스마트한 기술로 콜 스택이 전역 실행 컨텍스트를 제외하고 비어있다면 콜백 큐에 있는 코드를 콜 스택으로 전달한다.

 

이벤트 루프는 콜백 큐와 마이크로 태스크 큐에 있는 각 작업들을 언제 실행할지 결정한다.

 

콜 스택에 있는 모든 작업들은 순차적으로 실행된다.

이건 동기적이고 실행되기 위해 이전 코드를 기다린다.

이 단계에서 콜 스택에 있는 모든 작업들은 실행된다.

 

백그라운드에서 비동기 작업이 로딩이 끝나면, 콜백 큐로 보내진다.

이 비동기 작업과 연결된 콜백 함수는 콜백 큐에서 실행되기를 기다린다.

 

이제 이벤트 루프 일부가 동작한다.

이벤트 루프는 계속해서 콜 스택이 비었는지 체크를 하는데, 콜 스택이 비었다는 걸 알면 콜백 큐에 있는 첫 번째 작업을 가져와서 콜 스택에 쌓이고 이 작업이 곧 실행된다. 이 과정은 콜스택과 콜백 큐가 비어 있을 때까지 계속한다.

 

그럼 프로미스 또한 콜백 큐로 전달될까?

그건 아니다!

프로미스는 비동기 작업의 특별한 타입으로 마이크로 태스크 큐로 들어간다.

이벤트 루프는 콜백 큐에서 실행될 작업을 찾을 때, 마이크로 태스크 큐에서도 작업을 찾는다.

마이크로 태스크 큐는 콜백 큐보다 실행 시 더 높은 우선순위를 갖는다.

이벤트 루프가 마이크로 태스크 큐에 있는 작업을 먼저 실행하도록 한다.