자바스크립트는 싱글 스레드로 동작하기 때문에 한 번에 하나의 태스크만 처리할 수 있습니다. 이는 자바스크립트가 동기적으로 코드를 실행하는 방식을 의미합니다. 그러나 우리가 브라우저에서 웹 애플리케이션을 사용할 때 여러 작업이 동시에 처리되는 것처럼 느껴집니다. 지금부터 왜 그렇게 보이는지 알아보도록 하겠습니다.
브라우저 환경
브라우저에 내장된 자바스크립트 엔진은 대부분 콜 스택(실행 컨텍스트 스택)과 힙으로 나뉘어 있습니다. 콜 스택은 소스 코드 평가 후 생성된 실행 컨텍스트가 추가되어 순차적으로 태스크를 수행합니다. 힙은 객체가 저장되는 공간으로 태스크 실행 도중 필요한 객체들을 포함합니다.
비동기 처리에서 소스 코드 평가와 실행을 제외한 모든 작업은 자바스크립트 엔진을 작동시키는 브라우저가 담당합니다. 이를 위해 브라우저에서는 태스크 큐와 이벤트 루프를 제공합니다.
비동기 처리 동작 과정
비동기 함수가 호출되면 해당 함수의 작업은 백그라운드에서 처리됩니다. 이 작업이 완료되면 콜백 함수가 이벤트 루프를 통해 콜 스택으로 이동되어 실행됩니다. 이때 콜 스택이 비어있지 않으면 콜백 함수는 태스크 큐에서 대기하게 됩니다.
이벤트 루프는 콜 스택과 태스크 큐를 모니터링하면서, 콜 스택이 비어있고 대기 중인 콜백 함수가 있을 때마다 해당 함수를 콜 스택으로 이동시킵니다.
자바스크립트 엔진의 싱글 스레드 동작은 이러한 비동기 처리를 가능케 합니다. 즉, 단일 스레드에서 비동기적으로 작업을 처리하면서도 다른 작업은 브라우저의 다른 스레드에서 동시에 처리됩니다. 이는 브라우저가 멀티 스레드로 동작하기 때문입니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 42_비동기 프로그래밍(p.812 - 815)