영상 처리 과제로 C, C++, ffmpeg, SDL2 등을 활용해서 플레이어를 만드는 과제가 나왔는데, 아무래도 웹 개발 쪽으로 프젝들을 많이 하다보니 이것들을 WASM으로 구현해보고 싶었습니다.
WASM에 대한 배경 지식과 Emscripten등의 설명은 구글에 찾아보면 좋은 글이 많습니다만, 설치 방법과 사용법에 대한 한글 튜토리얼은 마땅한 것이 없어 해당 부분 위주로 작성해보도록 하겠습니다.
Mac, Linux 환경의 Setup Guide 입니다. Windows는 이대로 하면 안됩니다.
설치
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
Shell
공식 Document에는 위와 같이 설치하라고 나와있습니다.
이렇게 설치하면 Shell을 켤때마다 emsdk_env.sh 파일을 계속 실행해주어야 하므로, .zshrc나 .bashrc에 아래 명령어를 추가해줍니다.
source ~/{emsdk 설치 경로}/emsdk_env.sh > /dev/null 2>&1
Shell
Mac에서 brew를 사용한다면 아래와 같이 Homebrew를 이용해 설치할 수 있습니다.
brew install emscripten
Shell
잘 설치되었는지 아래 명령어를 통해 확인합니다.
emcc --version
em++ --version
Shell
VSCode Setup
VSCode는 Editor이기 때문에 기본적으로 C, C++ 환경 설정을 따로 해주어야 합니다. 더군다나 emscripten 같은 경우는 자동으로 잡지도 못합니다.
VSCode의 Intellisense를 사용하기 위해 Setup을 해주어야 합니다.
먼저, Terminal에 아래와 같이 입력합니다.
emcc -v
Shell
InstalledDir를 잘 기억해두고, (사진에서 /usr/local/opt/emscripten/libexec/)
VSCode Setting에서 위와 같이 설정하면 끝!