jeong-min.com
🏃
Dev

자바스크립트 엔진: "어, 아직 싱글이야" | JS 런타임에 대해 알아보자

2023.09.06

자바스크립트 엔진과 런타임에 대해 이야기하기 전에, 자바스크립트 자체가 무엇인지 이해하는 것도 중요하다! 자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 브라우저에서 실행되는 스크립트 언어다. 실제로 자바스크립트는 웹 브라우저뿐만 아니라 다양한 환경에서 실행될 수 있으며, 이때 코드가 실행되는 환경을 “런타임(runtime)“이라고 한다. 특히 자바스크립트 엔진과 브라우저 런타임은 웹 개발에서 핵심 역할을 하는 주요 구성 요소다. 이 두 가지는 웹 애플리케이션의 동작과 성능에 중요한 영향을 미친다.

 

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 핵심 구성 요소다. 가장 널리 사용되는 자바스크립트 엔진 중 몇 가지를 살펴보도록 하자.

  1. V8 (Google Chrome, Node.js)
    V8은 Google에서 개발한 자바스크립트 엔진으로, Chrome 브라우저와 Node.js에서 사용된다. V8은 JIT(Just-In-Time) 컴파일러를 사용하여 빠른 실행 성능을 제공한다.

  2. SpiderMonkey (Mozilla Firefox)
    Mozilla Firefox에서 사용되는 엔진이다.

  3. JavaScriptCore (Apple Safari)
    Safari 브라우저에서 동작하는 엔진으로, Nitro라고도 불린다. 모바일 기기 및 macOS의 Safari 브라우저와 Bun에서 사용된다. (Bun이 궁금하다면?)

  4. Chakra (Microsoft Edge, Internet Explorer)
    Microsoft의 Edge 브라우저와 이전 버전의 Internet Explorer에서 사용되는 엔진이다.

자바스크립트 엔진마다 코드를 해석하고 실행하기 위한 내부 동작 및 최적화 방법을 다를 수 있으며, 이로 인해 브라우저 간의 성능 차이가 발생할 수 있다.

0

 

자바스크립트 런타임

자바스크립트 런타임에도 다양한 종류와 버전이 있으며, 각각의 런타임은 자바스크립트 코드를 실행하는 환경과 규칙을 정의한다.

  1. 브라우저
    웹 브라우저에서 실행되는 자바스크립트 코드를 처리하는 환경이다. 브라우저 런타임은 DOM(Document Object Model) 조작, 이벤트 처리, AJAX 요청 등과 같은 웹 브라우저 관련 기능을 제공한다.

  2. Node.js
    서버 측 자바스크립트 실행을 가능하게 하는 환경으로, 브라우저 외부에서 자바스크립트를 실행할 수 있게 한다. Node.js는 파일 시스템 액세스, 네트워크 통신, 데이터베이스 액세스와 같은 서버 측 작업을 처리할 수 있다.

  3. React Native
    모바일 앱 개발을 위한 환경으로, 자바스크립트와 React 라이브러리를 사용하여 iOS와 Android 앱을 개발할 수 있게 해준다.

  4. Electron
    데스크톱 애플리케이션 개발을 위한 환경으로, 웹 기술을 사용하여 크로스 플랫폼 데스크톱 앱을 개발할 수 있게 해준다.

자바스크립트 런타임은 코드를 실행하고 관리하는 역할을 한다. 런타임은 자바스크립트 코드를 해석하고 실행하며, 필요한 환경 및 라이브러리에 접근할 수 있도록 해준다.

 

자바스크립트 엔진은 싱글스레드인가요, 멀티스레드인가요?

1

???: 근데 스레드가 뭐죠?
프로세스는 메모리 상에서 실행중인 작업을 뜻하는데, 이러한 프로세스 내의 실행 단위를 스레드라 한다.

자바스크립트 엔진은 하나의 콜 스택을 가지는 싱글스레드다. 하지만 실제로 자바스크립트의 작동은 웹 브라우저나 node.js와 같은 멀티스레드 환경에 임베디드되어 실행되기 때문에, 자바스크립트와 웹api, 이벤트루프 등을 분리하여 말하기는 어렵다.

즉 자바스크립트 엔진(V8 등)이 싱글스레드로 동작하고, 런타임환경(브라우저 등)이 멀티스레드를 제공한다고 볼 수 있다!

우리는 프론트엔드 개발자니까 (아마?) 브라우저 런타임에 대해서 좀 더 자세히 알아보도록 하자!

 

브라우저 런타임

브라우저 런타임은 브라우저 내에서 자바스크립트 코드를 실행하는 환경을 제공한다. 이 환경은 브라우저의 핵심 구성 요소 중 하나로, 웹 페이지의 DOM(Document Object Model)에 접근하고 수정하며, 이벤트 처리, 네트워크 요청, 쿠키 및 웹 스토리지와 같은 웹 기능을 관리한다.

브라우저 런타임의 구성 요소를 살펴보자!

  1. DOM (Document Object Model)
    웹 페이지의 구조를 표현하고 조작하기 위한 표준 인터페이스다. 자바스크립트는 DOM을 사용하여 HTML 요소에 접근하고 조작할 수 있다.

  2. BOM (Browser Object Model)
    브라우저의 창, 역사, 위치 정보와 같은 요소에 접근하기 위한 인터페이스다.

  3. 이벤트 처리
    자바스크립트는 웹 페이지에서 발생하는 이벤트(마우스 클릭, 키보드 입력 등)를 처리하고 반응할 수 있다.

  4. AJAX 및 네트워크 요청
    브라우저 런타임은 웹 서버와 데이터를 비동기적으로 교환하기 위한 기능을 제공한다. 이는 웹 애플리케이션의 동적 데이터 로딩에 중요하다.

  5. 쿠키와 웹 스토리지
    사용자 데이터를 로컬에 저장하고 관리하기 위한 방법을 제공한다.

2

그렇다면 자바스크립트는 브라우저 환경에서 어떻게 비동기 작업을 처리하는 걸까?

 

자바스크립트의 런타임 모델

3

자바스크립트의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다. 각각의 구성요소를 한 번 살펴보자!

  1. 자바스크립트 엔진
    자바스크립트 코드를 해석하고 실행하는 역할을 한다. 자바스크립트 엔진은 메모리 힙과 콜 스택 두 가지 주요 컴포넌트로 구성된다.

  2. 메모리 힙 (Memory Heap)
    동적으로 할당된 메모리를 저장하는 곳이다. 객체, 배열, 함수와 같은 자바스크립트 데이터 구조는 메모리 힙에 저장되며, 이러한 데이터는 가비지 컬렉션(Garbage Collection)에 의해 관리된다.

  3. 콜 스택 (Call Stack)
    함수 호출을 추적하는 자료 구조다. 자바스크립트는 함수 호출을 스택에 추가하고 완료되면 스택에서 제거한다. 이렇게 스택에 쌓이는 함수 호출은 순차적으로 실행되며, 이것이 자바스크립트의 실행 컨텍스트를 관리하는 중요한 부분이다.

  4. 웹 API
    브라우저 환경에서 제공되는 비동기 작업을 처리하기 위한 인터페이스 집합이다. 이 API들은 브라우저 기능을 활용하여 비동기 작업을 수행하며, 주로 네트워크 요청, 타이머 설정, DOM 조작 및 이벤트 처리와 관련된다. 대표적인 웹 API에는 setTimeout, fetch, XMLHttpRequest, addEventListener 등이 있다.

  5. 이벤트 루프 (Event Loop)
    자바스크립트의 비동기 동작을 관리하는 핵심 메커니즘 중 하나이다. 자바스크립트는 비동기 함수(타이머 콜백, 이벤트 핸들러 등)를 호출하고 해당 작업이 완료될 때까지 대기하지 않고 계속 실행된다. 이벤트 루프는 비동기 작업이 완료되면 콜백 함수를 콜 스택에 넣어 실행될 수 있도록 관리한다.

 

즉, 비동기함수 실행 과정은 다음과 같다.

  1. 콜 스택에서 비동기 함수가 실행되면, 자바스크립트 엔진은 브라우저에서 제공되는 웹api에게 비동기 작업을 위임한다.
  2. 웹 api는 해당 비동기 작업을 수행한 후, 콜백함수를 이벤트루프를 통해 콜백 큐에 넘겨준다.
  3. 이벤트루프는 콜 스택이 비어있을 때, 콜백 큐의 콜백함수를 콜 스택으로 넘겨준다.
  4. 콜백함수가 실행되고 콜 스택에서 제거된다.

싱글스레드 언어임에도 멀티스레드 환경에서 동작하기 때문에 블로킹이 일어나지 않고 여러 가지 일을 동시에 처리하는 것처럼 동작할 수 있다. 자바스크립트는 하나의 콜스택을 가지는 싱글스레드 기반으로 동작하는 스크립트 언어임에도, 이벤트 루프를 통한 비동기적인 콜백 작업이 가능하기 때문에 빠르게 동작할 수 있다.

👇 도움이 되셨다면 👇

B

u

y

M

e

A

C

o

f

f

e

e

© 2023 powered by danmin