웹 어셈블리를 배우는 도중 내가 기대한 것과 다른 것들이 있어 정리하고자 한다.
오해 1. WASM는 자바스크립트를 완전히 대체하기 위해 만들어 졌다?
전혀 아니다. WASM는 자바스크립트의 기능을 어느 정도 대체할 수 있지만, 완전히 대체하기에는 힘들다.
자바 스크립트가 싱글 스레드, 호이스팅같이 어지간히 귀찮은 점이 많은 언어라는 것을 부정하기 힘들다. 거의 모든 브라우저를 중심을 맞추어진 언어이기 때문에 웬만한 모든 개발을 진행할 수 있지만, 그 대신 연산 속도가 느리다는 단점이 있다.
연산 속도가 느리다는 단점을 매꾸기 위해서 등장한 것이 웹 어셈블리이다.
자바스크립트가 수행하는 3D그래픽, 채굴 등, 무거운 작업을 저수준 언어로 제작한 웹 어셈블리로 돌리게 된다면 연산 속도는 더욱 빨라질 것이다.
그러나 자바스크립트에서 사용되는 DOM은 지원이 되지 않는다. 이는 보안 문제로 이어진다.
WASM는 설계상 완벽하지만, 그 자체의 모듈은 안전할 지라도 호출하는 자바스크립트 코드나 WASM 모듈에 취약점이 발견되면 해킹될 수도 있다.
또한 보안 문제로 WASM에서는 http, ws, sse등 어떠한 프로토콜도 지원하지 않는다.
마지막으로 WASM는 아직 웹 표준은 아니기 때문에 모든 브라우저에서 지원하지 않는다.
오해 2. WASM를 쓰려면 무조건 어셈블리어를 배워야 한다?
WASM은 저수준 바이너리 형식으로 실행되지만, 고수준 프로그래밍 언어를 사용하여 WASM 모듈을 작성하고 컴파일한다.
C/C++, Rust, AssemblyScript, Go 등 다양한 언어로 WASM 모듈을 작성할 수 있다.
각 언어에는 이를 WASM으로 컴파일하기 위한 도구들있어, 개발자는 익숙한 언어를 사용하여 WASM 모듈을 생성할 수 있다.
오해 3. WASM는 자바스크립트보다 무조건 빠르다?
항상 그런 것은 아니다.
WASM로 컴파일할 수 있는 언어는 C, C++, Rust와 같은 언어들이 있다.
컴파일이 되면 원래 속도와 비슷한 속도로 연산이 가능하게 된다.
WASM이 자바스크립트보다 빠르다고 기대할 수 있는 상황과 그렇지 않은 상황이 있다.
복잡한 수학 연산, 3D 그래픽 렌더링, 이미지 및 비디오 처리와 같은 작업, 게임 엔진, 과학 계산, 데이터 분석 및 머신러닝 등의 분야에서 WASM은 훨씬 더 효과적이지만, DOM 조작과 이벤트 처리는 자바스크립트가 더 잘한다.
간단한 로직같은 경우에도 자바스크립트에서도 충분히 가능하니 무조건 성능 좋다고 편리함을 버리지 않으면 좋겠다.
또한 WASM로 컴파일 할 수 있는 어느 언어든 WASM이 될 수 있기 때문에 자바스크립트 보다 속도가 느린 파이썬으로 WASM을 제작하게 된다면 오히려 속도가 느려질 수 있다.
오해 4. WASM는 무조건 브라우저에서만 실행 가능하다?
처음에는 웹 브라우저에서 실행하기 위해 설계되었지만, 현재는 브라우저 외의 다양한 환경에서도 사용할 수 있다.
Node.js는 WASM 모듈을 가져와 실행할 수 있는 기능을 제공한다.
const fs = require('fs');
const wasmBuffer = fs.readFileSync('example.wasm');
WebAssembly.instantiate(new Uint8Array(wasmBuffer)).then(wasmModule => {
const add = wasmModule.instance.exports.add;
console.log(add(5, 3)); // 출력: 8
});또한 WASM는 독립적으로 실행할 수 있다.
wasmer를 사용해서 어느 운영체제에서든지 .wasm 파일을 실행해 애플리케이션 처럼 사용 가능하다.
$ wasmer example.wasm오해 5. WASM는 한 번에 하나의 파일 밖에 사용하지 못한다?
자바스크립트로 만든 파일들을 여러 개 가져오듯이, WASM도 한 번에 여러 개의 파일을 가지고 올 수 있다.
예를 들어, c로 만들어진 wasm, rust로 만들어진 것, golang으로 만들어진 것을 한 파일에서 가지고 오려고 한다.
<!DOCTYPE html>
<html>
<head>
<title>WASM Combination</title>
<script type="text/javascript">
// C 함수 호출을 위한 WASM 파일 로드
const cModule = new WebAssembly.Module(await fetch('example_c.wasm').then(response => response.arrayBuffer()));
const cInstance = new WebAssembly.Instance(cModule);
const cAdd = cInstance.exports.add;
// Rust 함수 호출을 위한 WASM 파일 로드
const rustModule = new WebAssembly.Module(await fetch('example_rust.wasm').then(response => response.arrayBuffer()));
const rustInstance = new WebAssembly.Instance(rustModule);
const rustAdd = rustInstance.exports.add;
// Go 함수 호출을 위한 WASM 파일 로드
const goModule = new WebAssembly.Module(await fetch('example_go.wasm').then(response => response.arrayBuffer()));
const goInstance = new WebAssembly.Instance(goModule);
const goAdd = goInstance.exports.Add;
// 함수 호출 예시
console.log("Result of adding (C):", cAdd(3, 5));
console.log("Result of adding (Rust):", rustAdd(3, 5));
console.log("Result of adding (Go):", goAdd(3, 5));
</script>
</head>
<body>
</body>
</html>이러한 방식으로 WASM을 사용하면, 각 언어로 작성된 함수들을 자유롭게 조합하여 사용할 수 있다.
