WebAssembly - 모듈

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 WebAssembly 모듈의 세계에 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 이를 탐구하겠습니다. 이 수업이 끝나면, 당신은 WebAssembly 모듈과 그 작동 방식에 대한 확고한 이해를 가지게 될 것입니다. 시작해 보겠습니다!

WebAssembly - Modules

WebAssembly는 무엇인가요?

모듈에 대해 이야기하기 전에, WebAssembly이 무엇인지 간단히 설명해 보겠습니다. 당신이 모래성을 짓고 있다고 상상해 보세요. WebAssembly은 그 모래성을 더 빠르고 강하게 짓는 특별한 그릇 같은 것입니다. 웹 개발의 세계에서 WebAssembly은 브라우저에서 실행되는 저수준 언어로, 거의 네이티브 성능에 가깝게 실행할 수 있습니다.

단계 1: WebAssembly 모듈 이해

WebAssembly 모듈은 WebAssembly 애플리케이션의 기본 블록입니다. 이를 레고 조각으로 생각해 보세요 - 각 모듈은 자체적인 단위로, 다른 것과 결합하여 놀라운 것을 만들 수 있습니다.

중요 개념

바이너리 형식: 모듈은 일반적으로 바이너리 형식(.wasm 파일)로 배포됩니다.
컴파일: 이 모듈은 C, C++, 또는 Rust와 같은 언어에서 컴파일됩니다.
import와 export: 모듈은 기능을 import하고 자신의 함수를 export할 수 있습니다.

단계 2: WebAssembly 모듈 생성 및 사용

이제 WebAssembly 모듈을 생성하고 사용하는 과정을 단계별로 살펴보겠습니다.

2.1 WebAssembly 모듈 작성

먼저, 우리는 모듈을 작성해야 합니다. 간단한 C 함수를 예제로 사용해 보겠습니다:

// add.c
int add(int a, int b) {
return a + b;
}

이 함수는 두 수를 더합니다. 간단하죠? 하지만 이를 WebAssembly 모듈로 어떻게 변환할까요?

2.2 WebAssembly으로 컴파일

이를 WebAssembly으로 컴파일하려면 Emscripten 도구를 사용합니다. 다음은 명령어입니다:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

이 명령어는 두 파일을 생성합니다:

add.wasm: 우리의 WebAssembly 모듈
add.js: 모듈을 로드하고 사용하기 위한 JavaScript 글루 코드

2.3 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 src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

코드 설명

이 코드에서 무엇이 일어나고 있는지 분해해 보겠습니다:

우리는 add.js 파일을 포함하여 모듈을 로드합니다.
Module.onRuntimeInitialized를 사용하여 모듈이 로드된 후 사용할 수 있도록 합니다.
우리는 Module._add(5, 3)를 호출하여 add 함수를 호출합니다.
결과는 페이지에 표시됩니다.

예제: 더 복잡한 모듈

간단한 예제를 본 후, 지금은 약간 더 복잡한 예제를 시도해 보겠습니다. 우리는 숫자의 팩토리얼을 계산하는 모듈을 만들겠습니다.

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

이와 같이 컴파일합니다:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

이제 HTML에서 사용해 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial</title>
</head>
<body>
<h1>WebAssembly Factorial Calculator</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Calculate</button>
<p>Result: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

출력

이를 브라우저에서 실행하면, 숫자를 입력할 수 있는 입력 필드가 보입니다. "Calculate" 버튼을 클릭하면 입력한 숫자의 팩토리얼을 계산하여 표시합니다!

결론

축하합니다! 지금 당신은 WebAssembly 모듈의 세계로 첫 걸음을 뗐습니다. 우리는 WebAssembly 모듈의 기본을 만들고, 컴파일하고, 웹 애플리케이션에서 사용하는 방법을 다루었습니다. 기억하세요, 이것이 시작에 불과합니다 - WebAssembly은 브라우저에서 고성능 컴퓨팅을 가능하게 하는 새로운 세계를 열어줍니다.

당신이 계속 여정을 떠나면, 게임에서 복잡한 데이터 처리에 이르기까지 WebAssembly이 어떻게 사용될 수 있는지 발견하게 될 것입니다. 계속 실험하고, 브라우저에서 가능한 한계를 넓히지 마세요!

메서드	설명
Module.onRuntimeInitialized	WebAssembly 모듈이 완전히 로드된 후 사용할 수 있도록 합니다
Module._functionName	WebAssembly 모듈에서 내보낸 함수를 호출합니다
emcc	Emscripten 컴파일러 명령어로 WebAssembly 모듈을 만듭니다

기억하세요, WebAssembly을 배우는 것은 자전거 타는 것과 같습니다 - 처음에는 어려울 수 있지만, 연습을 하면 곧 달릴 수 있을 것입니다. 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:

WebAssembly - "안녕하세요 세상"

다음 튜토리얼:

WebAssembly - 검증