WebAssembly란?
최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드로,
웹 브라우저에서 고성능 실행이 가능하도록 설계된 저수준 이진 포맷 및 실행 환경
네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해주며,
JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었다.
게임, 영상 처리, 데이터 분석, 머신러닝 같은 고성능이 필요한 웹 애플리케이션에서 유용하게 사용된다.
웹어셈블리 | MDN
https://developer.mozilla.org/ko/docs/WebAssembly
간단한 WebAssembly 실행 예시
c언어로 작성된 함수를 javascript에서 실행해 보자.
// hello.c
#include <stdio.h>
int add(int a, int b) {
return a + b;
}위와 같이 작성된 c 코드를 브라우저에서 실행하려면 우선 webAssembly로 컴파일해줘야 한다.
Emscription이라는 도구를 사용해서 컴파일해준다.
# Emscription 설치
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh # 환경변수 설정 (Linux, macOS)
# Windows에서는 emsdk_env.bat설치가 되었으면 아래의 명령어를 사용해 버전 정보를 확인
emcc -v
그 다음 emsdk 폴더를 나와서 미리 작성해둔 hello.c를 컴파일해주자.
이 상태에서 아래의 emcc 명령어를 실행하면 hello.js와 hello.wasm파일이 생성된다.
(add 함수가 _add라는 이름으로 내보내기, WASM을 함께 생성)
emcc hello.c -o hello.js -s EXPORTED_FUNCTIONS='["_add"]' -s WASM=1
이제 이 webAssembly를 실행할 수 있다.
아래와 같이 html을 작성하고 브라우저에서 실행해보자.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>WebAssembly 테스트</title>
<script src="hello.js"></script>
</head>
<body>
<h1>WebAssembly 테스트</h1>
<button onclick="runWasm()">WASM 실행</button>
<p id="result">결과:</p>
<script>
let wasmReady = false;
Module.onRuntimeInitialized = () => {
wasmReady = true;
};
function runWasm() {
if (!wasmReady) {
console.error('WASM이 아직 초기화되지 않았습니다!');
return;
}
const result = Module._add(10, 15); // WebAssembly 함수 호출
document.getElementById('result').innerText = '결과: ' + result;
}
</script>
</body>
</html>
WASM 실행 버튼을 클릭하면 정상적으로 결과가 출력된다.
깊이 공부하는 웹개발자