Emscripten: WebAssembly Install & example 테스트

사전에 필요한 패키지

1. Windows
   • Python 3.6 이상 설치되어 있어야 한다.
   • git이 설치되어 있어야 한다.
   • 빌드 구성을 CMake로 할 경우 CMake가 설치되어 있어야 한다.
2. macOS
   • Python 3.6 이상 설치되어 있어야 한다.
   • Xcode Command Line Tools가 설치되어 있어야 한다.
   • git이 설치되어 있어야 한다.
   • 빌드 구성을 CMake로 할 경우 CMake가 설치되어 있어야 한다.
3. Linux
   • Python 3.6 이상 설치되어 있어야 한다.
   • git이 설치되어 있어야 한다.
   • 빌드 구성을 CMake로 할 경우 CMake가 설치되어 있어야 한다.

emsdk 다운로드 & 인스톨

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ git pull

# for Unix (macOS, Linux)
$ ./emsdk install latest
$ ./emsdk activate latest
$ source ./emsdk_env.sh

# for windows
$ emsdk install latest
$ emsdk activate latest
$ source emsdk_env.bat

emsdk 특정 버전 설치

저의 경우 Qt와 같이 Emscripten을 사용하는데 Qt버전과 잘 맞는 버전이 있어 해당버전을 설치해야 했습니다.
Qt를 사용하시는 분은 아래 URL을 참고하셔서 잘 맞는 emsdk 버전을 설치하시기 바랍니다.
저는 Qt 5.15.4, emsdk 1.39.8을 사용했습니다.
https://doc.qt.io/qt-5/wasm.html

$ ./emsdk install 1.39.8
$ ./emsdk activate 1.39.8
$ source ./emsdk_env.sh

설치 잘 되었는지 확인

별다른 에러가 없다면 아래처럼 버전정보만 나타납니다.

emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.39.8
clang version 11.0.0 (/b/s/w/ir/cache/git/chromium.googlesource.com-external-github.com-llvm-llvm--project 9dc84e9b02d1e402503906099d42fbae4da7d8d9)
Target: x86_64-apple-darwin19.6.0
Thread model: posix
InstalledDir: /Users/username/work/emsdk/upstream/bin
shared:INFO: (Emscripten: Running sanity checks)

테스트 해보기

시작은 hello, world죠!
main.cpp 파일에 아래와 같이 작성합니다.

#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}

빌드 & 테스트

main.cpp를 컴파일하면 javascript파일이 생성되는데 node를 통해 실행하면 터미널에 hello, world!가 print됩니다.

# 빌드하기
$ emcc main.cpp

# 실행하기
$ node a.out.js
hello, world!

html 파일 만드는 방법

-o main.html 옵션을 설정하면 산출물 main.html이 생성됩니다.

# html 파일 생성하기
$ emcc main.cpp -o main.html

# 실행하기
$ emrun main.html

실행결과는 아래와 같다.

결론

간단한 테스트 앱을 만들어봤고 개인적으로 이미 상용중인 앱을 포팅작업해보니 트러블 슈팅은 많았지만 C, C++ 코드를 비교적 빠르게 재사용할 수 있었다. 플랫폼간의 벽이 정말 사라지는 느낌이다.

References

https://emscripten.org/docs/getting_started/downloads.html
https://emscripten.org/docs/getting_started/Tutorial.html