[JavaScript] JavaScript Engine / Runtime 개념 및 작동 방식 이해하기

📌 JavaScript Engine 과 Runtime 이해하기 

⚡ JavaScript 란 무엇인가?

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 

이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.

또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.

 

⚡ JavaScript Engine 이란?

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

대중적으로 알려진 엔진은 구글의 V8엔진으로  Chrome Web Browser, Node.js 등에서 사용된다.

 

자바스크립트 엔진은

메모리 힙 ( 변수와 객체의 메모리 할당이 발생하는 곳 )과 콜 스택 ( 코드가 실행될 때마다 호출 스택이 쌓이는 곳 )으로 이루어져 있다.

setTimeout, DOM, AJAX 등과 같은 비동기 메소드가 없다.

 

💧 V8 Engine 이란?

오픈 소스 자바 스크립트 엔진 중 하나로, 자바스크립트와 웹어셈블리(WebAssembly) 엔진이다.

 

💧 Web Assembly 란?

C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는

바이너리 형식 ( 0과 1로 이루어진 이진 형식 )으로 변환해주는 기술을 의미한다.

보통 웹 어플리케이션 개발 시, JavaScript 프로그래밍 언어를 사용해 동적인 부분을 개발하는데 C나 C++에 비해 성능 느리다.

그래서 게임이나 동영상 편집 등과 같은 고성능 웹 어플리케이션을 개발할 때 브라우저의 동작을 빠르게 하기 위해서 C나 C++와 같은 언어로 개발 할 수 있게 하는 것이다. ( 고성능 웹 애플리케이션 개발 시 자바스크립트와 같이 사용되고, 자바스크립트를 보완하는 기술이다.)

이전에 불가능 했던 클라이언트 응용 프로그램을 사용해서 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행되는 길을 제공한다.

 

⚡ JavaScript Runtime이란?

런타임이란 프로그래밍 언어가 구동되는 환경을 말한다.

고로 자바스크립트 런타임이란, 자바스크립트가 구동되는 환경을 말하는 것이다.

이러한 JavaScript Runtime에는 Web Browser ( Chrome, FireFox ) 프로그램과 Node.js 가 있다.

이런 프로그램에서 자바스크립트가 구동되기 때문에 자바스크립트 런타임이라고 한다.

 

 

📌 JavaScript 와 Single Thread, Asynchronous, Non-Blocking 

⚡ JavaScript 와 Single Thread

스레드는  한 가지 작업을 실행(프로세스가 할당받은 자원을 이용)하기 위한 단위로서,

싱글 스레드는 하나의 프로그램에서 동시에 하나의 코드만 실행될 수 있다는 뜻이다.

( 멀티 스레드는 여러 코어를 사용, 여러 작업을 동시에 실행 )

또한 싱글 스레드는 코드가 실행되서 끝난 지점과 다음 코드의 시작 지점이 연결된 형태이다. 

( Task A → Task B → Task C )

각 작업은 순차적으로 실행되며 각 스레드에서는 한 번에 하나의 작업만 수행할 수 있다.

 

결론적으로 자바스크립트는 싱글 스레드이다.

코어가 여러 개가 있어도 메인 스레드라고 하는 단일 스레드에서만 작업을 수행한다.

이러한 싱글 스레드는 하나의 힙 영영과 하나의 콜 스택(한 번에 한 가지 일 밖에 못함)을 가진다.

그러므로 싱글 스레드는 일을 동기적으로 처리한다고 할 수 있다.

 

[JavaScript] 동기(Synchronous) - 비동기(Asynchronous) / 블로킹(Blocking) - 논블로킹(Non-blocking)

 

📌 JavaScript Engine : V8 과 Runtime 그리고 웹 브라우저의 Web APIs 

⚡ JavaScript Engine : V8 의 구성

자바스크립트 V8 엔진 소스 안에는 하나의 Heap과 하나의 Call Stack만 있다.

setTimeout, DOM, AJAX ( HTTP 요청 ) 등과 같은 비동기 메소드가 없다.

 

💧 Heap 과 Call Stack

언급한 바와 같이 자바스크립트 엔진은 힙과 콜 스택으로 구성되어있는데,

힙은 변수와 객체의 메모리 할당에 사용되는 비정형 메모리이다.

자바스크립트 엔진에서 콜 스택은 하나로 구성되어 있으며 코드를 읽고 함수가 실행되는 순서를 기억하는 역할을 한다.

함수가 실행되면 스택의 가장 위에 자리하여 실행되고, 함수에서 리턴이 반환되면 스택의 가장 위쪽에서 꺼내게 된다. ( First In Last Out )

V8 엔진에서 오류가 발생하면 스택 추적을 콜솔에 출력한다.

 

⚡ JavaScript Runtime / Web Browser : Web API

Web API는 JavaScript가 실행되는 런타임 환경에 존재하는 별도의 API이다. ( V8 소스코드에는 존재하지 않는다. )

Event Loop와 Callback Queue를 가지고 있다.

setTimeout, DOM, AJAX ( HTTP 요청 ) 등과 같은 비동기 메소드가 있다.

 

예시 )

setTimeout의 인자로 콜백함수와 지연시간을 입력해서 호출한다.

스택에 setTimeout()함수가 올라가고 브라우저는 타이머를 실행시키고 카운트를 시작한다.

이는 setTimeout() 호출 자체는 완료되었다는 의미이고 스택에서 함수가 지워진다.

Web API는 작동이 완료되면 콜백을 스택에 푸시한다.

 

💧 Callback Queue / Event Loop

콜백 큐는 Web API 결과값을 쌓아두는 큐이다.

예시) JavaScript에서 setTimeout(cd, 5000)을 호출하게 되면 Web API는 타이머를 동작시키고 5초 후에 콜백 큐에 cd를 쌓는다.

 

이벤트 루프는 이 전체 시스템에서 단순한 일을 하는 파트이다.

이벤트 루프의 역할은 콜 스택과 콜백 큐를 주시하는 것이다.

콜 스택이 비어있으면 큐의 첫 번쨰 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 한다.

이벤트 루프는 콜 스택이 비어질 때까지 기다린 후 콜백 큐에 있는 콜백을 콜 스택에 넣어주는 역할을 하는 것이다.

Web API의 콜백이 완료되었다면 콜백은 큐에 쌓이게 되고, 이벤트 루프에 의해 실행된다.

이 과정이 비동기 함수가 호출되는 방식이다.

 

 

📌 정리 

  ▪  자바스크립트란 객체 기반의 스크립트 프로그래밍 언어이다.

  ▪  자바스크립트 엔진이란 자바스크립트 코드를 해석하고 실행하는 인터프리터이며
       대중적으로 구글의 V8 엔진이 있으며, Chomre Web Browser, Node.js 등이 있다.

  ▪  자바스크립트 런타임이란 자바스크립트가 구동되는 환경을 말하는 것이며

       웹 브라우저 ( Chome, FireFox... ), Node.js 가 있다.

  ▪  자바스크립트는 싱글 스레드이며,

       자바스크립트 엔진은 자바스크립트로 만들어졌기 때문에 하나의 힙과 하나의 콜 스택으로 이루어져 있다.

  ▪  자바스크립트 엔진은 동기적으로 처리되며 블로킹을 만든다. ( 비동기 메소드가 없다. )
       동기적으로 AJAX 요청을 보내면 브라우저는 모든 응답이 완료될 때까지 멈춰있다.

       동기적으로 실행되는 네트워크 요청이 콜 스택을 블로킹하여 브라우저는 다른 일을 할 수가 없다.

       ( 동기적으로 네트워크 요청을 보낼 경우에 그렇다는 것. 실제로는 웹 브라우저가 제공하는 API가 동기적으로 요청을 보낸다는 것은 아니다. )

  ▪  자바스크립트 자체는 비동기적으로 요청을 처리할 수 없다.

       동기적 처리의 문제점 때문에 자바스크립트 런타임 환경에 존재하는 별도의 API (웹 브라우저)
       ( 웹 브라우저 의 Web APIs ( setTimeout, DOM, AJAX( Http Req... ) ) ) 를 통해 비동기 처리가 가능하게 하는 것이다.

  ▪  그렇다면 어떻게 비동기로 처리할 수 있는 것인가??

       이벤트 루프를 이용하여 비동기 콜백으로 싱글 스레드 프로그래밍 언어에서의 블로킹을 해결할 수 있다. → 논 블로킹 

       웹 브라우저와 Node.js에는 동기로 처리하는 블로킹 메소드가 거의 없다.

       대부분 지원 메소드가 비동기 처리를 하게끔 만들어졌다.

       이벤트 루프를 막지 말라는 것의 의미는 스택에 필요없이 느린 코드를 쌓아서 브라우저가 할 일을 못하게 만들지 말라는 뜻이다.       

 

 

 

 

📌 Reference 

@HANAMON - [JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프

https://hanamon.kr/

@yoonhu.log : velog - [기술면접] JavaScript 런타임 작동방식, 비동기와 이벤트 루프

https://velog.io/@ahsy92

@codestates - 문서 객체 모델 DOM 과 자바스크립트 JavaScript | 생성 방식 및 접근 방법

https://www.codestates.com/blog/content/dom-javascript