한국어

WebAssembly 튜토리얼

WebAssembly - 텍스트 형식: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 WebAssembly의 텍스트 형식, 애정어로 WAT이라고 부르는 세계로 흥미로운 여정을 떠납니다. 이전에 코딩한 경험이 없어도 걱정하지 마세요 - 우리는 매우 기초적인 부분부터 시작하여 함께 성장해 나갈 것입니다. 이 튜토리얼의 끝을 맺을 때까지, 당신은 프로처럼 WAT를 할 줄 알게 될 것입니다! (내가 무엇을 했는지 보셨나요? ?)

WebAssembly - Text Format

WebAssembly 텍스트 형식(WAT)은 무엇인가요?

이제부터 구체적인 내용으로 들어가기 전에, WAT이 정말 무엇인지 이해해 보겠습니다. WebAssembly 텍스트 형식은 WebAssembly 바이너리 코드의 인간이 읽을 수 있는 표현입니다. 더 무서운 바이너리 형식의 친절한, 접근하기 쉬운 사촌처럼 생각할 수 있습니다. WAT는 우리가 WebAssembly 코드를 텍스트 형식으로 작성하고 읽을 수 있게 해주어, 인간이 이해하고 작업하기 더 쉽습니다.

WAT를 배우는 이유는 무엇인가요?

"WAT를 배우는 데 왜 힘을 기울여야 할까요?" 고민할 수 있습니다. 그러나 WAT는 WebAssembly가 어떻게 작동하는지 이해하는 훌륭한 방법입니다. 악기 연주하기 전에 악보를 읽는 것과 같은 이치입니다 - 그것은 깊은 감상과 이해를 제공합니다.

WAT 코드 기초

이제 WAT 코드의 기본을 시작해 보겠습니다. 걱정 마세요; 우리는 단계별로 차근차근 가겠습니다. 얼마 지나지 않아 당신은 자신의 WAT 코드를 작성할 수 있을 것입니다!

모듈 구조

모든 WAT 프로그램은 모듈로 시작합니다. 모듈은 모든 코드를 담는 컨테이너라고 생각할 수 있습니다. 다음과 같이 보입니다:

(module
;; 여기에 코드를 작성하세요
)

이는 "안녕, 컴퓨터! 지금부터 네가 주의 깊게 듣고 있기를 바랍니다!"라고 말하는 것과 같습니다.

함수

함수는 우리의 WAT 코드의 기본적인 블록입니다. 특정 작업을 수행하는 작은 기계라고 할 수 있습니다. 두 숫자를 더하는 간단한 함수를 만들어 보겠습니다:

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

이를 해부해 보겠습니다:

  1. (func $add ...: 이는 "add"라는 이름의 함수를 선언합니다.
  2. (param $a i32) (param $b i32): 이는 우리의 입력 매개변수입니다. 우리는 두 개의 32비트 정수를 기대합니다.
  3. (result i32): 이는 우리의 함수가 32비트 정수를 반환할 것임을 지정합니다.
  4. local.get $a와 local.get $b: 이 줄은 우리의 입력 매개변수를 가져옵니다.
  5. i32.add: 이는 덧셈 연산을 수행합니다.

함수 내보내기

이제 우리는 함수를 만들었지만, 그것은 숨겨진 보물과 같습니다 - 모듈 밖에서는 사용할 수 없습니다! 이제 우리의 함수를 내보내서 다른 사람들도 사용할 수 있게 만들어 보겠습니다:

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

(export "add" (func $add)) 줄은 우리의 add 함수를 외부에서 사용할 수 있게 합니다. 우리의 작은 덧셈 기계에 "OPEN" 표지를 달아주는 것과 같습니다!

더 복잡한 연산

이제 기본적인 내용을 다 알고 있으므로, 좀 더 도전적인 것을 시도해 보겠습니다. 숫자의 팩토리얼을 계산하는 함수는 어떻게 될까요?

(module
(func $factorial (param $n i32) (result i32)
(local $result i32)
(local $i i32)

i32.const 1
local.set $result

i32.const 1
local.set $i

(loop $continue
local.get $i
local.get $n
i32.gt_u
if
local.get $result
return
end

local.get $result
local.get $i
i32.mul
local.set $result

local.get $i
i32.const 1
i32.add
local.set $i

br $continue
)

local.get $result
)
(export "factorial" (func $factorial))
)

와우, 이것은 입이 터질 만합니다! 이를 해부해 보겠습니다:

  1. 우리는 하나의 매개변수 $n과 두 개의 지역 변수 $result과 $i를 선언합니다.
  2. 우리는 $result을 1로 초기화하고 $i를 1로 초기화합니다.
  3. 우리는 $i가 $n보다 크거나 같아질 때까지 반복을 시작합니다.
  4. 각 반복에서 우리는 $result을 $i와 곱하고 $i를 증가시킵니다.
  5. 반복이 끝나면 우리는 $result을 반환합니다.

이 함수는 입력된 숫자의 팩토리얼을 계산합니다. 예를 들어, 5를 입력하면 5 4 3 2 1 = 120을 계산합니다.

WAT 메서드 표

이제 우리가 사용한 일부 일반적인 WAT 메서드와 몇 가지 더 추가한 표를 보여드리겠습니다:

메서드 설명
i32.add 두 개의 32비트 정수를 더합니다
i32.sub 두 개의 32비트 정수를 뺍니다
i32.mul 두 개의 32비트 정수를 곱합니다
i32.div_s 두 개의 32비트 정수를 부호 있는 방식으로 나눕니다
i32.const 일정한 32비트 정수를 선언합니다
local.get 지역 변수를 가져옵니다
local.set 지역 변수를 설정합니다
i32.gt_u 부호 없는 크기 비교
if 조건문을 시작합니다
loop 반복문을 시작합니다
br 특정 지점으로 이동합니다

결론

이제 그대, 코딩의 제자! WebAssembly 텍스트 형식의 세계로 첫 걸음을 뗐습니다. 우리는 모듈, 함수, 내보내기, 그리고 심지어 복잡한 팩토리얼 함수까지 다루었습니다. 기억하시라, 코딩을 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 하지만 각 줄의 WAT를 작성할 때마다, 당신은 WebAssembly 마법사로 가까워집니다!

계속 실험하고, 배우고, 가장 중요한 것은 WAT를 즐기세요. 얼마 지나지 않아 복잡한 알고리즘을 작성하고, 친구들에게 WebAssembly 기술을 자랑할 수 있을 것입니다. 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:
WebAssembly - 검증
다음 튜토리얼:
WebAssembly - WAT를 WASM로 변환