자바스크립트 런타임과 자바스크립트 엔진의 동작 원리

 

 

자바스크립트 런타임과 엔진: 웹과 서버에서의 동작 원리

 

자바스크립트는 웹과 서버 양쪽에서 중요한 역할을 하는 언어다. 자바스크립트가 어떻게 실행되는지를 이해하기 위해서는 자바스크립트 런타임과 자바스크립트 엔진의 개념을 알아야 한다.

---

 

자바스크트 런타임: 엔진과 API

 

자바스크립트 런타임은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 자바스크립트 엔진과 **API(라이브러리 및 바이너리)**로 구성된다. 자바스크립트 런타임은 자바스크립트 코드를 기계어로 변환하고 실행하는 역할을 하며, 이 과정에서 필요한 API와 라이브러리를 함께 제공한다.

• 자바스크립트 엔진: 자바스크립트 코드를 읽고, 이를 기계어로 변환하여 실행하는 역할을 한다. 예를 들어, 구글 크롬의 V8 엔진이 대표적인 자바스크립트 엔진이다.
  • JS Engine + Web API: 웹 브라우저에서는 자바스크립트 엔진과 Web API가 결합되어 자바스크립트 코드를 실행한다. Web API는 DOM 조작, 타이머 설정, HTTP 요청 등 브라우저 환경에서 자주 사용하는 기능들을 제공한다.
  • Node.js = JS Engine + Node API: 서버 환경에서는 Node.js가 자바스크립트 엔진과 Node API를 결합하여 자바스크립트 코드를 실행한다. Node API는 파일 시스템 접근, 네트워킹, I/O 처리 등을 지원한다.

이처럼 자바스크립트 런타임은 자바스크립트 엔진과 각 플랫폼에 맞는 API들을 결합하여, 다양한 환경에서 자바스크립트를 실행할 수 있게 해준다.

---

 

자바스크립트 엔진의 동작 방식

 

자바스크립트 엔진은 기본적으로 싱글 스레드로 동작하며, 주로 두 가지 메모리 구조인 Stack과 Heap을 사용한다.

• Stack: 함수 호출이 이루어질 때, 함수 실행 순서대로 적재되고 처리되는 메모리 영역이다. 스택은 LIFO(Last In, First Out) 방식으로 작동하며, 함수 호출이 완료되면 스택에서 제거된다.
• Heap: 동적으로 할당된 메모리가 저장되는 영역이다. 객체나 배열과 같은 데이터가 힙에 저장되며, 스택과 달리 순차적으로 관리되지 않는다.

이러한 구조는 자바스크립트가 싱글 스레드 환경에서도 비동기 처리를 효율적으로 수행할 수 있게 한다.

---

비동기 처리와 이벤트 루프

 

자바스크립트는 기본적으로 싱글 스레드로 동작하지만, 비동기 처리를 통해 멀티태스킹을 가능하게 한다. 비동기 처리는 웹 브라우저와 Node.js 환경에서 다르게 구현되지만, 공통적으로 이벤트 루프(Event Loop)를 사용한다.

• 웹 브라우저에서의 비동기 처리:
  1. 대기실(Task Queue): 비동기 함수가 완료되면, 콜백 함수가 대기실에 적재된다.
  2. 문지기(Event Loop): 이벤트 루프가 대기실을 모니터링하며, 스택이 비어 있을 때 콜백 함수를 스택으로 이동시켜 실행한다.
  3. 작업장(Stack + Heap): 콜백 함수가 스택에서 실행되며, 필요한 데이터는 힙에서 가져온다.
• Node.js에서의 비동기 처리:
  • Node.js는 웹 브라우저와 달리 서버 환경에서 비동기 처리를 위해 LIBUV라는 라이브러리를 사용하여 멀티스레드 I/O 처리를 지원한다. 이를 통해 Node.js는 비동기 작업을 효율적으로 관리하고, 고성능 서버 애플리케이션을 구축할 수 있다.

 

 

---

Web Worker API: 자바스크립트에서 멀티스레드 지원

 

자바스크립트는 기본적으로 싱글 스레드로 동작하지만, Web Worker API를 사용하면 멀티스레드를 직접 활용할 수 있다. 이는 특히 프론트엔드 개발자가 복잡한 연산을 백그라운드에서 처리하고, 메인 스레드의 성능을 최적화하고자 할 때 유용하다.

• 사용 방법:
  • 간접 사용: setTimeout, setInterval과 같은 Web API를 통해 비동기적으로 작업을 처리할 수 있다.
  • 직접 사용: postMessage, onmessage 등의 API를 사용해 Pub/Sub 패턴으로 멀티스레드를 구현할 수 있으며, 스레드 간 통신을 위해 MessageChannel을 활용할 수 있다.

---

 

자바스크립트 프레임워크와 런타임의 결합

 

자바스크립트 프레임워크는 자바스크립트 런타임 환경에서 동작하며, 복잡한 애플리케이션 개발을 단순화한다. 프레임워크는 여러 라이브러리를 결합하여 단일 목적을 넘어서 다양한 기능을 제공한다.

• 라이브러리와 프레임워크:
  • 라이브러리: 특정 기능을 제공하는 단일 목적의 코드 모음. 예를 들어, jQuery는 DOM 조작에 특화된 라이브러리다.
  • 프레임워크: 여러 라이브러리와 툴을 결합하여 종합적인 개발 환경을 제공한다. 예를 들어, React는 사용자 인터페이스를 구축하는 데 필요한 도구들을 포함한 프레임워크이다.

 

 

해당 영상을 통해 자바스크립트 동작원리에 대해 쉽게 이해할 수 있다.

https://www.youtube.com/watch?v=v67LloZ1ieI

코딩애플 (Youtube.개발자 90%가 모르는 자바스크립트 동작원리 (Stack, Queue, event loop) )

 

 

---

ℹ️참고

[ASAC 6기 강의자료]

https://www.youtube.com/watch?v=v67LloZ1ieI