[Wasm] 웹 어셈블리 파일 .wasm 생성하기

 

개발환경 구축

 

Wasm By Example-Hello World! 를 참고한 글이며 해당 방법 외에도

다른 컴파일 방법이 존재함을 사전에 밝힌다.

 

// github에서 emsdk 도구 가져오기
git clone https://github.com/emscripten-core/emsdk.git 

// 생성된 emsdk 디렉터리로 이동
cd emsdk

 

Emscripten의 도구인 emsdk를 github에서 가져온다.

해당 명령어를 입력하면 현재 위치한 디렉터리를 기준으로 emsdk가 불러와진다.

 

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
cd ../

 

다음으로 emsdk를 사용해 Emscripten의 최신 빌드를 설치하고 활성화한다.

 

// hello.c

#include <stdio.h>

int main() {
  printf("Hello! World!\n");
  return 0;
}

 

이제 c파일을 생성해 준 다음 아래 명령어로 컴파일해 준다.

 

// hello.c를 hello.js로 변환하고 그에 맞게 wasm으로 컴파일
emcc hello.c -o hello.js

 

이제 .wasm 파일을 확인 가능하며 node 명령어로 실행 가능하다.

 

node hello

 

wasm 파일이 생성되고, 내용이 출력되는 모습

 

참고로 이때의 .wasm 파일을 열어보면 해석이 불가한 문자의 나열로 저장되어 있음을 확인 가능하다.

 

hello.wasm

 

emcc hello.c -O3 -o hello.html

 

js 말고 html로도 변환하여 컴파일 가능하다.

이 html 파일이 제대로 동작하는지 아래 명령으로 확인 가능하다.

 

python3 -m http.server

 

이제 http://localhost:8000/hello.html로 접근하면 코드가 실행된 것을 확인 가능하다.

 

정상적으로 Hello! World!가 출력된 모습