[Javascript] 런타임 작동 방식

 
 
이번 글에서는 Javascript 런타임에 대하여 알아보겠습니다.
Javascript 런타임은 Javascript가 구동되는 환경을 말합니다. 즉, Javascript 런타임은 Javascript 코드를 해석하고 실행하며, 필요한 리소스와 API를 제공하여 코드가 다양한 작업을 수행할 수 있게 합니다. Javascript 런타임 구성 요소는 다음과 같습니다.
 
 

1. 엔진

Javascript 코드를 실행하는 핵심 구성 요소입니다. 가장 유명한 Javascript 엔진 중 하나는 구글의 *V8엔진으로, Chrome과 Node.js에서 사용됩니다. 브라우저마다 다른 엔진을 사용할 수 있으며 Edge, IE는 Chakra라는 엔진을 사용하고 있습니다. 이러한 엔진은 Javascript 코드를 해석하고 실행하는 역할을 합니다.
 

*V8
구글에서 개발한 오픈소스 Javascript 엔진으로, Javascript 코드의 실행을 담당하는 핵심 구성 요소 중 하나입니다. V8은 C++로 작성되었으며 주요 특징과 기능은 아래와 같습니다.

• 높은 성능: *JIT(Just-In-Time) 컴파일러를 사용하여 Javascript 코드를 빠르게 컴파일하고 실행합니다. 이로 인해 Javascript 코드가 브라우저나 Node.js에서 빠르게 실행됩니다.
• 메모리 관리: 자동 메모리 관리를 지원하며, *가비지 컬렉션을 통해 더 이상 필요하지 않은 객체를 정리합니다.
• 최적화 및 인라인 캐싱: 코드 최적화 및 인라인 캐싱을 통해 코드 실행 성능을 향상시킵니다.
• 클로저 최적화: 클로저를 효율적으로 처리하며, 함수 및 변수 스코프에 대한 최적화를 수행합니다.
• 웹 어셈블리 지원: 최근의 V8 엔진 버전은 WebAssemby를 지원하여 웹 브라우저에서 고성능 웹 어셈블리 코드를 실행할 수 있게 합니다. (웹 어셈블리: C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 형식)

*JIT 컴파일러: 코드를 실행하기 전에 실시간으로 기계 코드로 번역하므로 실행 속도를 향상시키고 최적화를 가능하게 합니다.
*가비지컬렉션: 프로그램에서 더 이상 사용되지 않는 메모리를 자동으로 회수하는 과정을 말합니다.

 

2. 실행 컨텍스트(Execution Context)

실행 컨텍스트는 코드가 실행될 때 생성되며, 현재 실행중인 코드에 대한 정보를 포함합니다. 이 컨텍스트에는 변수, 함수, 스코프, this 등이 저장됩니다.
[Javascript] ES6 Execution Context (실행 컨텍스트) 정리
 
 

3. 콜 스택(Call Stack)

콜 스택은 현재 실행중인 함수 호출 및 실행 컨텍스트를 추적하는 데이터 구조입니다. 함수가 호출될 때 콜 스택에 쌓이고, 함수가 종료되면 콜스택에서 제거됩니다. 이를 통해 코드의 실행 흐름을 추적하고 관리할 수 있습니다. 콜 스택은 함수 호출, 함수 반환, 재귀 호출의 동작을 가지고 있습니다.
 
- 함수 호출: 코드에서 함수가 호출되면 현재 실행 중인 함수의 컨텍스트가 콜 스택에 Push됩니다. 이 컨텍스트는 함수의 지역 변수, 매개 변수 및 실행 위치와 관련된 정보를 포함합니다.
- 함수 반환: 함수가 실행을 완료하면 해당 함수의 컨텍스트가 콜 스택에서 Pop되어 제거됩니다. 반환된 값은 호출한 코드에 반환됩니다.
 
1. 함수 A 호출 -> 콜 스택: [A]
2. 함수 B 호출 -> 콜 스택: [A, B]
3. 함수 C 호출 -> 콜 스택: [A, B, C]
4. 함수 C 종료 -> 콜 스택: [A, B]
5. 함수 B 종료 -> 콜 스택: [A]
6. 함수 A 종료 -> 콜 스택: []
 
콜 스택의 크기에는 제한이 있으며, 스택 오버플로우 오류는 스택이 너무 깊이 쌓일 때 발생합니다. 이를 방지하기 위해 재귀 호출 및 무한 루프를 사용할 때 주의해야 합니다.
 
 

4. 웹 API 및 이벤트 루프

브라우저 환경에서 Javascript 런타임은 DOM 조작, AJAX 요청, 타이머 및 이벤트 처리와 같은 추가 기능을 제공하는 웹 API와 함께 작동합니다. 브라우저에서는 이벤트 루프가 비동기 작업을 관리하며, 콜백 함수를 실행하여 비동기 코드를 처리합니다. 이벤트 루프는 아래에서 자세히 보겠습니다.

메시지 큐
이벤트 루프는 메시지 큐라고 불리는 대기열을 감시합니다. 메시지 큐에는 비동기 작업과 이벤트(예: 타이머 이벤트, 네트워크 요청 완료, 사용자 입력)가 들어오며, FIFO(선입선출) 방식으로 처리됩니다.

이벤트 루프(Event Loop)
이벤트 루프는 콜 스택이 비어 있을 때만 작동합니다. 콜 스택이 비어 있다면 메시지 큐에서 다음 이벤트를 가져와 콜 스택에 push합니다.

이벤트 루프의 기본 동작은 다음과 같습니다
- 콜 스택이 비어 있다면, 이벤트 루프는 메시지 큐에서 다음 이벤트를 가져와 콜 스택에 추가합니다.
- 해당 이벤트에 연결된 함수 또는 콜백이 실행되고, 그 결과가 콜 스택에서 처리됩니다.
- 다시 콜 스택이 비어 있을 때까지 이 과정을 반복합니다.

이벤트 루프를 통해 비동기 작업 및 이벤트 처리를 효율적으로 관리하고, 자바스크립트와 Node.js와 같은 환경에서 높은 응답성을 유지할 수 있습니다. 이것은 네트워크 요청, 파일 I/O, 타이머, 사용자 입력과 같은 비동기 작업을 효과적으로 처리하는데 사용됩니다. 이러한 비동기 작업을 통해 블로킹을 피하고 프로그램이 지속적으로 실행될 수 있습니다.
 
 

5. 힙(Heap)

힙은 동적으로 할당된 메모리를 저장하는 공간으로, 객체와 변수 데이터가 여기에 저장됩니다.
 
 

6. 스코프(Scope)

스코프는 변수 및 함수 식별자의 유효 범위를 나타냅니다. 스코프는 렉시컬 스코프와 동적 스코프로 나뉠 수 있으며, 변수의 접근성을 제어합니다.