참조
- https://developer.mozilla.org/ko/docs/WebAssembly - https://d2.naver.com/helloworld/8786166
web assembly 🧐?
-
최신 웹 브라우저에서 C/C++, Rust 언어 등으로 작성된 코드를 바이너리 형식(low-level language) 으로 변환하여 사용할 수 있게 해주는 기술입니다.
(😆 브라우저에서 C/C++, Rust 언어로 작성된 코드를 컴파일해서 사용할 수 있는 기술이네요!) -
이 기술은 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 웹에서 실행가능하게 하는 목적과 js 에 단점을 보완하기 위해 등장했습니다.
어떻게 시작하지?
- AssemblyScript (자바스크립트로 작성된 모듈을 웹어셈블리로 컴파일) : https://docs.assemblyscript.org/
- Emscripten (C/C++ 모듈을 웹어셈블리로 컴파일) : https://developer.mozilla.org/ko/docs/WebAssembly/C_to_wasm
쉽게 시작하기에는 AssemblyScript 가 좋다. Emscripten 은 상대적으로 뭔가 준비해야하는 작업들이 많다.
Emscripten 가볍게 맛보기
- https://emscripten.org/docs/getting_started/downloads.html
- window 환경에서 실습을 진행하였으며, 해당 sdk 는 c 드라이브에 설치하였다.
- https://www.python.org/downloads/ -> 파이썬을 설치하여야한다.
emsdk install latest
emsdk activate latest
emcc -v
(이유는 모르겠지만, 이렇게 하면 해당 명령어창에서만 되고 툴에서 제공되는 명령어창에서는 안된다..ㅠㅠ)
파이썬 설치전에는 아무 반응이 없었으나 파이썬이 필요하다는 문서내용을 보고 설치 후, 해보니 잘 된다.
emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.39.15
clang version 11.0.0 (Cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 57d361bd2f3668eefa7028ad4a2d616317ed437c)
Target: x86_64-pc-windows-msvc
Thread model: posix
InstalledDir: C:/emsdk/upstream/bin
Registered Targets:
wasm32 - WebAssembly 32-bit
wasm64 - WebAssembly 64-bit
x86 - 32-bit X86: Pentium-Pro and above
x86-64 - 64-bit X86: EM64T and AMD64
shared:INFO: (Emscripten: Running sanity checks)
이러한 정보가 출력이 된다면, 일단 해당 명령어창을 이용하여 wasm 파일을 생성할 수 있다.- test.c
#include <stdio.h>
#include <emscripten/emscripten.h>
void EMSCRIPTEN_KEEPALIVE printMessage() {
printf("어렵구나?!!\n");
}
int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
return a + b;
}
int main() {
printf("hello, world!\n");
return 0;
}
-> emcc -s WASM=1 ./src/wasm/test.c -o ./src/wasm/test.js
emcc [대상파일] -o [결과파일]
-s 는 컴파일 옵션을 지정
위와 같이 진행을 했다면, js 파일과 wasm 파일이 생성된것이 보인다. wasm 자체를 ArrayBuffer 를 이용하여 API 호출하여 인스턴스를 생성해서 사용도 가능하나(이부분은 실습을 진행하면서 계속 에러 및 예기치 못한 오류로 인해 현재 포기)
그래서 js 를 간단하게 import 해서 사용하는 방법만을 소개한다.
// index.html
<script src="./wasm/test.js"></script>이런식으로 포함시키면 main() 가 돌아서 hello, world! 가 출력되는게 보인다.
그런데, 안에 있는 다른 함수를 호출못하는가? js 파일에 글로벌변수로 정의가 되어있다.
_printMessage();
_add();
이런식으로 다른 스크립트에서 호출이 가능하다.
_printMessage(); // error 발생 -> 비동기로 호출하여 처리하다보니 초기화가 안되서 바로 이렇게 호출하면 에러가..
setTimeout(() => {
// wasm 이 비동기로 불러오기 때문 + 컴파일하면 _함수명으로 사용
_printMessage();
}, 350);
c 언어 파일에 보면, 처음보는 헤더파일이 있는데 저게 있어야 외부에서 함수를 호출가능하게 모듈로 만들어준다고 한다.(emcc 자체가 최적화를 잘해서 사용안하는거는 추가를 안해준다고 한다)
emcc 설치 및 설정 과정이 귀찮다 (아니 어렵다)
처음 시작 시, https://developer.mozilla.org/ko/docs/WebAssembly/C_to_wasm 참고 바람
잘 쓰면 좋겠으나, C/C++ 은 GC가 없기때문에 메모리 관리나 최적화 관련해서는 로우레벨 수준으로 학습을 해둬야할거 같다
https://emscripten.org/index.html -> 공식 사이트 설명들이 그렇게 친절하지 않다 -_-;
