[Webassembly] Emscripten 사용하여 Webassembly 컴파일

1. C언어 Source File 작성

 

Emscripten을 사용하여 WebAssembly 아래와 같이 간단한 C언어로 예제 소스를 만들어 줍니다.

Visual Studio Code, Visual Studio 2022 등 편하신 환경에서 상관 없지만, Embarcadero Dev-C++ 환경에서 구구단을 출력해주는 프로그램을 작성 하였습니다. 작성 완료 하면 다음으로 WebAssembly 컴파일을 진행 하겠습니다.

/**
File Name : multiple.c
**/
#include <stdio.h>

void multiple(int grades)
{
	for(int i = 1; i <= 9; i++)
	{
		printf("%d * %d = %d\n", grades, i, grades*i);
	}
}

int main()
{
	multiple(2);
	
	return 0;
}

 

2. Emscripten 사용하여 WebAssembly 컴파일

Emscripten 명령어

WebAssembly 컴파일(wasm 파일 생성)을 위해서는 C언어로 작성된 코드파일이 있는 디렉토리로 이동하여, 아래와 같이 명령어를 입력해 줍니다. 컴파일에 성공하면 html, js, wasm 3가지 파일이 생성됩니다.

# WebAssembly 컴파일 명령어(wasm파일 생성)
emcc [input파일명] -s WASM=1 -o [output파일명]

#실제 명령어
emcc multiple.c -s WASM=1 -o multiple.html

컴파일 성공 결과

 

다음으로 wasm 파일을 실행하기 위해서 컴파일 결과물이 있는 경로에서 python web server를 사용하여 컴파일 결과물을 실행 할 수 있습니다. 꼭 python web server가 아니더라도 apach, xampp, nginx 등 다른 서버를 사용하여 실행해도 무관합니다. 웹서버 실행에 성공하면 http://localhost:8080/multiple.html 주소로 접속하면 결과물을 확인 할 수 있습니다.

#Python 웹서버 실행
python -m http.server [포트번호]

#예시
python -m http.server 8080

파이썬 웹서버 실행 결과

wasm 파일 실행 결과

 

이번 포스팅에서는 C언어로 작성된 간단한 프로그램 소스코드를 사용해  WebAssembly 컴파일을 진행해 봤습니다. 다음 포스팅은 이어서 C언어에서 Javascript, Javascript에서 C언어로 함수를 호출하는 예제를 포스팅 해보겠습니다. 여기까지 지루한 글 읽어주셔서 감사합니다 ㅎㅎ