Wasm Book 튜토리얼

이 글에서는 러스트 웹어셈블리(Wasm) 튜토리얼을 통한 학습 경험을 공유하고자 합니다.
이 튜토리얼은 Wasm의 사용과 이점에 대한 통찰을 제공하며 흥미로운 여정이었습니다.
rust-wasm book 링크

 

동기

나는 Rust와 웹어셈블리가 어떻게 협력하여 웹에 고성능 코드를 제공할 수 있는지를 이해하기 위해 이 튜토리얼을 시작했습니다. Web assembly를 브라우저에서 실행하는 것은 웹 개발에 새로운 가능성을 열어주며, 그 가능성을 프로젝트에서 활용하고 싶었습니다.

사전 요구 사항

아래 조건이 필요하지만, 100% 능숙하지 않아도 됩니다.

• 러스트 프로그래밍 언어의 기본 지식.
• 웹 개발과 자바스크립트에 대한 이해.

Wasm이란 무엇인가

웹에서 고성능 어플리케이션을 동작시키기 위해 제안된, 로우레벨 형태의 코드이다.
Fast, safe, portable을 지향한다.
Spec

WebAssembly (abbreviated Wasm (https://webassembly.github.io/spec/core/intro/introduction.html#wasm)) is a _safe, portable, low-level code format_ designed for efficient execution and compact representation. Its main goal is to enable high performance applications on the Web, but it does not make any Web-specific assumptions or provide Web-specific features, so it can be employed in other environments as well.

주요 내용

튜토리얼의 주요 내용은 다음과 같습니다.

• wasm-pack을 통해 웹어셈블리용 새로운 러스트 프로젝트를 빌드하고 테스트한다.
• wasm-bindgen을 통해 JS에서 사용가능한 인터페이스를 만든다.
• JavaScript의 가비지 컬렉션 힙과 WebAssembly의 선형 메모리는 서로 다르게 동작한다.
  • WebAssembly는 가비지 컬렉션 힙에 직접 액세스할 수 없다.
  • JavaScript는 WebAssembly 선형 메모리에 스칼라 값의 ArrayBuffer로만 접근 가능하다.
• Rust로 wasm을 작성할 때 고려해야할 점(중요!)
  • wasm 메모리로의 copy를 최소화해야한다.
  • serialize, deserialize를 최소화 해야한다.
  • 보통, 크고 오래가는 자료구조는 rust로 구현하여 wasm 메모리에서 사용하여 객체 전체를 주고받지 않도로록 한다.
  • 컨트롤이 필요한 작업의 경우는 핸들을 JS에 제공한다.
• wasm-pack을 통해 wasm을 빌드하여 생성된 패키지를 자바스크립트로 불러와 사용한다.
  • .js, .wasm, .d.ts
• Wasm 모듈 테스팅 및 디버깅
• Wasm 모듈 프로파일링, 최적화, 퍼블리싱

튜토리얼은 "Game of life"라는 프로그램을 만드는 방법으로 진행됩니다. 따라가면서 wasm 프로젝트를 어떻게 시작하는지, 어떤 점을 고려해서 사용하는지 등을 한 단계씩 배우게 됩니다.

결론

rust-wasm 튜토리얼은 Rust를 통해 웹 어셈블리를 사용해보려는 개발자에게 좋은 시작입니다. 명확한 설명과 실용적인 예제를 통해 러스트나 웹어셈블리에 경험이 부족한 사람들에게도 접근하기 쉽게 만들어졌습니다.

이 튜토리얼에서 얻은 지식을 향후 웹 프로젝트에서 적용하는 일이 있으면 좋겠습니다. 이 글을 읽은 다른 분들도 튜토리얼을 통해 Rust와 웹어셈블리의 동작 방식을 살펴보는데 도움이 되었으면 좋겠습니다.

Happy Coding!