안녕하세요.
오늘은 rust로 wasm-pack build를 진행하여 나온 javascript 파일을 활용하여 프론트엔드를 구성하고자 합니다.
- 기술스택
rust + wasm-pack + github pages
저는 프론트엔드 개발자가 아니고, 백엔드쪽에 가까운 개발자인데, js나 ts를 학습하여 프로젝트를 구성하기보다는 제가 쓰고 있는 언어를 되도록이면 사용하는 방식으로 진행하고자 하였습니다.
- rust 설치
https://rust-lang.org/ 에서 다운로드 가능합니다.
- wasm-pack 설치
rustup target add wasm32-unknown-unknown
cargo install wasm-pack- rust wasm 프로젝트 생성
cargo new my-wasm --lib- rust 프로젝트 설정
- Cargo.toml
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"- lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}- build
wasm-pack build --target web프론트엔드 코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Rust + WASM</title> </head> <body> <h1>Rust + WASM 테스트</h1> <button id="btn">계산</button> <p id="result"></p> <script type="module"> import init, { add } from "./pkg/rust_wasm.js"; // wasm빌드한 폴더 위치 지정 async function run() { await init(); document.getElementById("btn").onclick = () => { document.getElementById("result").innerText = "3 + 4 = " + add(3, 4); }; } run(); </script> </body> </html>
다음과 같이 설정 후, github settings -> pages -> deploy 버튼을 누르면 다른 사용자분들이 접속 가능한 사이트로 배포가 가능합니다.
https://github.com/lms0806/rust_wasm
코드는 해당 레포에 있습니다.
'잡담 > 궁금증 해결' 카테고리의 다른 글
| Java vs java to call rust (1) | 2025.12.09 |
|---|---|
| Rust에서의 반복문 vs stream (0) | 2025.07.27 |
| divide zero (0) | 2024.10.27 |
| 지수 표현 제거(JAVA) (0) | 2024.09.29 |
| jar 파일에 한글 입력하기 (feat. PHP, JAVA) (0) | 2024.09.09 |
댓글