JS 엔진의 구조와 작동원리 (JS 런타임 환경까지)

⚙️자바스크립트 엔진이란?

JavaScript 엔진은 JavaScript 코드를 실행하는 소프트웨어 컴포넌트이다. 대표적인 예로 구글 크롬의 V8 엔진, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore (Nitro) 등이 있다. JS 엔진은 웹 브라우저나 Node.js와 같은 런타임 환경에서 사용된다.

좀 더 자세하게 알기 위해 위키피디아의 글을 인용하였다.

자바스크립트 엔진 (JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.
자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일 을 할 수 있다.
여러 목적으로 자바스크립트 엔진을 사용하지만, 대체적으로 웹 브라우저에서 사용된다.

JS 엔진이 코드를 실행하는 인터프리터라느 것은 알았는데 또 JIT는 무엇일까..?

JIT는 "Just-In-Time"의 약자로 프로그램이 실행되는 동안(실행시점)에 소스코드를 기계어로 컴파일하는 기술이다.

JIT를 사용함으로 성능 최적화와 동적 최적화가 된다는 장점이 있다. JIT에 대해서는 다른 포스팅에서 더 자세히 다루고 다시 JS 엔진에 대한 내용으로 넘어가도록 하겠다..

JIT 내용만 해도 글이 너무 길어지네요..ㅎ

 

주요 JS 엔진의 종류

JS 엔진은 다양한 종류가 있으며 각각 엔진은 특정 브라우저 또는 환경에 특화되어 있다. 대표적인 JS 엔진은 아래와 같다.

 

V8 (Chrome, Node.js)

• Google에서 개발한 오픈소스 엔진이다.
• C++로 개발되었으며 빠른 실행 속도와 높은 성능을 갖추고 있다.
• 주로 Chrome 브라우저와 Node.js 런타임 환경에서 사용된다.

SpiderMonkey (FireFox)

• Mozilla에서 개발한 엔진이다.
• 최초의 자바스크립트 엔진으로 안정성과 호환성에 중점을 둔 엔진이다.
• 주로 Firefox 브라우저에서 사용된다.

JavaScriptCore (Safari)

• Apple에서 개발한 엔진으로 Nitro 또는 SquirrelFish Extreme라는 이름으로도 알려졌다.
• MacOS 및 iOS 환경의 Safari 브라우저에서 사용된다.

Chakra (Microsoft Edge Legacy)

• Microsoft에서 개발한 엔진이다.
• 이전 버전의 Microsoft Edge 브라우저에서 사용된다.
• 현재는 Chromium 기반 Edge 브라우저에서 V8 엔진을 사용한다.

Hermes (React Native)

• Facebook에서 개발한 엔진이다.
• 모바일 환경에서의 빠른 시작 시간과 적은 메모리 사용량에 최적화하는 장점이 있다.
• React Native 애플리케이션에서 사용된다.

JS 엔진의 주요 구성 요소

콜 스택 (Call Stack)

역할 : 함수 호출 순서를 관리하고 현재 실행 중인 함수의 정보를 저장하는 자료구조이다.동작 구조 : 스택 형태로 동작하며 함수가 호출될 때마다 해당 함수의 실행 컨텍스트가 스택에 추가되고 함수 실행이 완료되면 스택에서 제거 된다. (추가와 제거의 순서는 LIFO로 동작)

💡용어 설명
실행 컨텍스트(Execution Context) : 함수 실행에 필요한 정보(변수, 매개변수 등)을 담고 있는 객체
LIFO(Last-In-First-Out) : 선입선출 방식으로 가장 마지막에 추가된 함수가 가장 먼저 실행되고 제거되는 방식

 

메모리 힙 (Memory Heap)

역활 : 객체, 배열, 함수 등 동적으로 생성되는 데이터를 저장하는 메모리 공간이다.

구조 : 힙은 상대적으로 크고 구조화되지 않은 메모리 영역으로 필요에 따라 메모리를 할당하고 해제한다.

가비지 컬렉션 : 사용되지 않는 객체를 자동으로 찾아 제거하여 메모리 누수를 방지한다.

 

런타임 환경

JS 런타임 환경은 자바스크립트 엔진이 코드를 실행하는 데 필요한 추가적인 기능들을 제공한다.

여기에는 이벤트 루프, 콜백 큐, Web API (브라우저 환경), setTimeout, setInterval 등이 포함된다.

JS 엔진의 동작원리를 더 자세히 이해하기 위해서는 JS 런타임 환경 또한 따져봐야 할 필요가 있다.

 

이벤트 루프 (Event Loop)의 역할

이벤트 루프는 JS 엔진과 런타임 환경의 다리 역할을 한다. JS 엔진은 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리가 가능한데 이벤트 루프는 비동기 작업(타이머, 네트워크 요청, 사용자 이벤트 등)이 완료될 때까지 기다렸다가 완료되면 해당 작업의 콜백 함수를 콜백 큐에 추가한다. 콜 스택이 비어있다면 이벤트 루프는 콜백 큐에서 콜백 함수를 꺼내 콜 스택에 추가하여 콜백 함수를 실행한다.

 

아래 영상을 참고한다면 JS 엔진과 런타임 환경의 동작 원리에 대해 이해가 더 쉬울 것 같다.

 

이벤트 루프 동작 원리 참고 영상

 

여기까지 JS 엔진과 런타임 환경에 대해 알아봤습니다.

잘못된 정보 수정 또는 정보 추가를 원하시면 댓글 또는 메일 부탁드립니다.

참고 문헌

How JavaScript works: an overview of the engine, the runtime, and the call stack

자바스크립트 엔진 - 위키백과, 우리 모두의 백과사전