[Rust 공식문서 한국어 정리] ⑳. Rust와 웹어셈블리 — Wasm 개발 가이드

[Rust 공식문서 한국어 정리] ⑳. Rust와 웹어셈블리 — Wasm 개발 가이드

원문 제목: The Rust and WebAssembly Book
작성자: Rust and WebAssembly Working Group

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 1. 서론 — 이 문서가 다루는 내용
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

이 문서는 Rust를 사용해 웹어셈블리(Wasm) 모듈을 개발하는 전 과정을 다룹니다.
브라우저 내 고성능 컴퓨팅, 게임 엔진, 이미지 처리 등 JavaScript만으로는 한계가 있는 영역을 Rust로 구현하는 방법을 설명합니다.
wasm-bindgen을 활용한 JS-Rust 상호운용, wasm-pack을 이용한 패키지 빌드 및 npm 배포까지 체계적으로 안내합니다.
메모리 안전성과 제로 비용 추상화라는 Rust의 강점을 웹 생태계에 그대로 가져오는 것이 목표입니다.
프론트엔드 개발자와 시스템 프로그래머 모두에게 유용한 실전 가이드입니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔑 2. 핵심 개념 4가지
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

① wasm32-unknown-unknown 타겟: Rust는 Wasm을 네이티브 타겟으로 지원하며, 별도의 런타임 없이 브라우저에서 실행됩니다.
② wasm-bindgen: Rust 구조체와 함수를 JavaScript/TypeScript에 노출하고, JS 객체를 Rust로 가져오는 glue 코드를 생성합니다.
③ wasm-pack: Rust 프로젝트를 npm 패키지로 빌드하고, 번들러(webpack, rollup 등)와 통합하는 CLI 도구입니다.
④ JsValue: Rust에서 JavaScript의 동적 타입 값을 안전하게 다루기 위한 래퍼 타입입니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📖 3. 주요 내용 상세
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Rust로 Wasm을 개발하려면 먼저 wasm32-unknown-unknown 타겟을 추가해야 합니다.
rustup target add wasm32-unknown-unknown 명령으로 간단히 설치할 수 있습니다.
이 타겟은 운영체제나 C 런타임에 의존하지 않는 순수한 Wasm 바이너리를 생성합니다.

wasm-bindgen은 Rust와 JS 간의 타입 매핑을 자동화합니다.
#[wasm_bindgen] 매크로를 함수나 impl 블록에 붙이면, JS에서 호출 가능한 export가 생성됩니다.
반대로 extern "C" 블록 내에서 JS 함수를 import할 수도 있습니다.
Promises, TypedArrays, DOM API 등 다양한 JS 개념을 Rust 타입으로 매핑할 수 있습니다.

wasm-pack은 빌드, 테스트, 배포를 한 번에 처리하는 도구입니다.
wasm-pack build 명령은 pkg 디렉토리에 JS wrapper와 .wasm 파일, TypeScript 정의를 함께 생성합니다.
생성된 패키지는 npm publish로 바로 배포하거나, 로컬 웹팩 프로젝트에 링크할 수 있습니다.

메모리 관리는 Wasm의 선형 메모리 모델을 따릅니다.
Rust의 Vec이나 String은 Wasm 메모리에 할당되고, JS는 TypedArray로 해당 메모리 영역을 읽을 수 있습니다.
다만 JS가 Rust의 소유권 규칙을 모륯므로, 수명이 종료된 메모리에 접근하지 않도록 주의해야 합니다.
wasm-bindgen은 이러한 위험을 줄이기 위해 복사 기반 매핑을 기본으로 사용합니다.

디버깅과 테스트는 브라우저와 Node.js 양쪽에서 가능합니다.
wasm-pack test --headless --firefox 명령으로 브라우저 기반 테스트를 실행할 수 있습니다.
console_error_panic_hook을 설정하면 Rust의 panic 메시지가 브라우저 콘솔에 출력되어 디버깅이 용이합니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🛠 4. 실전 활용
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

이미지 필터, 물리 시뮬레이션, 암호화 연산 등 CPU 집약적 작업을 Rust로 구현하여 JS에 통합합니다.
wasm-pack으로 npm 패키지를 빌드하고, React/Vue/Angular 프로젝트에서 일반 모듈처럼 import합니다.
성능이 중요한 코드 경로를 프로파일링한 뒤, 병목 지점만 선택적으로 Wasm으로 이전합니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ 5. 정리
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Rust와 Wasm의 조합은 웹에서 네이티브 수준의 성능을 실현합니다.
wasm-bindgen과 wasm-pack을 활용하면 JS 생태계와의 통합이 간단해집니다.
메모리 안전성과 생산성을 모두 잡은 현대적인 웹 개발 스택으로 자리 잡고 있습니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 출처 링크
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

원문: https://rustwasm.github.io/book/
GitHub: https://github.com/rustwasm/book

#Rust #WebAssembly #Wasm #wasm-bindgen #wasm-pack #JavaScript #Frontend #번역