비동기 프로그래밍 (모던 자바스크립트 Deep Dive)

 

42.1 동기 처리와 비동기 처리

• 자바스크립트 엔진은 하나의 실행 컨텍스트 스택을 갖는다.
  • 동시에 2개 이상의 함수를 실행할 수 없다.
  • 하나의 태스크만 실행할 수 있다 → 싱글 스레드
• 자바스크립트 엔진은 싱글 스레드 방식으로 동작한다.
  • 처리 시간이 걸리는 태스크 실행시 블로킹(작업 중단)이 발생한다.
  • 실행 중인 태스크가 종료할 때까지 다음에 실행도리 태스크가 대기하는 방식을 동기 처리 라고 한다.
    • 순서가 보장되지만 블로킹되는 단점
• 태스크를 블로킹하지 않고, 곧바로 다음 태스크를 실행하는 방식을 비동기 처리라고 한다.
  • 블로킹은 되지 않지만 순서가 보장되지 않는다.
  • 흔하게 콜백 패턴이 사용된다.
    • 가독성 저하와, 콜백 헬, 예외 처리 어려움 등의 단점이 있다.
• setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 → 비동기 처리 방식을 동작

 

42.2 이벤트 루프와 태스크 큐

• 이벤트 루프 : 자바스크립트의 동시성을 지원한다.
  • 브라우저에 내장되어 있는 기능
• 구글의 V8 자바스크립트 엔진 = 힙 + 콜 스택 영역 구분
  • 콜 스택: 실행 컨텍스트 스택
  • 힙: 객체가 저장되는 메모리 공간
• 자바스크립트 엔진에서는 콜 스택을 통해 소스코드 평가와 실행을 담당한다.
• 나머지는 브라우저 환경이나 Node.js에서 이뤄진다.
• 브라우저 환경은 아래를 제공한다.
  • 태스크 큐
    • 비동기 함수의 콜백 함수나 이벤트 핸들러가 일시적으로 보관된다.
    • 프로미스 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.
  • 이벤트 루프
    • 콜 스택에 실행 중인 현재 실행 컨텍스트 확인, 태스크 큐에 대기 중인 함수가 있는지 주기적으로 확인한다.
    • 콜 스택이 비어 있고, 태스크 큐에 대기 중인 함수가 있으면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
    • 태스크 큐에 보관된 함수들은 비동기적으로 동작한다.

function foo() {
	console.log('foo');
}

function bar() {
	console.log('bar');
}

setTimtout(foo, 0);
bar();

• 전역 코드가 평가되어 콜 스택에 쌓인다.
• 전역 코드의 실행이 이루어진다.
  • setTimeout 함수의 실행 컨텍스트가 생성되고 콜 스택에 쌓인 후 팝된다.
    • 이때 타이머에 대한 설정과 콜백 함수 foo 가 태스크 큐에 푸시된다. → 브라우저
• setTimeout의 타이머 만료를 기다리며 bar 함수가 콜 스택에 쌓이고 팝된다.
• 전역 코드가 실행 완료되고 전역 코드가 팝된다.
• 이벤트 루프에 의해 콜 스택이 비어있음이 감지되면 태스크 큐에서 foo 함수가 실행 컨텍스트가 생성되어 콜 스택에 푸시되어 실행된다.
• 콜 스택의 상황에 따라 setTimeout 같이 시간을 지정해놓은 함수가 정확하게 시간 뒤에 실행된다는 보장은 없다. 명시적으로 호출된 함수가 모두 종료되어야 태스크 큐의 함수가 실행된다.
• 자바스크립트의 싱글 스레드 방식은 브라우저에 내장된 자바스크립트의 엔진에 한정한다.
• 자바스크립트 엔진은 싱글 스레드지만, 브라우저는 멀티 스레드로 동작한다.