Rust로 첫 번째 WebAssembly 코드를 생성하는 방법

이 기사에서는 첫 번째 WebAssemly 코드를 생성하기 위해 수행해야 할 작업에 대해 설명합니다.

WebAssembly에 대해 이미 들어봤지만 아직 이 기술로 첫 번째 코드를 작성하지 않았다고 가정해 보겠습니다.

지금은 간단한 스타터 팩을 만들 것입니다. Rust 프로그래밍 언어 와의 조합 이 매력적이어서 선택했습니다.

더 이상 고민하지 않고 해봅시다.

러스트 앤 카고 설치

Rust: 다중 패러다임, 고수준, 범용 프로그래밍 언어(https://www.rust-lang.org/)
Cargo: Rust 빌드 도구 및 패키지 관리자(https://crates.io/)

Cargo.toml 파일 초기화

cargo init --name rust_wasm_starter --lib
# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]

cargo add wasm-bindgen

# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "0.2.84"

cargo install wasm-pack

[lib]
crate-type = ["cdylib", "rlib"]

use wasm_bindgen::prelude::wasm_bindgen;

#[wasm_bindgen]
pub fn add(a: usize, b: usize) -> usize {
    return a + b
}

wasm-pack build --release --target web

npm init
// package.json

{
  "name": "rust-wasm-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC"
}

npm i http-server --save

"scripts": {
  "start": "http-server -a localhost -p 5200",
  "build": "wasm-pack build --release --target web"
}

import init from "./pkg/rust_wasm_starter.js";
import {add} from "../pkg/rust_wasm_starter.js";

function run() {
    console.log(add(5, 5));
}

init().then(run)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Rust Wasm Starter</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    See the result in the console.
</body>
</html>

npm run start
Starting up http-server, serving ./

http-server version: 14.1.1
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://localhost:5200
Hit CTRL-C to stop the server

프로젝트를 시작하고 실행하는 데 문제가 있는 경우 내 GitHub 리포지토리를 확인해보세요.