WASM(WebAssembly) - 개발환경 구축 및 Hello World 출력

안녕하세요, 오랜만에 블로그에 글을 작성해 보네요.
요즘 학교 생활을 열심히 해서 많이 피곤하네요🔥
그럼 일단 본론으로 들어가겠습니다.

WASM(WebAssembly)란?

웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.

WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다. MDN Web Doc-웹어셈블리

개발환경 구축하기

Wasm By Example-Hello World!를 참고하여서 개발환경을 구축하였습니다.

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

GitHub에서 emsdk를 clone 하시면 됩니다.

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

다음으로 emsdk를 사용하여 Emscripten의 최신 안정 빌드를 얻고 활성화하여 사용할 수 있습니다.
마지막 명령은 emcc, Emscripten 컴파일러 도구 및 기타 필요한 모든 것을 찾을 수 있도록 경로를 설정합니다.

Compile

일단 자신이 가장 좋아하는 IDE를 사용하시면 됩니다.
필자의 경우에는 VS Code를 사용하여서 개발하였습니다.

// hello.c
#include <stdio.h>

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

다음 명령을 활용하여서 컴파일을 할 수 있습니다.

emcc hello.c -o hello.js

간단히 말해서 hello.c를 hello.js로 변환하고 그에 맞는 WASM 파일 생성을 하게 됩니다.

ndoe hello

를 입력하게 되면 정상적으로 Hello! World!가 출력되는 것을 보실 수 있습니다.
또한 HTML 파일로도 출력할 수 있습니다.

emcc hello.c -O3 -o hello.html

위 명령어를 사용하게 되면 간단하게 HTML 파일로 변환하여서 파일을 만들 수 있습니다.