42. 비동기 프로그래밍

Sooo·2023년 8월 8일

목록 보기

3/6

요약

콜스택 (실행 컨텍스트 스택)

실행 컨텍스트가 추가/제거되는 스택
함수를 호출하면 순차적으로 함수 실행 컨택스트가 콜스택에 쌓임. 최상위 컨택스트가 종료되어 스택에서 팝되기 전까지는 아래의 컨택스트들은 실행되지 않는다.

힙

호출 스케줄링은 브라우저/Node.js가 담당

비동기처리에서 소스코드 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진 구동 환경인 브라우저/Node.js가 담당한다.
- setTimeout의 콜백 함수 평가와 실행은 자바스크립트 엔진이 담당하지만, 호출 스케줄링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저/Node.js가 담당한다

이벤트 루프

콜스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)이 있는지 반복해서 확인한다
콜스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 대기 중인 함수를 순차적으로(FIFO) 콜스택으로 이동시킨다. ⇒ 태스크 큐에 일시적으로 보관되는 함수들은 비동기 처리 방식으로 동작한다.

자바스크립트는 싱글스레드 방식으로 동작한다.
브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진이 싱글스레드 방식으로 동작하는 것으로, 브라우저는 멀티스레드로 동작하며 호출 스케줄링을 처리한다.

만약 호출 스케줄링을 위한 타이머 설정까지 자바스크립트 엔진이 담당한다면 대기 시간동안 어떤 태스크도 실행할 수 없다.(즉 비동기로 동작할 수 없다)

예를 들어 setTimeout함수에서 타이머 기능과 타이머가 만료되었을 때 콜백함수를 태스크 큐에 등록하는 일은 브라우저에서 실행하고, 현재 실행 컨택스트의 실행과 병행 처리된다(멀티스레드)

자바스크립트는 싱글스레드 방식으로 동작하지만 비동기로 동작할 수 있다는게 어떤 의미인지 잘 이해하지 못했었는데, 브라우저가 호출 스케줄링을 처리하고 동시에 자바스크립트 엔진이 코드를 실행하는 멀티 스레드방식으로 동작한다는 사실을 이해했다
이렇게 비동기적으로 실행되어야하는 비동기함수는 브라우저에서 제공하는 WebAPI(DOM API, 타이머, Ajax등)에만 있을까? ECMAScript 사양에 정의된 함수 중에는 비동기 함수가 없나?
- Promise[ECMAScript 6(ES6], async/await[ECMAScript 8(ES8)]
- 브라우저/Node의 도움을 받아야만 비동기처리를 할 수 있는데 비동기 함수가 ECMAScript에도 등록되어있다면, 자바스크립트는 자바스크립트 엔진 뿐 아니라 다른 환경(브라우저,Node등)의 도움을 받으면서 실행되도록 설계된 언어인가?
  - 자바스크립트는 브라우저와 Node말고도 React Native, Electron, Deno 등등 많은 환경에서 실행가능하며, 각 환경은 자바스크립트 엔진 말고도 비동기처리를 포함해 수행할 수 있는 런타임 환경이 존재한다.