WASM (Web Assembly) 시작하기

브라우저에서 web aseembly를 지원하기 시작하면서 웹의 새로운 개발 형태가 열리게 되었다.
개인적으로 웹의 미래는 WASM이 주도할 것으로 생각한다.

WASM은 브라우저 엔진에서 low level의 코드로 작성되어 native만큼의 성능을 보여준다.
특이한 점은, WASM으로 모듈(라이브러리)을 만들어 클라이언트에서 개발할 때 패키지로 받아 import하여 사용한다는 점이다.
라이브러리의 형태를 띄기 때문에 클라이언트와 완전 독립적으로 개발이 가능하며, 의존성을 최소화 할 수 있다. 독립적이며 low level로 개발이 되기 때문에, javascript를 모르더라도 rust나 go 등 다른 언어로로 개발을 할 수 있어 웹 생태계 확장에 큰 도움이 될 것으로 생각한다.

 

Web Assembly 시작하기

Web Assembly는 상당히 다양한 언어로 개발이 가능하다.
그 중 개인적으로 공부하고 싶기도 했고, 활용도가 높을 것으로 생각되는 RUST로 선택을 했다.
TS와 비슷하다고 하는 Assembly Script를 사용할까도 싶었지만, 활용할 수 있는 폭이 적을 것 같았다.

https://webassembly.org/getting-started/developers-guide/

I want to… - WebAssembly

 

RUST 설치

사실 이 글은 공식 문서를 따라하며 Hello World를 찍는 정도에 불과하다.
다만, 정말 별 것도 없는 이 튜토리얼에서도 몇 개의 삽질을 하게 됐었기에 글을 작성한다.
https://developer.mozilla.org/ko/docs/WebAssembly/Rust_to_Wasm

Rust를 WebAssembly로 컴파일하기 - 웹어셈블리 | MDN

 

우선 RUST를 설치해야 한다.
개인적으로 home brew를 사용하는 것 보다, 공식 문서에서 제공하는 스크립트를 사용하기를 권장한다.
https://www.rust-lang.org/tools/install

Install Rust

이유는... 알고 싶지 않았지만, home brew를 사용하여 assembly를 설치할 경우 정상적으로 설치가 잘 되지 않는 경우가 있다.
이후 디렉터리의 경로에서도 문제가 발생할 수 있기 때문에 가급적 Rust 공식 홈페이지의 설치 방법을 따르도록 한다.

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

RUST를 설치하고 나면, 기본적으로 cargo가 설치가 된다.
npm처럼 cargo를 사용하여 wasm-pack을 설치한다.

cargo install wasm-pack

---

공식 문서상에서는 npm package로 배포하여 클라이언트에서 패키지를 추가해 사용하는 방식을 설명하고 있다.
로컬로 연결하는 방법도 가능하지만, 튜토리얼은 그대로 따라해보는게 편하니.. 그냥 따라한다.

우선 cargo를 사용하여 프로젝트를 만든다.

cargo new --lib hello-wasm

프로젝트를 만들어 들어가면 생성된 내용들이 있는데, 자세한건 튜토리얼 설명을 참고하길 바란다.
문법의 문제를 다루고 싶은 것은 아니고, 배포까지의 삽질을 조금 얘기하고 싶었기 때문이다.

패키지를 배포할 때 정보들은 Cargo.toml 파일을 참고하면 된다.

[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"
edition = "2018"

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

[dependencies]
wasm-bindgen = "0.2"

튜토리얼을 따라하고, 배포를 하기 전에 패키지를 빌드한다.

wasm-pack build --scope mynpmusername

빌드된 파일을 배포한다.

cd pkg
npm publish --access=public

만약 파일을 잘못 배포하여 다시 배포를 해야 한다면, 아쉽게도 이미 배포된 파일을 지우는 것은 번거로운 작업이기 때문에, 버전을 변경하여 올려야 한다.
이미 배포된 버전으로 재배포 할 때 에러가 발생할테니 유의해야 한다.

---

남은 작업은 클라이언트에서 package에 추가하고, hello world가 나오는지 확인하면 된다.