비동기 프로그래밍

정진원·2023년 1월 25일

모던 자바스크립트 Deep Dive

목록 보기

13/16

Chapter 42

42.1 동기 처리와 비동기 처리

자바스크립트 엔진은 하나의 실행 컨텍스트 스택을 갖는다. 즉, 싱글 스레드 방식으로 동작하기 때문에 한 번에 하나의 태스크만 실행할 수 있다.
현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기처리 라고 한다.
하나의 태스크만 실행할 수 있기 때문에 처리 시간이 오래 걸리는 태스크를 실행하는 경우 블로킹이 발생한다.
현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기처리라고 한다.
비동기 처리를 위해 콜백 패턴을 많이 사용했지만 가독성과 예외처리 문제 때문에 Promise와 같은 방법이 탄생했다.

42.2 이벤트 루프와 태스크 큐

이벤트 루프 과정에서 언급되는 여러 용어에 대해 정리한다.
우선 자바스크립트 엔진의 영역에 대한 용어에 대해 정리한다.

콜 스택 : 평과 과정에서 생성된 실행 컨텍스트가 추가, 제거되는 스택이다.
자바스크립트 엔진은 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되야 다른 태스크가 실행된다.
힙 : 객체가 저장되는 메모리 공간이다.
메모리에 값을 저장하려면 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 크기가 정해져 있지 않기 때문에 메모리 공간의 크기를 동적 할당해야 한다. 즉, 힙은 구조화 되어있지 않다.

다음은 비동기를 위해 브라우저 환경이 제공하는 것들이다.

태스크 큐 : 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
이벤트 루프 : 콜 스택이 비어있고 태스크 큐에 대기중인 함수기 았으면 순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동시킨다.

예시 코드와 그림으로 자세히 살펴보겠다.

console.log("Hi!");

setTimeout(function timeout() {
    console.log("Click the button!");
}, 1000);

console.log("Welcome to loupe.");

console.log("Hi!")가 실행되어 Call Stack으로 들어간다. 그 후, 콘솔을 출력하고 해당 함수는 종료된다.
setTimeout 함수가 실행되어 Call Stack으로 들어간다.
setTimeout 함수가 종료되고 timeout이라는 콜백함수가 Web API에서 1초간 대기한다.
timeout에 관계 없이 다음 함수인 console.log("Welcome to loupe.")가 실행되어 Call Stack에 올라간다.
1초가 지나서 timeout 함수가 Callback Queue로 올라간다.
console.log("Welcome to loupe.")가 실행이 끝나고, Call Stack이 빈다.
Callback Queue에 있던 timeout 함수를 이벤트 루프가 Call Stack으로 옮긴다.
timeout함수가 실행되고, 함수 내부에 있던 console.log("Click the button!")이 실행되어 Call Stack에 올라간다.
console.log("Click the button!")의 실행이 끝난 뒤, timeout 함수도 종료된다.