[책스터디] You Don't Know JS Yet - 01

jjee·2025년 10월 1일

ASM.js JIT WASM You Don't Know JS Yet 스크립트 언어 인터프리터 책스터디 컴파일러

You Don't Know JS Yet - 01

첫번째 책 스터디를 진행했다.
나는 책의 1.6 인터프리터 이해하기 부분을 맡게 되었다.

1.6 인터프리터 이해하기

인터프리터 언어와 컴파일 언어

인터프리터와 컴파일러는 빌드 방식의 차이가 있다.

빌드란?
개발자가 만든 소스 코드를 기계어(machine code)로 번역하여 실행 가능한 파일로 만드는 과정

컴파일 방식 : 소스 코드 전체를 기계어로 번역한 파일을 만들고, 그 파일을 실행함

인터프리터 방식 : 소스 코드를 한 줄씩 번역하면서 실행함

하이브리드 방식 : 소스 코드 전체를 중간코드(바이트 코드로 번역한 뒤) VM 에서 한 줄씩 실행함

인터프리터 언어

고급 프로그래밍 언어로 작성된 소스 코드를 한 줄씩 읽어 즉시 실행하는 프로그램
별도의 코드를 변환하는 과정(컴파일) 없이 소스 코드를 바로 해석하여 실행

장점

별도의 컴파일 과정이 없이 바로 작성→실행 결과 확인이 가능해 개발과 테스트 과정이 빠름
한 줄씩 실행하기 때문에 오류 발생 시 해당 부분을 찾기 쉬움
동적 타이핑을 지원하여 변수의 타입을 명시하지 않아도 되어 코드 작성이 간결해진다.

단점

그때그때 코드를 번역→실행 하므로 컴파일 된 언어에 비해 실행 속도 느린 편
대규모 프로그램이나 복잡한 연산을 수행할 때는 성능 저하가 발생할 수 있다.
소스 코드가 그대로 노출되어 코드 보안에 취약할 수 있다.
문법적인 오류가 있더라도 일단 실행이 되고, 중간에 오류를 만나면 중단된다.

예시

Python, PHP, JavaScript 등

컴파일 언어

소스 코드를 기계어로 번역하는 과정(컴파일)을 거친다.
컴파일 시, 소스 코드 전체를 한 번에 분석하고 최적화 한 후 실행 파일(바이너리 파일)을 생성한다.

장점

생성된 실행 파일은 컴퓨터에서 직접 실행될 수 있어, 실행 속도가 빠르다.
컴파일 과정에서 코드 최적화와 오류 검사를 진행해 안정적이고 효율적인 프로그램을 만들 수 있다.

단점

개발 과정에서 컴파일 시간이 소요되어, 인터프리터에 비해 개발 속도가 느리다.
어떤 환경에서 컴파일 된 실행 파일은 그 환경에 맞춰 번역되었기 때문에, 다른 환경에서 실행하려면 별도의 컴파일 과정이 필요하다.

예시

C, C++, Java, Go 등

파싱과 컴파일
파싱은 분석, 컴파일은 번역이라고 생각하면 될 거 같다.
기존의 코드를 파싱(분석/정리)하고 그 내용을 컴파일(번역)하여 실행 파일을 만든다.
파싱 단계에서 문제가 있다면 오류가 발생한다.(구문 오류/정적 오류)

언어 선택

빠른 개발, 간결한 코드 작성이 중요하면 ⇒ 인터프리터 언어
실행 속도와 안정성이 중요하면 ⇒ 컴파일 언어

스크립트 언어?

웹 브라우저에서 HTML, CSS를 제어하거나, 서버의 동작을 자동화하는 등 특정 응용 프로그램의 동작을 제어하고 확장하는 데 사용
대부분 인터프리터 언어처럼 소스 코드를 런타임에 해석하여 실행하는 방식을 사용
다른 언어보다 문법이 간결하고 배우기 쉬운 경우가 많다고 한다.

인터프리터 언어는 실행 방식을, 스크립트 언어는 용도를 나타내는 표현
스크립트 언어는 주로 인터프리터 방식으로 실행되기 때문에, 많은 스크립트 언어가 인터프리터 언어에 속함
ex) JavaScript, Python, PHP 등

웹 어셈블리

웹에서 고성능 계산 작업을 위해 만들어진 자바스크립트의 부분 집합(subset)
브라우저 개발사(특히 모질라)가 자바스크립트의 성능 한계를 극복하고자 개발한 것으로
C/C++ 코드를 컴파일하여 웹으로 가져오는 데 특히 유용하다.
런타임 최적화가 잘 되어 있어 웹 브라우저에서 네이티브 코드에 가까운 성능을 낼 수 있으며,
웹 어셈블리(WebAssembly) 등장 전까지 웹의 성능 향상을 이끌었던 중요한 기술이다.
asm.js의 성능적 한계를 극복하기 위해 등장한 웹 어셈블리(WASM)는, asm.js보다 더 빠르고 효율적인 바이너리 포맷으로,
현재 웹에서 고성능 애플리케이션을 구현하는 데 있어 asm.js를 대체하고 있다

특징

새로운 언어가 아니라, 기존 자바스크립트 언어의 일부분을 정의한다.
특정 형태를 갖춘 자바스크립트 코드를 의미하며, 모든 자바스크립트 엔진에서 실행될 수 있다.
주로 Emscripten 같은 컴파일러를 통해 C나 C++로 작성된 코드를 asm.js 형태로 변환하여 사용한다.
브라우저의 JavaScript 엔진이 asm.js 코드를 분석하고 최적화하기 쉽도록 설계되어,
네이티브 C++ 코드 실행 속도에 근접하는 성능을 낼 수 있다.
언리얼 엔진과 같은 고성능 네이티브 애플리케이션을 웹으로 이식할 수 있도록 하여,
웹 기반의 고사양 게임이나 애플리케이션 개발에 기여했다.

WebAssembly [Wasm(웹어셈블리)] → 한글버전

웹 브라우저에서 C, C++, Rust 등 다양한 언어로 작성된 코드를 고성능으로 실행할 수 있도록 컴파일하는 이진 명령어 형식의 개방 표준

텍스트 파일인 자바스크립트와 달리 미리 컴파일된 이진 파일이므로 브라우저가 빠르게 읽고 실행할 수 있다.
네이티브 코드에 가깝게 실행되어, 자바스크립트보다 훨씬 빠르고 효율적인 성능을 제공한다.
C, C++, Rust 등 다양한 언어로 작성된 코드를 Wasm으로 컴파일하여 웹에서 실행할 수 있다.
어떤 웹 브라우저나 플랫폼에서도 동일하게 실행될 수 있는 이식성을 가진다.
샌드박스 환경에서 실행되어 시스템 자원에 직접 접근하지 못하므로 보안성이 높다.

사용

고성능 웹 애플리케이션: 피그마, 오토데스크 캐드 웹 앱, 3D 렌더링 웹 앱 등 그래픽, 대량 데이터 처리, 게임 등 높은 성능이 요구되는 분야에서 활용
서버리스 및 엣지 컴퓨팅: 브라우저 외의 환경에서도 활용되어 서버리스, 엣지 컴퓨팅, 도커 컨테이너 등에서 효율적인 성능을 제공
데스크탑 및 모바일 앱: 웹뷰에 기반한 애플리케이션에서 복잡한 연산을 처리하기 위해 Wasm을 활용하여 성능을 향상

JIT 컴파일

인터프리터 언어의 실행 속도를 개선하기 위한 기술 중 대표적으로 Just-In-Time(JIT) 컴파일러가 있다.
JIT 컴파일러는 프로그램 실행 중에 자주 사용되는 코드를 기계어로 컴파일하여 성능을 개선한다.
ex) Python의 PyPy, JavaScript의 V8 엔진 등

위에서 설명한 ASM.js와 Wasm은 JIT가 처리할 수 있는 입력 코드 형태라고 볼 수 있다.