Rust 코드로 작성하는 WASM(feat. react) (1) console.log

wasm을 학습하다 보니 생각보다 굉장히 잘 되어 있어서 싱방하여 몇가지 기능들을 포스팅해두려고 합니다.

이전에 react 개발환경에 wasm을 사용할 수 있도록 설정한 react 프로젝트가 있으므로 해당 프로젝트를 이용하여 wasm 코드를 작성했습니다.

react는 javascript가 아닌 typescript를 사용한 프로젝트입니다. :)

Console.log

console에도 수많은 기능이 있지만 여기서는 자주 사용하는 console.log기능만 포스팅 하겠습니다.

Cargo.toml dependency 설정

web-sys를 Cargo.toml에 추가해주어야 합니다.

...

[dependencies.web-sys]
version = "0.3.5"
features = [
  ...,
  'console',
  ...
]

...

web_sys는 포스팅하는 날짜 (2021-08-16) 기준으로 v0.3.52 입니다.

 

console.log는 총 8가지가 있습니다.

 - console.log

 - console.log_0

 - console.log_1

 - console.log_2

 - console.log_3

 - console.log_4

 - console.log_5

 - console.log_6

 - console.log_7

하이픈 '_'뒤의 number는 넘겨주는 인자의 갯수입니다.

use wasm_bindgen::prelude::*;
extern crate js_sys;

#[wasm_bindgen]
pub fn console_log(arg: js_sys::Array) {
  web_sys::console::log(&arg);
}

#[wasm_bindgen]
pub fn console_log_1(arg: String) {
  web_sys::console::log_1(&arg.into());
}

#[wasm_bindgen]
pub fn console_log_2(arg1: String, arg2: String) {
  web_sys::console::log_2(&arg1.into(),&arg2.into());
}

web_sys::console::log는 argument로 배열을 받습니다.

typescript에서 wasm 코드를 호출한다면..

const wasmMethod = import('../../../wasm-rust/pkg');
wasmMethod.then(module => {
  module.console_log(["arg1", "arg2", "arg3"]);
  module.console_log_1("arg");
  module.console_log_2("arg1", "arg2");
});

 

출력 결과