react에 rust webassembly 프로젝트 연결하기

기존에 webpack을 공부하며 react환경과 webpack을 이용하여 react 개발환경과 비슷한 프로젝트를 생성해보았다.

entry, output, plugin설정 module설정 등등 직접 해보며 react application 개발환경을 완성했다.

사실 가장 큰 목표는 wasm과 react를 연동해보는것 이었다.

CRA react라면 eject를 하거나 rewired를 설치하거나 여러가지 방법이 있겠지만, 아무래도 webpack을 이용하여 직접 설정한 프로젝트에서 연동해 보는게 좀더 욕심이 났기 때문에 webpack을 공부하고 react프로젝트를 세팅하는것도 공부해보았다.

 

(본 포스팅은 CRA가 아닌 webpack, babel로 react개발환경을 직접 설정한 후 진행했습니다.)

wasm 설정하기

 

1. wasm-pack을 설치한다.

아래 사이트에서 설치할 수 있다.

https://rustwasm.github.io/wasm-pack/

wasm-pack

2. rust와 cargo가 설치되어 있어야 한다. 먼저 rust를 설치 후 rust 프로젝트를 만들어 주자

여기서는 react application안에 rust 설치를 했다. (package.json과 동일한 경로)

https://www.rust-lang.org/learn/get-started

Getting started

3. Cargo.toml에 wasm관련 설정을 해준다.

 - dependencies에 wasm-bindgen설정

 - lib설정

[dependencies]
wasm-bindgen = "0.2.8"

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

4. rust 로직을 작성 후 build

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("{}", name));
}

 - 참조 문자열을 넘겨받으면 alert창을 띄워주는 코드이다.

5. rust프로젝트의 터미널에서 wasm-pack build를 실행해보자 그럼 pkg폴더가 생긴다.

pkg폴더 내에 여러가지 파일이 생긴다. (.wasm파일도 보인다.)

javascript는 이 폴더를 바라보게 될것이다.

 

여기까지는 이전에 작성한 Webassembly 프로젝트 만들기와 비슷하다.

https://kmj24.tistory.com/37

[WASM] Web Assembly with Rust 생성 및 실행해보기

react에서 wasm을 사용하려면 설정이 더 필요하다.

webpack설정

module.exports = {
  ...,
  resolve: {
    extensions: [..., '.wasm'],
  },
  ...,
  experiments: {
    syncWebAssembly: true,
    asyncWebAssembly: true
  }
};

1. application이 wasm확장자를 이해할 수 있도록 resolve에 '.wasm'을 추가한다.

2. experiments에서 Webassembly에 대한 설정을 true로 해준다.

해당 option에 대한 공식문서의 내용이다.

asyncWebAssembly는 최신 wasm 모듈을 지원하고,

syncWebAssembly는 webpack4와 같이 기존버전의 wasm 모듈을 지원한다고 한다.

asyncWebAssembly: Support the new WebAssembly according to the updated specification, it makes a WebAssembly module an async module.
syncWebAssembly: Support the old WebAssembly like in webpack 4.

https://webpack.js.org/configuration/experiments/

Experiments | webpack

4. App.tsx에 wasm모듈을 import하는 코드를 작성했다. (asynchronous로 import해야 됨)

wasm모듈을 import

rust코드

5. 프로젝트를 build해보면....!

 

성공적으로 wasm으로 build한 코드를 실행할 수 있다.