# WASM by Example - 예제로 배우는 WASM

> Clean Markdown view of GeekNews topic #11891. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=11891](https://news.hada.io/topic?id=11891)
- GeekNews Markdown: [https://news.hada.io/topic/11891.md](https://news.hada.io/topic/11891.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-11-17T08:37:16+09:00
- Updated: 2023-11-17T08:37:16+09:00
- Original source: [wasmbyexample.dev](https://wasmbyexample.dev/home.en-us.html)
- Points: 24
- Comments: 1

## Topic Body

### 웹어셈블리(WebAssembly, Wasm) 소개  
- 웹어셈블리(Wasm)는 웹에서 실행되는 범용 로우레벨 바이트코드  
- Rust, AssemblyScript (Typescript와 유사), Emscripten (C/C++), TinyGo (Go) 등 다양한 언어의 컴파일 대상이 됨  
- 현재 모든 주요 브라우저에 제공되며 서버에서 실행하거나 WASI를 사용하여 시스템과 인터페이스하기 위한 런타임을 가지고 있음  
- Wasm은 소형 이진 형식을 제공하며, JavaScript 및 기타 호스트 언어와 함께 실행될 수 있는 예측 가능한 성능과 이식성을 갖춤  
  
### 'Wasm By Example'이란?  
- 'Wasm By Example'은 코드 스니펫과 주석이 달린 WebAssembly 예제 프로그램을 사용하여 WebAssembly에 대한 간결하고 실용적인 소개를 제공  
- WebAssembly의 기본 개념을 설명하는 예제들과 이를 활용한 보다 큰 애플리케이션의 공통 기능 구축 방법을 보여주는 예제들을 포함  
  
### 웹어셈블리(WebAssembly, Wasm)의 주요 개념 예제  
- WebAssembly의 주요 기본 개념을 표현하는 예제들을 제공함.  
- 이러한 예제들은 WebAssembly로 프로젝트를 구축하는 가장 편리하거나 생산적인 방법은 아닐 수 있으나, 학습이나 애플리케이션의 단순하거나 저수준 부분 개발에 적합함.  
  - Hello World   
  - Exports   
  - WebAssembly Linear Memory  
  - Importing Javascript Functions Into WebAssembly  
  
### 개념을 적용한 예제  
- 개념적 예제를 확장하여 이러한 단순 예제들이 어떻게 더 큰 애플리케이션의 일반적인 기능을 구축하는 데 사용될 수 있는지 보여줌  
  - Reading and Writing Graphics  
  - Reading and Writing Audio  
  
### 에코시스템 도구 및 언어 기능 예제  
- 선택한 프로그래밍 언어의 도구, 라이브러리, 기능을 강조하는 예제들을 제공  
  - Passing High Level Data Types with `wasm-bindgen`  
- 이러한 생태계 구성 요소는 강력한 애플리케이션을 구축하는 데 크게 도움이 될 수 있음.  
  
### 웹 브라우저 외부의 웹어셈블리(WebAssembly) 예제  
- WebAssembly System Interface(WASI), 독립 실행형 WebAssembly 런타임, WASI를 사용하는 애플리케이션을 위한 도구 및 클라우드 컴퓨팅, 사물인터넷(IoT) 장치와 같은 작업을 위한 사용 사례를 강조하는 예제들을 제공  
- WebAssembly는 브라우저 웹에 적합한 주요 기능을 가지고 있으며, 이러한 기능들은 브라우저 외부에서도 인기 있는 선택이 됨  
  - WASI Introduction  
  - WASI Hello World  
  
### GN⁺의 의견  
이 글에서 가장 중요한 점은 WebAssembly(Wasm)가 다양한 프로그래밍 언어를 위한 컴파일 대상이며, 웹 브라우저뿐만 아니라 서버 및 다양한 시스템에서도 사용될 수 있는 범용성을 가지고 있다는 것임. 'Wasm By Example'은 초급 소프트웨어 엔지니어들이 WebAssembly를 쉽게 이해하고 실제로 적용해볼 수 있는 실용적인 예제들을 제공함으로써, 이 기술이 흥미롭고 매력적인 이유를 잘 보여줌. WebAssembly의 이식성과 성능은 현대 웹 개발에 있어 중요한 요소이며, 이 글은 그러한 기술을 배우고자 하는 사람들에게 유익한 정보를 제공함.

## Comments



### Comment 20642

- Author: neo
- Created: 2023-11-17T08:37:17+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38276075) 
- WASM을 사용하여 다양한 언어로 작성된 라이브러리를 만들고, 이를 다른 언어에서 가져와 사용하는 것이 흥미로운 사례임.
- 모든 주요 브라우저에서 지원되는 WASM 명령 세트는 매력적이지만, 간단한 'hello_world' 데모조차도 여러 메가바이트의 페이지를 생성하는 것에 대해 의문을 제기함.
- WASM의 구조와 사용에 대한 개요와 설명이 예제와 함께 제공되어야 한다는 의견이 있음. 또한, Cloudflare 워커가 WASM을 엣지 서버에서 실행할 수 있고, Swift 커뮤니티도 WASM 컴파일을 지원한다는 점을 언급함.
- 웹어셈블리(WebAssembly)의 S-expr 구문에 대한 이해를 돕기 위해 해당 카테고리를 추가하는 것이 유용할 것이라는 제안이 있음.
- VSCode에서 WASM 디버깅을 작동시키는 방법에 대한 가이드를 작성한 사람이 있으며, 이는 새로운 WASM DWARF 디버깅 확장 기능을 사용함.
- 직접 컴파일러를 만들면서 WASM을 배우는 책 'WASM from the Ground Up'이 진행 중이며, 현재까지 유익한 정보를 제공한다고 함.
- WASM이 언젠가 브라우저에서 자바스크립트를 대체할지 궁금해하는 의견이 있음.
- Unity 데모가 WASM과 WebGPU를 사용하여 실행되는 예시가 해커뉴스에 게시됨.
- WASM 어셈블러 컴파일러에 대한 정보를 찾는 데 어려움을 겪고 있는 사람이 있음.
- WASM을 사용하여 비자바스크립트 언어로 작성된 간단한 'add' 예제가 런타임에 매개변수를 받을 수 있는 상호작용적인 기능을 가지고 있음에 놀라움을 표현함.