개요
웹 애플리케이션은 주로 JavaScript를 사용해 동적으로 동작합니다. 하지만 JavaScript는 실행되기 전에 브라우저에서 JIT(Just-In-Time) 컴파일을 통해 기계어로 변환되거나 해석해야 하기 때문에 성능이 떨어질 가능성이 있습니다. 특히, 고성능 계산이나 복잡한 연산이 필요한 작업에서는 JavaScript만으로는 한계가 있을 수 있습니다.
이 문제를 해결하기 위해 등장한 것이 바로 WebAssembly(Wasm)입니다. WebAssembly는 C, C++, Rust와 같은 고성능 언어로 작성된 코드를 미리 바이트코드로 컴파일해 둡니다. 이렇게 생성된 바이트코드는 브라우저에서 빠르게 해석되거나 네이티브 코드로 변환되어 실행됩니다.
WebAssembly는 JavaScript보다 최적화된 실행 환경을 제공하며, 특히 고성능 연산이 필요한 작업(예: 게임, 그래픽, 머신러닝)에서 더 뛰어난 성능을 발휘합니다.
직접 빌드 해보기
wasm은 Rust 언어가 생태계가 더 활발하다는 것 같아 Rust로 만들어보겠습니다.
코드 작성하기
cargo로 프로젝트를 생성합니다.
cargo new --lib wasm_web
Cargo.toml에 설정합니다. wasm-bindgen은 JavaScript와 WebAssembly(WASM) 간의 상호작용을 도와주는 라이브러리입니다. Rust로 작성된 WebAssembly 모듈과 JavaScript 환경 사이에서 데이터와 기능을 원활히 교환할 수 있도록 돕습니다.
https://github.com/rustwasm/wasm-bindgen
GitHub - rustwasm/wasm-bindgen: Facilitating high-level interactions between Wasm modules and JavaScript
Facilitating high-level interactions between Wasm modules and JavaScript - rustwasm/wasm-bindgen
github.com
[package]
name = "wasm_web"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
src/lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
#[wasm_bindgen]
pub fn hi() -> String {
format!("Hi!")
}
빌드하기
빌드는 wasm-pack을 사용해서 빌드합니다.
https://github.com/rustwasm/wasm-pack
GitHub - rustwasm/wasm-pack: 📦✨ your favorite rust -> wasm workflow tool!
📦✨ your favorite rust -> wasm workflow tool! Contribute to rustwasm/wasm-pack development by creating an account on GitHub.
github.com
wasm-pack 설치하기
cargo install wasm-pack
빌드하기
wasm-pack build --target web
빌드 옵션들
타겟 옵션 설정
- bundler (기본값)
- nodejs
- web
- no-modules
- deno
scope 설정하기
wasm_web.js 파일이 생겼습니다.
웹으로 확인해보기
웹에서 실행되게 하기 위해 index.html도 만들겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Rust WASM Example</title>
</head>
<body>
<h1 id="output"></h1>
<script type="module">
import init, { greet, hi } from './pkg/wasm_web.js';
init().then(() => {
const outputElement = document.getElementById('output');
// greet 함수 결과와 hi 함수 결과를 출력
const greetMessage = greet("World");
const hiMessage = hi();
// h1 태그 안에 출력 (결과를 합침)
outputElement.textContent = `${greetMessage} ${hiMessage}`;
});
</script>
</body>
</html>
이제 이 index.html 코드를 파이썬을 이용해 실행시켜보겠습니다.
python3 -m http.server
이렇게 하면 이제 서버가 켜지고 브라우저를 통해 접근할 수 있습니다.
화면에 잘 출력되는것을 확인할 수 있습니다.
'CS > wasm' 카테고리의 다른 글
| 쿠버네티스 런타임 wasm으로 변경해서 실행해보기 (runwasi) (0) | 2024.11.28 |
|---|---|
| wasm 컨테이너 실행하기 (0) | 2024.11.28 |