WebAssembly - WASM: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! WebAssembly, 짧게는 WASM이라고 부르는 세상으로의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 코드를 한 줄도 작성해 본 적이 없으신 분이라도 걱정 마세요 - 우리는 가장 기초적인 부분부터 함께 차근차근 진행할 것입니다. 당신의 좋아하는 음료를 한 잔 마시고 편안하게 앉아, 시작해 보겠습니다!

WebAssembly는 무엇인가요?

WebAssembly은 웹 브라우저가 이해하는 비밀의 언어입니다. 웹 애플리케이션이 더 빠르고 효율적으로 실행되도록 설계되었습니다. 웹사이트에서 복잡한 비디오 게임을 플레이하는 것을 생각해 보세요. WebAssembly 없이는 느리고 불편할 수 있습니다. 하지만 WebAssembly이 있다면, 게임기에서 플레이하는 것처럼 매끄럽게 실행될 수 있습니다!

간략한 역사

WebAssembly은 웹 애플리케이션이 더 강력해지기를 원하는 열망에서 탄생했습니다. 2015년에 최초로 발표되었고, 2017년에는 모든 주요 웹 브라우저에서 지원되었습니다. 기술 세계에서는 매우 빠른 속도입니다 - 당신의 좋아하는 소셜 미디어 앱이 새로운 기능을 갱신하는 것처럼 빠르죠!

스택 머신 모델

이제 조금 기술적이 보이지만 사실 매우 간단한 개념에 대해 이야기해 보겠습니다: 스택 머신 모델. 이것이 WebAssembly이 어떻게 작동하는 핵심입니다.

스택이란?

스택은 접시 쌓아놓은 것을 생각해 보세요. 접시는 쌓아놓거나 떼는 것은 쌓인 것의 정상에서만 할 수 있습니다. 컴퓨터 용어로는 스택에 추가하는 것을 "push"라고 하고, 스택에서 제거하는 것을 "pop"라고 합니다.

WebAssembly이 스택을 어떻게 사용하나요?

WebAssembly은 이 스택 개념을 사용하여 연산을 수행합니다. 매우 효율적인 요리사가 주방에서 일하는 것처럼, 항상 다음에 사용할 재료(또는 숫자)를 정확히 알고 있습니다.

간단한 예를 보겠습니다:

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

이 것을 보고 당황하지 마세요! 지금은 이게 외계어처럼 보일 수 있지만, 차근차근 설명해 보겠습니다:

1. (module): "여기는 새로운 레시피책"이라고 말하는 것입니다.
2. (func $add ...): "add"라는 새로운 함수(또는 레시피)를 정의합니다.
3. (param $a i32) (param $b i32): 우리의 함수는 두 가지 재료(파라미터), 즉 32비트 정수를 받습니다.
4. (result i32): 결과는 또한 32비트 정수입니다.
5. local.get $a: 첫 번째 숫자를 스택의 정상에 올립니다.
6. local.get $b: 두 번째 숫자를 첫 번째 숫자 위에 올립니다.
7. i32.add: 스택 정상의 두 숫자를 더하고, 그 결과로 대체합니다.

그래서 이 함수를 5와 3으로 호출하면, 스택은 다음과 같이 보입니다:

1. 스택이 비어 있을 때: []
2. local.get $a 후: [5]
3. local.get $b 후: [5, 3]
4. i32.add 후: [8]

그렇게 하면! 우리는 WebAssembly의 스택 머신 모델을 사용하여 두 숫자를 더했습니다.

WebAssembly을 왜 사용하나요?

"이게 복잡해 보이는데, 왜 JavaScript를 그냥 사용하지 않나요?"라고 궁금해하실 수 있습니다.非常好的 질문입니다! WebAssembly은 다음과 같은 특별한 능력을 가지고 있습니다:

1. 속도: 특정 작업에서 WebAssembly은 JavaScript보다 훨씬 빠를 수 있습니다.
2. 효율성: 더 적은 메모리와 처리 능력을 사용합니다.
3. 언어 유연성: C++나 Rust와 같은 언어로 코드를 작성하고 WebAssembly으로 변환할 수 있습니다.

sandcastle을 짓는 것을 생각해 보세요. JavaScript는 손으로 짓는 것처럼 - 유연하고 시작하기 쉬워요. WebAssembly은 특별한 도구 세트를 가지고 있는 것처럼 - 설정에는 시간이 걸리지만, 더 복잡하고 견고한 성을 짓는 데 사용할 수 있습니다!

첫 번째 WebAssembly 프로그램

이제 두 숫자를 더하는 간단한 프로그램을 작성해 보겠습니다. WebAssembly의 인간이 읽을 수 있는 형식인 WAT(WebAssembly Text Format)을 사용할 것입니다.

(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)

이 것은 우리의 이전 예제와 매우 유사합니다. 여기서는 다음을 합니다:

1. 모듈(our program)을 정의합니다.
2. 두 개의 32비트 정수를 받고 하나를 반환하는 함수 $add를 생성합니다.
3. 첫 번째 숫자($left)를 스택에 올립니다.
4. 두 번째 숫자($right)를 첫 번째 숫자 위에 올립니다.
5. 스택에 있는 두 숫자를 더합니다.
6. 함수를 내보내어 JavaScript에서 사용할 수 있도록 합니다.

이를 웹 페이지에서 사용하기 위해서는 다음과 같은 JavaScript 코드가 필요합니다:

fetch('add.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const add = results.instance.exports.add;
console.log(add(5, 3));  // 출력: 8
});

이 코드는 우리의 WebAssembly 모듈을 로드하고, 그 인스턴스를 생성한 다음, add 함수를 호출하여 숫자 5와 3을 더합니다.

결론

축하합니다! 지금까지 WebAssembly의 세상으로 첫 걸음을 냈습니다. 우리는 WebAssembly이 무엇인지, 스택 머신 모델을 어떻게 사용하는지, 그리고 첫 번째 WebAssembly 프로그램을 작성하는 방법을 다루었습니다.

코드를 배우는 것은 새로운 언어나 악기 배우는 것과 같아요 - 연습과 인내가 필요합니다. 모든 것이 한 번에 이해되지 않는다면 낙담하지 마세요. 계속 실험하고 배우면, 언제쯤 WebAssembly로 놀라운 것을 만들 수 있을 거예요!

다음 강의에서는 더 복잡한 WebAssembly 개념을 더 깊이 탐구하고, 정말 멋진 프로젝트를 시작해 보겠습니다. 그 전까지, 행복하게 코딩하세요!

WebAssembly 메서드	설명
local.get	로컬 변수나 파라미터를 검색합니다
local.set	로컬 변수의 값을 설정합니다
i32.add	두 개의 32비트 정수를 더합니다
i32.sub	두 개의 32비트 정수를 뺍니다
i32.mul	두 개의 32비트 정수를 곱합니다
i32.div_s	두 개의 32비트 정수를 부호 있는除法합니다
i32.rem_s	두 개의 32비트 정수의 부호 있는 나머지를 구합니다
i32.and	두 개의 32비트 정수의 비트 연산 AND를 수행합니다
i32.or	두 개의 32비트 정수의 비트 연산 OR를 수행합니다
i32.xor	두 개의 32비트 정수의 비트 연산 XOR를 수행합니다
i32.shl	32비트 정수를 왼쪽으로 이동합니다
i32.shr_s	32비트 정수를 부호 있는 오른쪽으로 이동합니다
i32.eq	두 개의 32비트 정수의 동등성을 비교합니다
i32.ne	두 개의 32비트 정수의 불평등성을 비교합니다
i32.lt_s	두 개의 32비트 정수의 부호 있는 작은 값 비교를 합니다

Credits: Image by storyset