1. 엔진이란?
JavaScript 코드를 실행하는 프로그램
대부분의 웹 브라우저는 JavaScript 엔진이 내장되있기 때문에,
동적 기능을 처리한다.
이 엔진은 JavaScript 코드를 읽고 분석한 다음,
실행 가능한 머신 코드로 변환한다.
브라우저 / 서버 환경마다 엔진은 다르게 구현이 된다.
- Chrome / Node.js, Edge, Opera, Brave -> V8 엔진 사용
- Mozilla -> SpiderMonkey 엔진 사용
- Safari -> JavaScriptCore 엔진 사용
- Edge(구버전) -> Chakra 엔진 사용
위와 같이 동일한 JavaScript 코드도 엔진에 따라
내부에서 처리하는 방식이 다르게 쓰인다는 것이 보인다.
엔진은 그러면 어떻게 작동하게 될까?
기본 원리는 아래와 같이 간단하게 작성을 해보자면,
1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽음(파싱)
2. 읽어 들인 스크립트를 기계어로 변환(컴파일)
3. 기계어로 전환된 코드가 실행 -> 기계어로 변환되었기 때문에
실행 속도가 빠름
자바스크립트 대표적인 엔진의 예시는 Google V8 엔진이다.
Chrome과 Node.js에서 사용하는데 아래의 사진은
엔진의 간단한 구조 그림이다.
엔진의 주요 구성요소는,
- Memory Heap : 메모리 할당이 일어나는 곳
- Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳
런타임
DOM, Ajax, setTimeout 과 같이 브라우저에서 제공하는 API를,
Web API 라고 불린다. 단순히 하나의 엔진만 구성되어 있지 않다.
아래쪽에 이벤트 루프와 콜백 큐도 존재하는데,
이는 Web API 의 호출을 제어하기 위함이다.
모든 자바스크립트 개발자들이 setTimeout 과 같은 브라우저 내장 API를 사용한다.
하지만, 이 API를 자바스크립트 엔진은 제공하지 않는다.
호출 스택(Call Stack)
자바스크립트는 기본적으로 싱글 스레드 기반 언어이다. 즉, 이 말은
호출 스택이 하나를 의미한다는 말 -> 한 번에 하나씩 작업을 처리함
호출 스택은 기본적으로 우리가 프로그램 상 어디에 있는지 기록하는 자료구조이다.
만약에 함수를 실행한다면, 해당 함수는 호출 스택의 가장 상단에 위치한다.
함수 실행이 끝날 때(Return값이 반환될 때), 해당 함수를 호출 스택에 제거하고,
그것이, 스택의 역할이다.
2. 결론
JavaScript 엔진은 JavaScript 코드를 실행을 도와주는 프로그램이고,
브라우저 또는 서버 환경마다 같은 코드일지라도,
내부에서 처리하는 방식이 달라질 수 있다.
출처
