이번 포스팅에서는 C/C++ 언어로 작성된 웹어셈블리 파일(.wasm)을 생성하는 방법을 알아보겠습니다
사용할 도구
Emscripten
C/C++ 언어를 웹어셈블리로 변환하는 컴파일러입니다
지금부터 Emscripten SDK의 설치 방법을 알아보겠습니다
공식 권장 환경은
Linux/MacOS입니다
윈도우를 사용하시는 개발자 분이라도 WSL2를 이용하여 리눅스 환경에서 작업하시는 것을 권장 드립니다만, 윈도우 환경에서의 설정도 알아보도록 하겠습니다
설치 순서
Python 설치
Emscripten 실행을 위해서는 파이썬 3.6 이상의 버전이 필요합니다
파이썬 설치 방법은 따로 안내하지는 않겠습니다
Emscripten SDK Download & Install
먼저 git clone을 통해 emscripten SDK를 받습니다
1
git clone https://github.com/emscripten-core/emsdk
혹은 Emscripten github에서 zip 형태로 다운로드 받는 방법도 있습니다
clone 위치 혹은 다운로드 받은 zip을 압축 해제한 경로로 이동하여 설치를 진행하고, 환경 변수 설정을 해야 합니다. 윈도우와 리눅스/맥의 경우 환경설정 파일이 다르므로 따로 나눠서 설명하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Windows (Powershell)
## emsdk 폴더로 이동
cd emsdk
## 설치
.\emsdk install latest
## 환경변수 등록
.\emsdk_env.bat
## 설치 & 버전 확인
emcc --version
# Linux/MacOS
## 절차는 윈도우에서와 동일
cd emsdk
./emsdk install latest
source emsdk_env.sh
emcc --version
버전 정보가 잘 나오면 정상적으로 설치된 것입니다.
이제 C/C++로 작성된 코드를 웹어셈블리로 만들 준비가 끝났습니다!
Make WebAssembly
아래의 예시 코드를 웹어셈블리로 만드는 과정을 함께 따라가보겠습니다
1
2
3
4
5
#include <stdio.h>
int add(int num1, int num2) {
return num1 + num2;
}
두 정수를 인자로 받아서 그 합을 반환하는 단순한 덧셈 코드입니다.
코드 수정
C/C++ 코드를 웹어셈블리로 컴파일하기 위해서는 아래의 두 가지 작업이 필요합니다.
- Header 추가
- 예약어 추가
코드로 확인해보겠습니다.
1
2
3
4
5
6
7
8
9
#include <stdio.h>
// EMSCRIPTEN_KEEPALIVE 를 사용하기 위해 필요한 헤더
#include <emscripten.h>
// 예약어 추가
EMSCRIPTEN_KEEPALIVE
int add(int num1, int num2) {
return num1 + num2;
}
EMSCRIPTEN_KEEPALIVE?
기본적으로 Emscripten이 생성한 코드는 항상main()함수를 호출하고 다른 함수는 불필요한 코드로 제거됩니다.
EMSCRIPTEN_KEEPALIVE 예약어를 함수 앞에 사용하게 되면 해당 함수는 데드코드로 제거되지 않습니다.
실제 호출해서 사용할 함수들에는 잊지 않고 작성하도록 해야겠습니다.
빌드
크게 두 가지로 나누어 생각해 보겠습니다.
- WebAssembly file + glue javascript
- Only WebAssembly file
회사에서 프로젝트를 진행할 때, 외부 이식성을 고려하여 js 파일을 생성하지 않고 wasm 파일만 생성되도록 방향을 잡았었습니다.
이번 포스팅에서는 제가 진행했던 방식을 소개하고, 추후 Rust를 이용한 웹어셈블리 생성을 정리할 때 js 파일을 함께 소개하도록 하겠습니다.
먼저, 여러 파일로 분리된 C/C++ 프로젝트를 모두 오브젝트 파일로 컴파일 합니다. 저는 cmake를 사용하여 진행했습니다.
하나의 프로젝트가 여러 파일로 분산되어 있는 경우, cmake를 통해 make 파일을 생성하는 것이 좋은 방법입니다.
자세한 cmake 사용 방법은 추후 다른 포스트에서 다루도록 하고, 이번 포스트에서는 필자가 회사에서 사용하던 방법을 안내하도록 하겠습니다.
먼저 CMakeLists.txt파일을 작성합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# CMakeLists.txt
CMAKE_MINIMUM_REQUIRED ( VERSION 3.16 )
PROJECT ( "CRYPTO" ) # Project name 정의
SET ( PROJECT_VERSION_MAJOR 0 )
SET ( PROJECT_VERSION_MINOR 1 )
SET ( CMAKE_BUILD_TYPE Debug )
SET ( CMAKE_VERBOSE_MAKEFILE true )
SET ( CMAKE_C_COMPILER "emcc" ) # 컴파일러 정의
FILE ( GLOB SRC_FILES ./*.c ) # 대상 정의
ADD_LIBRARY( crypto OBJECT ${SRC_FILES} ) # 최종 산출물을 오브젝트 파일로 정의
cmake를 이용하여 실제 컴파일을 수행할 make 파일을 만드는데, 이 때 필요한 파일이 CMakeLists.txt 입니다.
아래의 명령어로 cmake를 수행하면 실제 빌드에 필요한 Makefile이 생성되고, make 명령어로 빌드를 진행할 수 있습니다.
1
2
3
cmake CMakeLists.txt
# Make file 생성
make
make 명령어를 수행하면, 수행한 디렉토리 내에 CMakeFiles 라는 폴더가 생성되고 내부에 CMakeLists.txt에서 정의한 {라이브러리 이름}.dir의 이름을 가진 폴더가 생성됩니다. 이 예시에서는 CMakeFiles/crypto.dir이 되겠죠?
이후 폴더 내부로 진입하여 아래의 명령어를 수행하면 웹어셈블리 파일이 생성됩니다.
1
2
3
4
emcc ./*.o -O1 --no-entry -o crypto.wasm
# crypto.wasm은 최종적으로 나오게 되는 웹어셈블리 파일 이름이 됩니다. 원하는 파일 명을 입력하면 되겠습니다.
# 컴파일러 옵션 중 -O1은 최적화 레벨을 의미하고, -no-entry의 경우 단독 웹어셈블리 파일 생성을 의미합니다.
# 더 많은 옵션이 있으며 공식 사이트에서 확인 바랍니다.
여기까지 기존 C/C++ 프로젝트를 웹어셈블리 파일로 만드는 것을 알아봤습니다.
글루 코드를 생성하는 방법과 Rust를 이용하는 방법 등 아직 정리하지 못한 부분이 많네요. 추후 포스트에서 다루도록 하겠습니다.