<div id="readability-page-1" class="page"><div><h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#consolelog%EB%A5%BC-%EA%B8%B0%EB%A1%9D%ED%95%98%EB%8A%94-wasm-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0">Console.log를 기록하는 wasm 만들어보기</a></li>
<li><a href="#%EB%B2%88%EB%93%A4%EB%9F%AC-%EC%97%86%EC%9D%B4-%EC%A7%81%EC%A0%91-import-%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">번들러 없이 직접 import 해서 사용하기</a></li>
<li><a href="#js-%EC%BD%94%EB%93%9C%EB%A5%BC-import-%ED%95%B4%EC%84%9C-rust%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0">js 코드를 import 해서 rust에서 실행하기</a></li>
</ul>
<h2 id="consolelog를-기록하는-wasm-만들어보기">Console.log를 기록하는 wasm 만들어보기</h2>
<code>Cargo.toml</code>
<pre><code>[package]
name = "consolelog"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2.74"
web-sys = { version = "0.3.56", features = ['console'] }
</code></pre>
<code>lib.rs</code>
<pre><code>use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
 // js_namespace는 console을 할당했다.
 // 즉 log만 쓰면 console.log가 된다.
 #[wasm_bindgen(js_namespace = console)]
 fn log(s: &amp;str);

 // 여기는 console.log
 #[wasm_bindgen(js_namespace=console, js_name=log)]
 fn log_u32(a: u32);

 // 여기도 console.log
 #[wasm_bindgen(js_namespace=console, js_name=log)]
 fn log_strings(a: &amp;str, b: &amp;str);
}

macro_rules! console_log {
 // log 함수랑 연결된다.
 ($($t:tt)*) =&gt; (log(&amp;format_args!($($t)*).to_string()))
}

// rust extern으로 하는 방법
fn rust() {
 log("Hello yceffort!");
 log_u32(42);
 log_strings("Hello", "yceffort")
}

// macro
fn using_macro() {
 console_log!("Hello {}!", "yceffort");
 console_log!("Hello yceffort");
}

// websys library
fn using_web_sys() {
 use web_sys::console;

 console::log_1(&amp;"Hello using web-sys".into());

 let js: JsValue = 4.into();

 console::log_2(&amp;"Logging values are".into(), &amp;js);
}

#[wasm_bindgen(start)]
pub fn run() {
 rust();
 using_macro();
 using_web_sys();
}
</code></pre>
<img alt="./images/consolelog.png" crossorigin="anonymous" loading="lazy" width="610" height="280" decoding="async" data-nimg="1" src="https://yceffort.kr/_next/image?url=%2F2022%2F03%2Fimages%2Fconsolelog.png&amp;w=1920&amp;q=75">
<h2 id="번들러-없이-직접-import-해서-사용하기">번들러 없이 직접 import 해서 사용하기</h2>
<code>Cargo.toml</code>
<pre><code>[package]
name = "without-bundler"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2.79"

[dependencies.web-sys]
version = "0.3.4"
features = [
 'Document',
 'Element',
 'HtmlElement',
 'Node',
 'Window',
]
</code></pre>
<code>lib.rs</code>
<pre><code>use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
 let window = web_sys::window().expect("there is no window in global");
 let document = window.document().expect("there is no document in window");
 let body = document.body().expect("there is no body in a document");

 let p_element = document.create_element("p").expect("fail to create P element");

 p_element.set_inner_html("Hello from rust");

 body.append_child(&amp;p_element).expect("fail to append element");
}

#[wasm_bindgen]
pub fn add(a: u32, b: u32) -&gt; u32 {
 a + b
}
</code></pre>
<img alt="./images/without-bundler1.png" crossorigin="anonymous" loading="lazy" width="530" height="294" decoding="async" data-nimg="1" src="https://yceffort.kr/_next/image?url=%2F2022%2F03%2Fimages%2Fwithout-bundler1.png&amp;w=1080&amp;q=75">
<img alt="./images/without-bundler2.png" crossorigin="anonymous" loading="lazy" width="272" height="106" decoding="async" data-nimg="1" src="https://yceffort.kr/_next/image?url=%2F2022%2F03%2Fimages%2Fwithout-bundler2.png&amp;w=640&amp;q=75">
<h2 id="js-코드를-import-해서-rust에서-실행하기">js 코드를 import 해서 rust에서 실행하기</h2>
가령 자바스크립트에 아래와 같은 코드가 있다고 가정해보자.
<code>defined-in-js.js</code>
<pre><code>export function name() {
 return 'Rust'
}

export class MyClass {
 constructor() {
 this._number = 42
 }

 get number() {
 return this._number
 }

 set number(n) {
 return (this._number = n)
 }

 toString() {
 return `My number is: ${this.number}`
 }
}
</code></pre>
위 코드를 rust에서 실행하기 위해서는 먼저 해당 js코드를 추상화하는 작업이 필요하다. 위 코드에 대한 추상화는 아래와 같이 작업하면 된다.
<pre><code>use wasm_bindgen::prelude::*;

#[wasm_bindgen(module = "/defined-in-js.js")]
extern "C" {
 // name 함수 정의
 fn name() -&gt; String;

 // 클래스 정의
 type MyClass;

 // 클래스에 new keyword를 constructor로 정의
 #[wasm_bindgen(constructor)]
 fn new() -&gt; MyClass;

 // getter
 #[wasm_bindgen(method, getter)]
 fn number(this: &amp;MyClass) -&gt; u32;

 // setter
 #[wasm_bindgen(method, setter)]
 fn set_number(this: &amp;MyClass, number: u32) -&gt; MyClass;

 // toString
 #[wasm_bindgen(method)]
 fn toString(this: &amp;MyClass) -&gt; String;
}

// console.log를 정의한다.
#[wasm_bindgen]
extern "C" {
 #[wasm_bindgen(js_namespace = console)]
 fn log(s: &amp;str);
}

#[wasm_bindgen(start)]
pub fn run() {
 log(&amp;format!("Hello from {}!", name())); // should output "Hello from Rust!"

 // 클래스를 선언한다
 let x = MyClass::new();
 // 테스트 코드!
 assert_eq!(x.number(), 42);
 // setter에 숫자 주입
 x.set_number(10);
 // toString
 log(&amp;x.toString());
}
</code></pre>
<code>run()</code> 함수 내부에 있는 것들이 순차적으로 실행될 것이다.
<pre><code>Hello from Rust!
My number is: 10
</code></pre></div></div>

Rust로 web assembly 만들어보기 (3) - Rust로 다양한 Web Assembly 만들어보기

댓글