자바스크립트 런타임

1. 자바스크립트 엔진과 자바스크립트 런타임

---

1) 웹 브라우저

---

크롬 웹 브라우저는 V8 엔진이 탑재된 자바스크립트 런타임이다.

자바스크립트란?

• 자바스크립트는 프로그래밍 언어이다.

자바스크립트 런타임이란?

• 런타임이란 프로그래밍 언어가 구동되는 환경
• 자바스크립트 런타임이란 자바스크립트가 구동되는 환경을 말한다.
• 이러한 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)프로그램과 Node.js 라는 프로그램이 있다.
• 이러한 프로그램들에서 자바스크립트가 구동되기 때문에 자바스크립트 런타임이라고 한다.

V8 엔진이란?

• V8은 오픈 소스 자바스크립트 엔진 중 하나이다.
• 자바스크립트 엔진은 자바스크립트 코드를 실행하는 소프트웨어이다.
• V8 엔진은 자바스크립트와 함께 웹어셈블리(WebAssembly) 엔진도 포함한다.
• 크롬 웹 브라우저와 Node.js 등에서 사용되고 있다.
• V8은 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식을 사용한다.

웹어셈블리란?

• 웹어셈블리(WebAssembly)란 C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 형식으로 바꿔주는 기술을 뜻한다.
• 보통 웹 애플리케이션 개발시에는 JavaScript 프로그래밍 언어를 사용해 동적인 부분을 개발하는데 C나 C++ 언어들에 비해서는 느리다.
• 게임이나 동영상 편집 등과 같은 고성능 웹 애플리케이션을 개발할 때 브라우저의 동작을 빠르게 하기 위해서 C나 C++와 같은 언어로 개발 할 수 있게 하는 것이다.
• 고성능 웹 애플리케이션 개발 시 자바스크립트와 같이 사용되고, 자바스크립트를 대체하는 것이 아니라 보완하는 기술이다.

2) V8 엔진과 웹 브라우저

---

자바스크립트 자체 즉, 자바스크립트 엔진(V8)과 자바스크립트 런타임(웹 브라우저)에서 제공하는 API 메서드로 프로그래밍을 하는 것이다.

자바스크립트 엔진 V8의 구성

• 자바스크립트는 전통적으로 싱글 스레드이다.
• 이러한 싱글 스레드는 하나의 힙 영역과 하나의 콜 스택을 가진다.
• 그래서 자바스크립트 V8 엔진 소스 안에는 하나의 힙과 하나의 콜 스택만 있다.
• 하나의 콜 스택을 가진다는 의미는 한 번에 한 가지 일 밖에 못한다는 의미이다.
• 싱글 스레드는 일을 동기적으로 처리한다.
• setTimeout, DOM, AJAX(HTTP 요청)등과 같은 비동기 메소드가 없다.

function SignThreadTest() {
  console.log(1);
  for( let i=0; i<10000; i++ ) {
    console.log('자바스크립트는 싱글 스레드 프로그래밍 언어이다.');
  }
  console.log(2);
}
// '자바스크립트는 싱글 스레드 프로그래밍 언어이다.'가 10,000번 실행이 완료 될 때까지
// 콘솔 창에 '3' 이 찍히는 것을 기다려야한다.
SignThreadTest();

자바스크립트 런타임 웹 브라우저의 Web APIs

• 이벤트 루프와 콜백 큐를 가지고 있다.
• Web API는 자바스크립트가 실행되는 런타임 환경에 존재하는 별도의 API 이다. (V8 소스코드에는 존재하지 않는다.)
• setTimeout, DOM, AJAX(HTTP 요청)등이 있다.

웹 브라우저의 Web APIs는 비동기로 처리한다.

• 위에서 웹 브라우저에 Web APIs 에는 setTimeout, DOM, AJAX(HTTP 요청) 등이 있다고 했다. 그리고 이벤트 루프와 콜백 큐를 가지고 있다. 자바스크립트 자체는 비동기적으로 요청을 처리할 수 없다. 자바스크립트 런타임 안에 지원하는 API로 비동기로 요청을 처리할 수 있게 하는 것이다.
• 콜백 큐는 Web API 결과값을 쌓아두는 큐이다. 예를 들어 자바스크립트에서 setTimeout(cd, 5000)을 호출하게 되면 Web API는 타이머를 동작시켜 5초 후에 콜백 큐에 cd를 쌓는다.

• 예) 큐에 쌓일 비동기식 콜백

  function asyncForEach(arr, fnc) {
    arr.forEach((i) => {
      setTimeout(() => fnc(i), 1000);
    });
  }
  asyncForEach([1,2,3,4], (i) => console.log(i));
  

2. 자바스크립트 런타임에서 비동기 처리 방법

---

• 자바스크립트 런타임에서 제공하는 비동기 콜백을 만드는 것은 이벤트 루프이다.

• 웹 브라우저와 같은 자바스크립트 런타임에서는 비동기 콜백으로 자바스크립트라는 싱글 스레드 프로그래밍 언어에서의 블로킹을 해결한다. (느린 동작이 스택에 남아 있는 것을 보통 블로킹)

  

이벤트 루프

• 이벤트 루프의 역할은 콜 스택과 콜백 큐를 주시하는 것이다.
• 이벤트 루프는 콜 스택이 비어질 때까지 기다린 후 콜백 큐에 있는 콜백을 콜 스택에 넣어주는 역할을 한다.
• Web API의 콜백이 완료되었다면 콜백은 큐에 쌓이게 되고, 이벤트 루프에 의해서 실행된다. 이 과정은 비동기 함수가 호출되는 방식이다.

AJAX

• AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 비동기적으로 서버와 데이터를 주고받는 기술이다.
• AJAX Ruquest는 URL로 호출할 때 콜백을 함께 실행하게 된다.
• AJAX 요청을 보낼 때, 해당 요청에 대한 응답이 도착했을 때 실행될 콜백 함수를 함께 등록할 수 있다. 콜백 함수는 서버 응답을 처리하거나, 요청이 완료되었을 때 필요한 후속 작업을 수행하는 등의 역할을 할 수 있다.
• 이렇게 AJAX 요청을 보낼 때 콜백을 함께 실행하게 되므로, 비동기적으로 서버와의 통신을 처리하고 응답을 처리할 수 있게 된다.