WebAssembly - WAT을 WASM으로 변환

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 WebAssembly의 세계로 흥미로운 여정을 떠납니다. 특히 WebAssembly 텍스트(WAT)를 WebAssembly 바이너리(WASM)로 변환하는 것에 중점을 두겠습니다. 이 용어들이 낯설게 느껴지시나요? 걱정 마세요. 우리는 모든 것을 단계별로 설명할 테니까요. 이 튜토리얼이 끝나면, 당신은 프로처럼 WAT를 WASM으로 변환할 수 있을 것입니다!

WebAssembly - Convert WAT to WASM

WebAssembly는 무엇인가요?

변환 과정에 들어가기 전에, WebAssembly이 무엇인지 이해해 보겠습니다. 모래성을 짓는다고 상상해 보세요. WebAssembly은 마법의 통로처럼 순식간에 완벽한 모래 구조를 만들어내는 것입니다. 이렇게 하면 해변에서의 창작물이 더 빠르고 인상적이 됩니다.

웹 개발의 세계에서 WebAssembly은 C++나 Rust와 같은 언어로 작성된 코드를 웹 브라우저에서 거의 네이티브 속도에 가깝게 실행할 수 있는 저수준 언어입니다. JavaScript와 함께 작동하여 웹 애플리케이션의 성능을 향상시킵니다.

WAT와 WASM: 기본 개념

이제 WAT와 WASM에 대해 이야기해 보겠습니다. WAT는 모래성의 도면을 인간이 읽을 수 있는 언어로 작성한 것처럼 생각해 보세요. 반면 WASM은 마지막 모래성처럼 컴퓨터가 이해하고 빠르게 실행할 수 있는 형태입니다.

WAT (WebAssembly Text Format): 인간이 읽을 수 있는, 어셈블리 언어와 유사
WASM (WebAssembly Binary Format): 컴퓨터가 읽을 수 있는, 압축된 바이너리 형식

WAT에서 WASM으로 변환: 과정

WAT를 WASM으로 변환하는 것은 모래성 도면을 실제 모래 구조로 변환하는 것과 같습니다. 이 과정을 단계별로 따라가 보겠습니다.

단계 1: WAT 코드 작성

먼저 우리는 WAT 코드를 작성해야 합니다. 간단한 예제를 보여드리겠습니다:

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

이 WAT 코드는 두 개의 32비트 정수를 더하는 함수를 정의한 모듈을 정의합니다. 모든 세부 사항을 이해하지 못하셔도 걱정 마세요. 이를 단계별로 설명해 드리겠습니다:

(module ...): 우리의 모든 WAT 코드를 감싸는 것입니다.
(func $add ...): "add"라는 이름의 함수를 정의합니다.
(param $a i32) (param $b i32): 두 개의 32비트 정수 매개변수를 지정합니다.
(result i32): 함수가 32비트 정수를 반환한다고 나타냅니다.
local.get $a와 local.get $b: 함수 매개변수를 가져옵니다.
i32.add: 두 수를 더합니다.
(export "add" (func $add)): 함수를 모듈 외부에서 접근할 수 있게 합니다.

단계 2: WAT 파일 저장

이 코드를 .wat 확장자로 저장한 파일에 저장하세요. 예를 들어, add.wat입니다.

단계 3: WAT에서 WASM으로 변환 도구 사용

이제 WAT를 WASM으로 변환하는 마법의 순간입니다. WebAssembly Binary Toolkit(WABT)의 일부인 wat2wasm 도구를 사용하겠습니다.

다음과 같이 사용하시면 됩니다:

WABT를 설치하세요 (이미 설치되어 있지 않다면):

macOS에서: brew install wabt
Ubuntu에서: sudo apt-get install wabt
기타 시스템에서는 WABT GitHub 저장소를 확인하세요

터미널을 엽니다 و wat2wasm 명령어를 실행합니다.

wat2wasm add.wat -o add.wasm

이 명령어는 wat2wasm을 사용하여 add.wat 파일을 add.wasm 파일로 변환합니다.

단계 4: WASM 파일 확인

축하드립니다! 우리는 첫 번째 WASM 파일을 생성했습니다. 하지만 이게 정말 작동했는지 어떻게 확인할 수 있을까요? WABT 도구 중 하나인 wasm2wat를 사용하여 WASM를 다시 WAT로 변환하고 원래 코드와 일치하는지 확인해 보겠습니다:

wasm2wat add.wasm -o add_verified.wat

이제 add_verified.wat 파일을 텍스트 편집기로 엽니다. 원래 WAT 코드와 매우 유사하게 보이지만, 약간의 포맷 차이가 있을 수 있습니다.

WASM 파일 사용

이제 WASM 파일을 가지고 있으니, 웹 애플리케이션에서 어떻게 사용할 수 있을까요? 간단한 HTML과 JavaScript 예제를 보여드리겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Result: <span id="result"></span></p>
<script>
(async () => {
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(5, 3);
document.getElementById('result').textContent = result;
})();
</script>
</body>
</html>

이 HTML 파일은 우리의 WASM 모듈을 로드하고 add 함수를 5와 3의 인자로 호출합니다. 결과(8)는 페이지에 표시됩니다.

결론

이제 우리는 WAT 코드를 작성하고, 그것을 WASM으로 변환하고, 마침내 웹 페이지에서 사용하는 여정을 마쳤습니다. 기억해 두세요, 이것은 얼음의 일角일 뿐입니다. WebAssembly은 고성능 웹 애플리케이션의 무한한 가능성을 열어줍니다.

프로그래밍 여정을 계속하면서 다양한 WAT 함수를 실험하고 WebAssembly의 기능을 탐구해 보세요. 누구 knows? 당신은 세상을 바꿀 만한 웹 애플리케이션을 만들 수도 있을 것입니다!

미래의 WebAssembly 마법사 여러분, 행복하게 코딩하세요!

Credits: Image by storyset