자바스크립트란?
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어로 웹 브라우저뿐 아니라 Node.js와 같은 서버 프로그래밍에도 사용된다. 1996년에 나온 언어임에도 불구하고 새로운 Spec이 꾸준히 발표되고, 표현력 높은 코드를 작성할 수 있어 현재까지도 많은 개발자의 사랑을 받고 있다.
자바스크립트는 싱글 스레드(Single thread) 언어로 메인 스레드가 하나다. 그래서 자원 접근에 대한 통제를 제어할 필요가 없지만, 현재 진행 중인 작업이 끝날 때까지 다음 작업이 대기하는 블로킹이 발생할 수 있어 전체 시스템 성능에 영향을 주는 단점이 존재한다.
이러한 단점을 보완하기 위해 자바스크립트 런타임 환경을 구성해서 시간이 오래 걸리는 작업에 대해서는 별도의 처리를 통해 다음 작업을 바로 수행하는 비동기 처리를 구현한다.
이 글에서 자바스크립트 엔진과 자바스크립트 런타임에 대해 알아보고 어떻게 비동기 처리를 수행하는지 살펴보자.
자바스크립트 엔진
자바스크립트 코드를 실행하는 프로그램으로 인터프리팅(Interpreting)과 엔진에 따라 JIT 컴파일을 수행한다.
JIT(Just In Time) 컴파일이란 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법으로, 대부분의 자바스크립트 엔진의 경우 코드를 인터프리터 방식으로 실행하고 필요에 따라 컴파일을 수행한다.
종류
- V8: 구글에서 개발한 엔진으로 C++로 작성되었고, 구글 Chrome과 Node.js에서 사용
- Chakra: 마이크로소프트에서 개발한 엔진으로 Edge 브라우저에서 사용
- JavaScript Core: 애플에서 개발한 엔진으로 Safari와 React Native App에서 사용
구성요소
- 메인 스레드 (Main Thread) : 코드 분석, 컴파일과 실행을 담당
- 메모리 힙 (Heap) : 동적으로 생성되는 객체들을 할당하는 곳으로 구조화되지 않은 메모리 영역
- 콜 스택 (Call Stack) : 함수가 실행될 때마다 해당 함수에 대한 스택 프레임이 쌓이고 함수가 종료될 때마다 스택에서 제거되는 메모리 영역
동작방식
- 자바스크립트 엔진은 단일 콜 스택을 가지고 있고, 따라서 한 번에 하나의 함수만 처리할 수 있다. 다음의 코드를 살펴보자.
function sayBye() { console.log("bye"); } function sayHello(x) { console.log("hello"); sayBye(); } sayHello();
자바스크립트 엔진이 위의 코드를 실행하면 호출 순서대로 콜 스택에 쌓이고 각 함수 호출이 끝나면 콜 스택에서 삭제된다.
자바스크립트 런타임
위에서 살펴보았듯이 자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 비동기 작업을 지원하지 않는다. 따라서 비동기 처리를 위해서는 자바스크립트 엔진에 추가적인 요소를 구성하는데, 이를 자바스크립트 런타임이라 부른다.
대표적인 자바스크립트 런타임 환경에는 브라우저와 Node.js가 있다. 지금부터 브라우저의 구성요소를 살펴보고 비동기 작업을 어떻게 수행하는지 확인해보자.
구성요소
Web API
- Web API는 브라우저에서 지원하는 API이다.
- DOM 이벤트, AJAX, setTimeout 등 비동기 작업들을 수행할 수 있는 API를 제공해서 HTTP 요청을 보내거나 DOM 이벤트를 듣거나, 실행을 지연시키는 작업을 수행한다.
- 크롬 브라우저 콘솔에 window를 입력하면 브라우저에 내장된 객체를 확인할 수 있는데 이것이 Web API이다.
- Web API를 이용해 백그라운드에서 비동기적으로 작업을 처리하고, 해당 작업을 마치면 콜 스택에 작업이 완료되었음을 알려주어 그 작업을 수행한다.
이벤트 루프 (Event Loop)
- 끊임없이 콜 스택과 태스크 큐(task queue) 모니터링을 담당한다.
- 콜 스택이 비어있을 경우, 태스크 큐에 쌓여있는 작업들을 콜 스택에 전달하여 해당 작업이 처리되도록 전달한다.
- Web API가 일을 먼저 처리해도 콜 스택에 처리할 작업이 있으면 이벤트 루프는 태스크 큐의 작업을 콜 스택에 전달하지 않는다.
콜백 큐 (태스크 큐)
- Web API에서 비동기 작업이 실행된 후 호출되는 콜백 함수가 대기하는 공간이다.
- 콜백 함수들은 쌓인 순서대로 실행되지 않고 우선순위에 따라 실행된다.
- 태스크 큐는 Microtask Queue, Animation Frames 등 여러 개의 큐로 이루어져 있다.
동작방식
- 콜 스택에 적재된 작업이 비동기 작업이면 Web API에 해당 작업을 전달한다.
- Web API는 해당 작업을 처리하고 콜백 함수를 콜백 큐에 전달한다.
- 콜 스택이 비어있으면 이벤트 루프는 콜백 큐에 작업을 하나씩 콜 스택에게 전달해서 나머지 작업을 처리한다.
다음 코드로 비동기 방식을 확인할 수 있다.
console.log('1');
setTimeout(function() {
console.log('2');
}, 1000);
console.log('3');
1. console.log(‘1’) 함수가 실행되면 콜 스택에 적재된다.
2. 자바스크립트 엔진이 처리를 완료하면 해당 함수는 콜 스택에서 제거된다.
3. setTimeout 함수가 실행되면 콜 스택(Call Stack)에 적재된다.
4. setTimeout 함수는 비동기 함수이므로 Web API로 전달되고 해당 함수는 콜 스택에서 제거된다.
5. console.log(‘3’) 함수가 실행되면 콜 스택에 적재된다.
6. 자바스크립트 엔진이 처리를 완료하면 해당 함수는 콜 스택에서 제거된다.
7. Web API는 해당 함수를 처리하고 완료 후 콜백 함수를 콜백 큐에 전달한다.
8. 이벤트 루프는 콜 스택에 더 이상 처리할 작업이 없으면 콜백 큐에 있는 함수를 콜 스택에 전달하고 콜백 함수가 콜 스택에 적재된다.
9. 자바스크립트 엔진이 처리를 완료하면 해당 함수는 콜 스택에서 제거된다.
위의 예시를 통해서 자바스크립트 런타임 환경이 어떻게 비동기 작업을 처리하는지 확인해 보았고, 위의 과정을 http://latentflip.com/loupe/ 에서 애니메이션으로 확인할 수 있다.
결론
지금까지 자바스크립트 엔진과 런타임 환경의 구성요소 및 동작 방식에 대해 살펴보았다. 또한, 런타임 환경에서 자바스크립트가 어떻게 비동기 방식으로 동작하는지 코드를 통해 확인할 수 있었다.
다음 글에서는 자바스크립트 런타임 환경 구성요소인 이벤트 루프와 태스크 큐에 대해서 알아보겠다.
