브라우저는 자바스크립트를 해석하지 못하기 때문에 JS 해석기가 필요하다. 이 해석기의 역할을 자바스크립트 엔진이 수행하며 가장 유명한 엔진으로는 구글의 V8 엔진이 있다.
자바스크립트 엔진
자바스크립트 엔진은 크게 두 가지로 구성된다.
- 메모리 힙 (Memory Heap) - 메모리가 할당되는 곳
- 콜 스택 (Call Stack) - 코드가 실행됨에 따라 스택 프레임이 생기는 곳
콜 스택 (Call Stack)
- 자바스크립트는 싱글 쓰레드 기반 언어이다. 이 말은 하나의 콜 스택을 가지고 있단 뜻이기 때문에 한 번에 한 가지 일밖에 처리하지 못한다.
- 콜 스택은 기본적으로 프로그램 상에서 우리가 어디에 위치하고 있는지 기록하는 자료구조이다. 어떤 함수가 실행될 때, 그 함수는 자바스크립트 엔진의 콜 스택 가장 위에 쌓인다. 그리고 함수 내부에서 return이 발생하면 호출 스택에서 사라지게 된다.
- 콜 스택에 쌓이는 entry (호출 함수 등)를 스택 프레임 (Stack Frame)이라고 한다.
- 콜 스택이 수용할 수 있는 스택 프레임의 사이즈에는 한계가 있기 때문에 콜 스택에 스택 프레임이 꽉 차게 되면 브라우저가 스택을 날려버리는 스택 날려버리기 (Blowing the stack)가 일어난다. 이를 보완하기 위해 비동기 콜백 (asynchronous callback)을 이용하는 것이다. 또한, 자바스크립트가 동시에 여러가지 일을 하도록 도와주는 이벤트 루프 (Event Loop)도 있다.
이벤트 루프 (Event Loop)
- 이벤트 루프는 자바스크립트 앱 안에서 동시에 여러가지 일이 실행되도록 핸들링 역할을 한다.
- 자바스크립트 코드 실행 중 이벤트를 만나면 콜백 큐 (Callback Queue)에 순서대로 쌓는다. 이후, 콜 스택 (Call Stack)이 비면, 콜백 큐 (Callback Queue)에서 첫 번째 이벤트를 가지고 와서 밀어넣는다. 이벤트 루프는 이 작업을 반복한다.
자바스크립트 런타임
- 자바스크립트 엔진을 비롯하여 자바스크립트를 실행되게 하는 환경이다.
- 브라우저의 Web APIs, 이벤트 루프 (Event Loop), 콜백 큐 (Callback Queue)로 구성된다.
웹 프론트엔드 개발자입니다.