자바스크립트 딥다이브 (비동기 처리)

동기와 비동기

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
• 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식이다. 즉 싱글 스레드로 인해 한번에 하나의 작업만 처리가 가능하기 때문에 처리에 시간이 걸리는 태스크를 블로킹(작업 중단)이 발생할 수 있다.

• 위 예제를 보면 콜백함수를 사용했고, foo 함수는 3초 뒤에 실행이 되는데 bar 함수는 실행이 바로 되어야 하는데 결과값을 보면 foo가 되고 bar가 함수가 실행이 된다. 

• 위 그림으로 보면 sleep 함수가 실행이 되고나서야 bar 함수가 실행이 되는 것을 볼 수 있다. 이를 동기식 처리하고 한다
• 동기식 처리는 현재 실행중인 태스크가 종료될 때 까지 대기하는 것을 말한다. 

• 위 예제를 보면 a가 먼저 출력이 된다. 
• 이처럼 현재 실행 중인 태스크가 종료되지 않은 상태라도 다음 태스크를 바로 실행하는 것을 비동기 처리라 한다
• 비동기 처리를 위한 비동기 함수는 주로 콜백 패턴을 사용한다. ex) setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 등

 

이벤트 루프와 태스크 큐

• 자바스크립트는 싱글 스레드 방식이라고 하는데 HTML 애니메이션이 움직이고, HTTP 요청등 하나의 작업만 하는 것처럼 보이지는 않는다. 
• 이처럼 동시성을 지원하는 것이 이벤트 루프이다
• 대부분의 자바스크립트 엔진은 2개의 영역으로 구분이 가능하다. 콜스택과 힙이다.

🔑 콜스택 VS 힙

콜스택 : 실행 컨텍스트가 추가되고 제거되는 스택 자료구조가 바로 콜 스택이다. 
함수를 호출하면 차례로 콜스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜스택을 사용하기 때문에 콜스택에서 제거되기 전까지 어떤 태스크도 실행하지 않는다. 

힙 : 객체가 저장되는 메모리 공간이다. 객체는 크기가 정해져 있지 않아 런타임에 메모리 크기를 결정해야 한다. 그래서 힙에 저장을 한다. 

• 콜스택과 힙으로 이루어져있는 자바스크립트 엔진은 태스크가 요청되면 콜스택을 통해 작업을 순차적으로 처리한다. 
• 비동기 처리에서 소스코드 평가와 실행을 제외한 모든 처리는 브라우저 또는 Node.js가 담당한다
• 예를 들어 setTimeout 콜백 함수의 평가와 실행은 자바스크립트 엔진이 담당하고 타이머 설정과 콜백함수 등록은 브라우저 혹은 Node.js가 담당한다. 이를 위해 브라우저 환경은 태스크 큐, 이벤트 루프를 재공한다

🔑 태스크 큐 VS 이벤트 루프 

태스크 큐 : setTimeout, setInterval 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 장소다. 

이벤트 루프 : 이벤트 루프는 현재 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜스택 비어있고 큐에 대기중인 함수가 있을 시 이벤트 루프는 순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동시킨다. 
이동이 된 함수는 실행이 된다. 

• 예시를 보자 

1. 전역 코드 평가되어 전역 실행 컨텍스트 생성 후 콜 스택에 푸시됨

2. 전역 코드가 실행되어 setTimeout 함수가 호출되고, 이 때 setTimeout 함수의 함수 실행 컨텍스트가 생성되고 콜스택에 푸쉬되어 현재 실행중인 실행 컨텍스트가 된다. 

3. setTimeout 함수가 실행되면 함수를 호출 스케줄링하고 종료되어 콜 스택에서 팝 된다. 타이머 설정이 만료되면 콜백 함수를 태스크 큐에 푸쉬하는 것은 브라우저의 역할이다. 

4. 브라우저와 자바스크립트 엔진이 병행으로 수행된다. 

  4-1. 브라우저는 타이머 설정 후 만료를 기다린다. 타이머 만료되면 콜백함수 add가 태스크 큐에 푸시된다. 지연시간이 0으로 설정되어 있지만 지연시간이 4ms 이하면 최소 4ms가 지정된다고 한다. 이 처리는 브라우저가 수행한다. 

  4-2. a 함수가 호출되어 a 함수의 전역 실행 컨텍스트가 생성되고 콜 스택에 푸쉬되어 현재 실행 중인 컨텍스트가 된다. 함수가 종료되면 콜 스택에서 팝 된다. 

5. 전역 실행이 종료되면 전역 실행 컨텍스트가 콜 스택에서 팝된다. 

6. 이벤트 루프에 콜 스택에 비어있음이 감지되고 태스크 큐에서 대기중인 콜백함수 add가 이벤트 루프에 의해 콜 스택에 푸쉬된다. 

• 이처럼 setTimeout 함수의 콜백 함수는 태스크 큐에 푸쉬되어 대기하다가 콜 스택이 비게 되면 콜 스택에 푸쉬한다. 
• 자바스크립트 엔진은 싱글 스레드 형식으로 작동하지만 브라우저는 멀티 스레드로 동작한다

📘 한 줄 요약

자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저의 Web API, 태스크 큐, 이벤트 루프가 함께 동작하여 비동기 처리를 가능하게 한다.
이벤트 루프는 스택이 비면 큐의 콜백을 꺼내 실행시켜 마치 여러 일이 동시에 일어나는 것처럼 보이게 만든다.