이벤트 루프와 비동기 통신의 이해

1.5.1 싱글 스레드 자바스크립트

 

자바스크립트는 싱글 스레드 언어이다.

하나의 프로그램에는 하나의 프로세스만 할당되기 때문에 하나의 프로그램에서 동시에 여러 개의 복잡한 작업을 수행하기 위해 

더 작은 실행 단위인 스레드(thread)가 탄생했다.

 

하나의 프로세스에서는 여러 개의 스레드를 만들 수 있다.

스레드끼리는 메모리를 공유할 수 있어 여러 가지 작업을 동시에 수행할 수 있다.

 

 

자바스크립트가 싱글 스레드 라는 것은 ?

 

자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 이루어진다는 것

 

 

Run-code-completion

ㄴ 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는다.

 

자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다.

 

'비동기' 란? async(asynchronous) 여러 작업을 동시에 시작할 수 있는 기능이다.

 

 

1.5.2 이벤트 루프란?

 

이벤트 루프란

자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치이다.

 

 

호출 스택과 이벤트 루프

 

호출 스택(call stack)

• 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이다.

이 호출 스택이 비어 있는지 여부를 확인하는 것이 바로 이벤트 루프다.

 

이벤트 루프는 단일 스레드 내부에서 이 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고,

수행해야 할 코드가 있으면 자바스크립트 엔진을 이용해 실행한다.

 

'코드를 실행하는 것'과 '호출 스택이 비어있는지 확인하는 것' 모두 단일 스레드에서 일어난다.

두 작업은 동시에 일어날 수 없고, 한 스레드에서 순차적으로 일어난다.

 

비동기 작업은 어떻게 실행될까??

 

태스크 큐

ㄴ 실행해야 할 태스크의 집합 (비동기 함수의 콜백 함수나 이벤트 핸들러 등)

 

이벤트 루프는 태스크 큐를 한 개 이상 가지고 있다.

태스크큐는 자료구조의 (queue)가 아닌 set의 형태를 띄고있다.

FIFO(First In First Out) 형식이 아닌 선택된 큐 중에서 실행 가능한 가장 오래된 태스크를 가져오는 방식이다.

 

여기서 이벤트 루프의 역할은

• 호출 스택에 실행중인 코드가 있는지 확인
• 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인
• 호출 스택이 비었다면 태스크 큐에 대기중인 작업이 있는지 확인
• 실행 가능한 오래된 것부터 순차적으로 꺼내와 실행 (태스크 큐가 빌 때까지)

비동기 함수는 태스크 큐가 할당되는 별도의 스레드에서 수행된다.

 

자바스크립트 코드 실행은 싱글 스레드에서 이루어지지만

외부 Web API등은 모두 자바스크립트 코드 외부에서 실행되고 콜백이 태스크 큐로 들어간다.

 

이벤트 루프는 호출 스택이 비고, 콜백이 실행 가능하면 이것을 꺼내 수행하는 역할을 한다.

 

 

 

1.5.3 태스크 큐와 마이크로 태스크 큐

 

이벤트 루프는 하나의 마이크로 태스크 큐를 가진다. 

마이크로 태스크에는 대표적으로 Promise 가 있는데 기존 태스크 큐보다 우선권을 가지기 때문에

setTimeout 과 setInterval은 Promise 보다 늦게 실행된다.

>> 마이크로 태스크 큐가 빌 때까지 기존 태스크 큐의 실행은 뒤로 미뤄진다.

 

렌더링은 마이크로 태스크 큐를 실행하고, 그 이후에 일어난다.

각 마이크로 태스크 큐 작업이 끝날 때마다 한 번씩 렌더링 할 기회를 얻는다.

 

브라우저에 렌더링하는 작업은 마이크로 태스크 큐와 태스크 큐 사이에서 일어난다.