JavaScript Runtime

런타임이란?

→ 프로그래밍 언어가 구동되는 환경

자바스크립트 런타임 종류: 웹 브라우저, Node.js, Deno, Bun 등

JavaScript Engine V8

• V8은 자바스크립트 엔진 중 하나
• V8은 오픈 소스 자바스크립트 엔진 중 하나
• 웹어셈블리(WebAssembly) 엔진
• 크롬 웹 브라우저와 Node.js 등에서 사용
• V8은 자바스크립트를 바이트 코드로 컴파일하고 실행하는 방식을 사용
• 구성
  • 하나의 Heap, 하나의 Call Stack → 싱글 스레드
    • 이로 인해 동기적으로 코드를 실행하다가 블로킹 발생
  • setTimeOut, DOM, HTTP Request 등과 같은 비동기 메소드는 없음.

→ 이런 구성을 보완하기 위해 웹 브라우저의 Web API를 활용(비동기 요청 메소드, 이벤트 루프와 콜백 큐)

• Heap: 선언된 변수와 객체의 메모리 할당에 사용되는 비정형 메모리
• Call Stack: 실행 컨텍스트가 쌓이는 곳
• Event Loop: 여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백함수를 호출할 지 판단. 콜 스택이 비면 콜백 큐에 있는 함수를 콜 스택에 추가
• Call Back Queue: 비동기로 실행되야 하는 콜백함수가 보관되는 영역
• 블로킹: 브라우저에서 코드가 종료될 때까지 유저가 액션을 취해도 어떠한 반응을 하지 않는 상태, 즉 콜 스택이 멈춘 상태를 블로킹이라고 보통 부른다.
• 프로세스, 스레드

웹어셈블리?

→ 프로그래밍 언어를 컴파일하여 어느 브라우저에서나 빠르게 실행되는 형식으로 바꿔주는 기술.

자바스크립트의 실행 속도 부분을 보완해줌.

Runtime에서 비동기 처리

→ 비동기 콜백을 만드는 건 EVENT LOOP

웹브라우저는 단순한 런타임 그 이상의 기능을 제공하기 때문에 Web API를 이용해 동시성(비동기 처리)을 활용할 수 있다.

Web API

런타임 환경에 존재하는 별도의 API로, V8 엔진에 포함된 것은 아니다. Web API가 비동기 처리를 한다고 해서 스택에 쌓인 실행 코드 중간에 비동기 코드를 끼워넣는 방식은 아니며, Task Queue와 Call Back Queue를 활용해 처리한다.

비동기 요청 문제점과 해결 방법

• 문제점
  • 작업의 순서를 제어해야 할 경우에 발생

function CallBackQueueSequence() {
  console.log('하나');
  setTimeOut(() => console.log('둘'), 0);
  console.log('셋');
}

CallBackQueueSequence(); // 하나 셋 둘

Issue

➕ Bun.js 1.0 버전 출시