WebAssembly 입문해 보았다

문득 WebAssembly를 시험해 보려고 생각하고, 해 보았습니다.

WebAssembly란?

WebAssembly는 브라우저에서 코드를 빠르게 실행합니다. 웹의 프론트 측에서 동작하는 언어라고 하면 javascript였습니다. javascript는 동적 타입 언어로 인터프리터 타입이므로 직관적이고 간단하게 기술할 수 있는 반면, 타입 추론하면서 실행하기 때문에 느리다는 특징이 있습니다. 그래서 WebAssembly에서 나온 것은 정적 입력 언어를 중간 코드로 컴파일하고 바이너리 형식으로 변환합니다. 이 바이너리 포맷을 사용하는 것으로 파일 사이즈의 축소와 구문 분석의 처리를 단축하는 것에 의한 실행 속도의 고속화를 실현하는 기술이라고 하는 이해입니다. (30분 정도 공부한 이해)

아직 읽지 않았지만 아래 기사 WebAssembly의 이해를 깊게하는 데 좋을 것 같습니다.
htps : // 코 m / 준타 시라이 / ms / 3 아 c92412720789576f22

입문

실행 OS는 Ubuntu 18.04.4에서했습니다. 우분투 16.04가 가장 좋은 것 같습니다.
아래 사이트와 같이 움직여 보았습니다.
htps : // 우에바세 mbly. 오 rg / 갓찐 g-s r d /에서

우선,

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

emsdk라는 것을 install하는 순서입니다, Github에서 clone 해 와서 install.
나머지는

source ./emsdk_env.sh --build=Release

경로를 통해 명령 실행 준비가 완료되었습니다.
여기에서 메인으로 C 언어로 Web API를 만듭니다.
새로운 hello 디렉토리를 작성해, 그 바로 아래에 이하의 내용의 hello.c를 작성합니다.

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}

hello.c 가능하면,

emcc hello.c -o hello.html

를 실행하여 hello.c를 컴파일.
컴파일 후 디렉토리에,

ll
total 256
drwxr-xr-x 2 kerneltyu kerneltyu   4096  5月 10 02:37 ./
drwxr-xr-x 3 kerneltyu kerneltyu   4096  5月 10 02:35 ../
-rw-r--r-- 1 kerneltyu kerneltyu     84  5月 10 02:37 hello.c
-rw-r--r-- 1 kerneltyu kerneltyu 102675  5月 10 02:37 hello.html
-rw-r--r-- 1 kerneltyu kerneltyu 115460  5月 10 02:37 hello.js
-rw-r--r-- 1 kerneltyu kerneltyu  21716  5月 10 02:37 hello.wasm

같은 파일을 만들 수 있습니다. javascript 파일과 html과 바이너리 형식의 wasm이 있습니다.

emrun --no_browser --port 8080 .

에서 시작하여 localhost:8080에 액세스하면



이러한 화면이 표시됩니다.
이상, WebAssembly의 입문을 해 보았습니다!

의문점

잘 모르는 곳이 있었기 때문에 기록으로 남겨 둡니다.
1. 이번 예라면 javascript를 사용하는 부분이 없었던 것 같다. (생성된 html이나 js에는 상당한 양의 코드가 쓰여졌지만) 지금은 장점을 잘 모른다. 어쩌면 더 js를 사용하는 것처럼 실험해 볼 필요가있을 것입니다.
2. 브라우저에서 디버깅할 때는 어떻게 할까? 로그 토출하면서가 될까. js만큼 풍부한 디버그 환경에서는 없을 것 같다.
3. html과 wasm을 어떻게 연관시키는지 몰랐다.

감상

C 언어로 Web 앱 개발을 할 수 있는 시대가 다가오고 있다고 실감할 수 있었던 것은 좋았습니다. 점점 Web 앱이 풍부해지고 있는 것나 엣지에서의 실행의 수요가 높아지는 등의 배경을 한결같이 느낍니다. 자신 적으로는 엣지에서의 활용을 깊게 해 나가고 싶을까 생각했습니다.
문득 생각하고 서기 시작했지만, 더욱 흥미가 왔습니다. 좀 더 공부해 보자.

참고

WebAssembly와 Rust가 만드는 서버리스 미래
WebAssembly