위의 링크에서 rust를 설치할 수 있습니다.
Rustup은 Rust를 설치하고 관리하는 도구입니다. Rustup을 사용하면 다양한 버전의 Rust를 설치하고 관리할 수 있습니다. Rustup은 Rust 컴파일러인 rustc, Rust의 표준 라이브러리인 rust-std, Rust의 패키지 관리자인 cargo 및 rust-docs를 설치합니다.
패키지를 빌드하기 위해, wasm-pack이라는 추가적인 툴이 필요합니다. 이것을 통해 코드를 WebAssembly로 컴파일하고, npm에 적합한 패키징을 생성할 수 있습니다. 설치를 하려면 터미널에 다음 명령을 입력합니다.
cargo install wasm-pack
아래는 Node.js 설치와 npm 계정 생성을 요약한 내용입니다:
"Get npm!" 페이지에 접속하여 안내에 따라 Node.js와 npm을 설치합니다.
Node.js의 버전 선택은 개인의 선호나 요구에 따라 자유롭게 선택할 수 있습니다.
npm 가입 페이지에서 양식을 작성하여 npm 계정을 생성합니다.
npm 계정을 만든 후, 명령 줄에서
npm adduser
명령을 실행합니다.
계정명, 패스워드, 이메일 등을 입력합니다.
제대로 작동했다면,
"Logged in as [계정명] on https://registry.npmjs.org/."
과 같은 출력을 볼 수 있습니다.
만약 문제가 발생한다면, npm에 문의하여 문제를 해결할 수 있습니다.
이렇게 하면 Node.js와 npm이 설치되고 npm 계정이 생성됩니다. 이제 npm 패키지를 생성하고 배포하는 작업을 수행할 수 있습니다.
개인 프로젝트를 담을 디렉토리로 이동한 후, 명령 줄에서 다음 명령어를 실행합니다:
cargo new --lib hello-wasm
이 명령어는 hello-wasm이라는 이름의 하위 디렉토리에 새로운 Rust 라이브러리를 생성합니다.
위 명령어를 실행하면 다음과 같은 구조가 생성됩니다:
+-- Cargo.toml
+-- src
+-- lib.rs
Cargo.toml은 빌드를 설정하기 위한 파일입니다.
src/lib.rs에는 Rust 코드가 생성됩니다.
Cargo.toml 파일을 열어서 빌드에 필요한 설정을 추가하거나 수정합니다. 이 설정은 패키지의 종속성, 빌드 옵션 등을 정의하는 곳입니다.
생성된 src/lib.rs 파일에는 Rust 코드가 작성되어 있습니다.
필요에 따라 Rust 코드를 수정하고 원하는 기능을 구현합니다.
이제 WebAssembly npm 패키지를 빌드하기 위한 기본적인 구조와 설정이 완료되었습니다. Rust 코드를 작성하고 필요한 빌드 옵션을 추가하여 원하는 기능을 구현하실 수 있습니다.
#[cfg(test)] mod tests { #[test] fn it_works() { assert_eq!(2 + 2, 4); } }
위 코드는 wasm-bindgen을 사용하여 Rust와 JavaScript 사이의 통신을 위한 준비를 마친 것입니다. 이제 Rust 코드를 작성하고 기능을 구현할 수 있습니다. wasm-bindgen을 활용하여 JavaScript와 상호작용하고 필요한 기능을 구현할 수 있습니다.
Rust 코드에 #[wasm_bindgen] 속성을 추가하여 외부 함수를 선언합니다.
extern 블록 내에 JavaScript 함수의 시그니처를 Rust 형식에 맞게 작성합니다.
예시:
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
}
wasm-bindgen은 Rust 코드와 JavaScript 간의 함수 호출을 가능하게 해줍니다.
외부 함수를 호출하고자 할 때, wasm-bindgen은 해당 함수를 어떻게 찾아야 하는지 알고 있습니다.
Rust 코드에서 선언된 외부 함수를 호출하여 JavaScript 함수를 실행할 수 있습니다.
Rust 함수 내에서 JavaScript 함수를 호출하는 위 코드는 Rust에서 JavaScript의 외부 함수를 호출하기 위한 준비를 마친 것입니다. 이제 Rust 함수 내에서 해당 외부 함수를 호출하고, JavaScript 함수의 동작을 실행할 수 있습니다.
#[wasm_bindgen]
속성을 추가하여 JavaScript에서 호출할 수 있는 함수를 작성합니다.pub fn greet(name: &str) {
/ 함수 내용 /
}
#[wasm_bindgen] 속성:
JavaScript에서 호출:
alert(&format!("Hello, {}!", name));
위 코드는 Rust에서 JavaScript가 호출할 수 있는 함수를 작성하는 것을 의미합니다. Rust 함수의 로직을 구현하고, 필요한 경우 JavaScript 함수를 호출하여 상호작용할 수 있습니다. 이 경우 greet 함수는 인자로 전달받은 이름을 사용하여 JavaScript의 alert 함수를 호출하고, 문자열을 경고창에 표시합니다.
라이브러리가 작성되었다면, 이제 해당 라이브러리를 빌드할 수 있습니다.
[package] 섹션:
[lib] 섹션:
[dependencies] 섹션:
ex)
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/hello-wasm"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
Cargo.toml 파일에서 위의 설정을 추가하고 저장한 뒤, WebAssembly로 컴파일할 준비가 되었습니다.
wasm-pack build --scope mynpmusername
주어진 명령어를 실행하면 wasm-pack이 다음 작업들을 수행합니다.
빌드가 완료되면 pkg 디렉토리에 npm 패키지가 생성됩니다.
cd pkg
npm publish --access=public
npm에 우리의 새 패키지를 배포할 수 있습니다.
우리는 이제 Rust로 쓰여졌으나, WebAssembly로 컴파일된 npm 패키지를 갖고 있습니다. 이것은 JavaScript에 쓰일 수 있도록 준비되었으며, 다른 사용자들은 Rust를 설치할 필요가 없습니다. 왜냐하면 패키지에는 WebAssembly 코드만 포함되어있으며, Rust 소스는 없기 때문입니다.
주어진 지침에 따라 웹사이트를 빌드해보겠습니다. 아래는 각 단계에 대한 설명입니다:
cd ../..
mkdir site
cd site
{
"scripts": {
"serve": "webpack-dev-server"
},
"dependencies": {
"@mynpmusername/hello-wasm": "^0.1.0"
},
"devDependencies": {
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
dependencies 섹션에서 @mynpmusername
부분을 실제 npm 계정명으로 대체해야 합니다.
const path = require('path');
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
mode: "development"
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-wasm example</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
const js = import("./node_modules/@yournpmusername/hello-wasm/hello_wasm.js");
js.then(js => {
js.greet("WebAssembly");
});
npm 계정명을 한 번 더 입력해야 합니다.
파일들을 모두 생성했으므로, 다음 명령어를 실행해봅시다:
npm install
npm run serve
이 명령어는 간단한 웹 서버를 시작합니다. http://localhost:8080을 열면 화면에 "Hello, WebAssembly!"라고 쓰여진 alert 창이 표시됩니다. 이제 JavaScript로부터 Rust를 성공적으로 호출했습니다.