WebAssembly - Go와 함께 작업하기

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 Go를 사용하여 WebAssembly의 세계에 흥미로운 여정을 떠납니다. 이 용어들이 지금은 외계어 같아도 걱정하지 마세요 - 이 튜토리얼의 끝까지 돌아오면 여러분은 이를 능숙하게 말할 수 있을 것입니다!

WebAssembly - Working with Go

WebAssembly이란?

코드에 들어가기 전에 WebAssembly이 무엇인지 이해해 보겠습니다. 상상해 보세요, 초고속 경주차(WebAssembly)가 어디서나(웹 브라우저) 엄청난 속도로 달릴 수 있는 것처럼. Go, C++, 또는 Rust와 같은 언어로 작성된 프로그램을 웹 브라우저에서 직접 실행할 수 있는 방법으로, 웹 애플리케이션을 더 빠르고 강력하게 만듭니다.

WebAssembly을 사용하는 이유

오늘 우리가 선택한 언어 Go는 프로그래밍 세계의 스위스 아머리 기 knife와 같습니다. 간단하고 효율적이며, 이제 웹 브라우저에서 실행할 수 있습니다. 웹 애플리케이션에 슈퍼파워를 주는 것과 같습니다!

Go 환경 설정

가장 먼저, 우리는 Go 환경을 설정해야 합니다. 이는 요리하기 전에 부엌을 준비하는 것과 같습니다.

공식 웹사이트에서 Go를 설치합니다 (https://golang.org/)
GOPATH를 설정합니다 (Go는 설치 중에 이를 안내해 줄 것입니다)
코드 편집기를 설치합니다 (Visual Studio Code를 추천하지만, 사용하시는 편집기로 사용해도 됩니다)

우리의 첫 Go WebAssembly 프로그램

simple "Hello, WebAssembly!" 프로그램으로 시작해 보겠습니다. 아직 모든 것을 이해하지 못해도 걱정하지 마세요 - 단계별로 설명해 나갈 테니까요.

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

이를 분해해 보겠습니다:

package main: 이는 Go에게 이가 우리 프로그램의 주요 패키지임을 알립니다.
import: 우리는 두 가지 패키지를 임포트합니다 - fmt은 인쇄를 위한 것이고, syscall/js은 JavaScript와 상호작용을 위한 것입니다.
func main(): 이는 우리 프로그램의 진입점입니다.
js.Global().Set("greet", js.FuncOf(greet)): 이는 우리의 greet 함수를 JavaScript에서 사용할 수 있게 합니다.
<-make(chan bool): 이는 우리의 프로그램이 실행되고 JavaScript 호출을 기다리게 합니다.
func greet: 이 함수는 이름을 받아와 HTML 요소에 인사말을 업데이트합니다.

우리의 Go 프로그램을 WebAssembly으로 컴파일하기

이제 우리의 Go 코드를 WebAssembly으로 변환해 보겠습니다. 터미널을 엽니다고 다음 명령어를 실행합니다:

GOOS=js GOARCH=wasm go build -o main.wasm

이 명령어는 Go에게 JavaScript(GOOS=js)와 WebAssembly(GOARCH=wasm)으로 우리의 프로그램을 컴파일하도록 지시합니다.

우리의 WebAssembly을 실행할 HTML 페이지 생성하기

우리의 WebAssembly을 로드하고 실행할 HTML 페이지를 만들어야 합니다. 다음은 간단한 예입니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</body>
</html>

이 HTML 파일은 다음을 수행합니다:

이름을 입력할 수 있는 입력 필드를 생성합니다.
우리의 greet 함수를 호출하는 버튼을 포함합니다.
WebAssembly 런타임(wasm_exec.js)을 로드합니다.
우리의 WebAssembly 파일(main.wasm)을 로드하고 실행합니다.

우리의 WebAssembly 애플리케이션 실행하기

이를 실행하려면 웹 서버가 필요합니다. 다음은 간단한 Python 명령어로 서버를 시작하는 방법입니다:

python -m http.server

이제 브라우저를 열고 http://localhost:8000로 이동합니다. 우리의 페이지를 볼 수 있을 것입니다!

출력 이해하기

이름을 입력하고 "Greet"를 클릭할 때, 개인 맞춤형 인사말이 표시됩니다. 이는 우리의 Go 함수가 브라우저에서 실행되는 WebAssembly 덕분입니다!

결론

축하합니다! 여러분은 첫 번째 Go WebAssembly 애플리케이션을 만들었습니다. 여기서 우리는 겨우 표면을 긁いただけ이지만, 흥미를 불러일으켰기를 바랍니다.

기억하시길, 코딩 배우는 새로운 언어나 악기 배우는 것과 같습니다. 연습, 인내심, 끈기가 필요합니다. 하지만 각 단계마다 새로운 가능성과 창의적 잠재력을 열어줍니다.

계속 코딩하고, 탐구하고, 가장 중요한 것은 즐겁게 만들어 나가세요!

방법	설명
`js.Global()`	전역 JavaScript 객체에 접근합니다
`js.FuncOf()`	Go 함수를 JavaScript 함수로 변환합니다
`js.Value`	JavaScript 값을 나타냅니다
`Call()`	JavaScript 메서드를 호출합니다
`Set()`	JavaScript 프로퍼티를 설정합니다
`Get()`	JavaScript 프로퍼티를 가져옵니다
`String()`	JavaScript 값을 Go 문자열로 변환합니다

이 표는 우리가 Go와 JavaScript 간 상호작용에 사용한 주요 메서드를 요약합니다. WebAssembly 여정을 계속하면서 이 메서드들은 매우 유용하게 사용될 것입니다!

Credits: Image by storyset

이전 튜토리얼:

WebAssembly - Rust와 함께 작업

다음 튜토리얼:

WebAssembly - Node.js와 함께 작업