WASM, React 및 Go 시작하기

WebAssembly는 굉장합니다. 거의 뉴스가 아니지만 React 및 Go와 함께 어떻게 사용할 수 있습니까? 글쎄요, 솔직히 이것을 알아내는 데 도움이 되는 좋은 자료가 있습니다. 하지만 개인적으로 순조로운 경험은 아니었습니다. 나는 간단하고 최신 기사를 원했습니다. 하나는 누가 Webpack을 망치고 싶기 때문에 Create-React-App을 사용하는 솔루션을 찾고 있었습니까? 🙃🙃

이 짧고 간단한 튜토리얼의 목표는 내가 어떻게 모든 것을 연결하고 WebAssembly로 컴파일된 React 기반 Go 프로그램을 가지고 실행하는지 보여주는 것입니다. 다음과 같이 가정합니다.

Go가 설치되어 있습니다(1.11 이상).

Npm/Yarn이 설치되었습니다.

그럼 시작하겠습니다.

이 튜토리얼에서는 react의 입력 상자에 값을 입력한 다음 WebAssembly를 사용하여 이 값을 렌더링합니다. 간단하고 흥미롭죠?



저장소를 복제합니다here. 리포지토리에는 꺼낸 앱이 포함되어 있습니다. 나는 이 기사를 가능한 한 간략하게 작성하려고 노력하고 있으므로 (의도하지 않게) 몇 가지를 놓칠 수 있습니다.

루트에는 다음 코드가 포함된 main.go가 있습니다.

package main

import (
    "fmt"
    "syscall/js"
)

var c chan bool

// init is called even before main is called. This ensures that as soon as our WebAssembly module is ready in the browser, it runs and prints "Hello, webAssembly!" to the console. It then proceeds to create a new channel. The aim of this channel is to keep our Go app running until we tell it to abort.
func init() {
    fmt.Println("Hello, WebAssembly!")
    c = make(chan bool)
}

func main() {
    // here, we are simply declaring the our function `sayHelloJS` as a global JS function. That means we can call it just like any other JS function.
    js.Global().Set("sayHelloJS", js.FuncOf(SayHello))
    println("Done.. done.. done...")

    // tells the channel we created in init() to "stop".
    <-c
}

// SayHello simply set the textContent of our element based on the value it receives (i.e the value from the input box)
// the element MUST exist else it'd throw an exception
func SayHello(jsV js.Value, inputs []js.Value) interface{} {
    message := inputs[0].String()
    h := js.Global().Get("document").Call("getElementById", "message")
    h.Set("textContent", message)
    return nil
}

함수 sayHello는 두 개의 인수를 취합니다. 우리는 두 번째에 더 관심이 있습니다. 두 번째는 본질적으로 js.Value의 배열을 사용한다는 것입니다. JavaScript에서 원하는 만큼 인수를 전달할 수 있기 때문입니다. 값을 얻으려면 인덱스를 사용하면 됩니다. 따라서 우리의 경우 입력 상자에 입력된 값을 얻고 싶습니다.

message := inputs[0].String()

앞서 말했듯이 배열의 인덱스를 사용하여 원하는 값을 얻습니다.

h := js.Global().Get("document").Call("getElementById", "message")
h.Set("textContent", message)

위의 코드는 다음과 유사합니다.

let h = document.getElementById("message")
h.textContent = message

그래서 우리가 하고 있는 것은 id가 "message"인 요소의 텍스트를 입력 값으로 변경하는 것입니다.

다음을 실행하여 main.go를 컴파일합니다.

GOOS=js GOARCH=wasm go build -o ../client/public/main.wasm

사물의 클라이언트 측

App.js에는 componentDidMount()에 다음이 있습니다.

async componentDidMount() {
    let { instance, module } = await WebAssembly.instantiateStreaming(fetch("main.wasm"), window.go.importObject)
    await window.go.run(instance)
    this.setState({
      mod: module,
      inst: instance
    })
  }

main.wasm를 인스턴스화하고 인스턴스를 실행하고 있습니다. 즉, 이제 앱에서 WASM 함수를 호출할 수 있습니다. 또한 나중에 필요할 경우를 대비하여 모듈과 인스턴스를 상태로 설정합니다. 또한 window.go.run(instance) 를 수행하고 있음을 알 수 있습니다. 어디에서 왔습니까? 음, React 앱에서 이미 처리되었습니다. wasmjs 파일이 포함된 init_js 폴더가 있음을 알 수 있습니다. 이 파일과 WASM 파일을 JS와 함께 사용하는 데 필요한 wasm_exec.js 파일이 생성되어 웹팩을 사용하는 React 앱과 함께 번들로 제공됩니다. 따라서 Go() 인스턴스를 전역 창에 바인딩합니다. 따라서 Go()의 새 인스턴스를 선언하는 대신 창 개체 변수로 존재합니다.

 handleSubmit = async (e) => {
    e.preventDefault()
    window.sayHelloJS(this.state.message)
  }

이것은 이전에 Go 코드에 등록한 함수 sayHelloJS를 호출하는 것입니다! 우리는 창 개체 속성으로 액세스하고 있습니다. React에서 호출하기 때문입니다. sayHelloJS 로 호출하면 정의되지 않습니다.

<span id="message">
    Ayomide Onigbinde wrote this!!😉...💕 from WebAssembly and Golang
</span>

이 HTML 요소가 있습니다. id "message"가 있습니다. 이 요소는 우리가 WebAssembly로 컴파일한 Go 코드에서 조작한 것입니다! 따라서 이 요소는 존재해야 합니다. 그렇지 않으면 예외가 발생합니다. 이것은 입력 상자에 입력하는 값으로 변경됩니다! 그리고 WebAssembly(Go에서 컴파일)가 이 작업을 수행합니다! 🎉🎉

최대한 설명하려고 노력했어요! 명확하지 않은 것이 있으면 댓글을 달아주세요. 함께 알아 보겠습니다 😉😉.

tutorial을 위해 Aaron에게 큰 도움을 주고 Chris at LogRocket에게 큰 감사를 드립니다. huuuggeee 도움이었습니다! 또한 React with WASM에 대해 이해하는 데 도움이 되었습니다.