728x90
반응형
오늘은 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>lms0806 PortFolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello rust</h1>
<button id="btn">Click</button>
<p id="output"></p>
<script type="module">
import init, { greet } from "./pkg/wasm_site.js";
async function run() {
await init();
document.getElementById("btn").onclick = () => {
document.getElementById("output").innerText =
greet("Rust");
};
}
run();
</script>
</body>
</html>다음과 같이 설정 후, github settings -> pages -> deploy 버튼을 누르면 다른 사용자분들이 접속 가능한 사이트로 배포가 가능합니다.
GitHub - lms0806/rust_wasm
Contribute to lms0806/rust_wasm development by creating an account on GitHub.
github.com
코드는 해당 레포에 있습니다.
728x90
반응형
'Rust > 프로젝트' 카테고리의 다른 글
| 터미널에서 영상 시청하는 프로젝트 (2) (0) | 2026.01.13 |
|---|---|
| 터미널에서 영상 시청하는 프로젝트 (1) (0) | 2026.01.10 |
| Rust로 백엔드 개발기(feat. 메이플스토리) - 10 Not Found 처리, request 통합 (0) | 2025.04.13 |
| Rust로 백엔드 개발기(feat. 메이플스토리) - 09 Main 함수 정리 (0) | 2025.04.02 |
| Rust로 백엔드 개발기(feat. 메이플스토리) - 08 사용자별 요청 처리 (0) | 2025.03.31 |
댓글