WebAssembly - JavaScript API: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? 오늘 우리는 WebAssembly과 그의 JavaScript API로daki 흥미로운 여정을 시작할 것입니다. 코드를 한 줄도 작성해본 적이 없어도 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 진행하겠습니다. 이 튜토리얼이 끝나면, WebAssembly로 무엇을 할 수 있는지 놀라게 될 것입니다!

WebAssembly은 무엇인가요?

JavaScript API에 들어가기 전에 WebAssembly이 무엇인지 빠르게 이해해 보겠습니다. 상상해 보세요. 매우 빠른 경주용 차(그것이 WebAssembly입니다)가 브라우저에서 빠르게 달리며, 웹 애플리케이션이 번개 속도로 실행됩니다. 하지만 이 차를 몰기 위해서는 특별한 열쇠가 필요합니다 - 그것이 JavaScript API입니다. 이것은 JavaScript(웹 개발에서 자주 사용하는 언어)가 WebAssembly과 소통하고 제어할 수 있게 해주는 인터페이스입니다.

이제 이 API의 다양한 부분을 탐구해 보겠습니다. 먼저, 우리의 WebAssembly 코드를 웹 페이지에 어떻게 넣을 수 있는지 알아보겠습니다.

fetch() 브라우저 API: WebAssembly 모듈 가져오기

WebAssembly을 사용하는 첫 번째 단계는 WebAssembly 모듈을 가져오는 것입니다. 이를 통해 경주 차를 구매하는 것과 같은 것입니다. 우리는 브라우저 API의 일부인 fetch() 함수를 사용하여 이를 수행합니다.

다음은 예제입니다:

fetch('my_wasm_module.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(result => {
// WebAssembly 모듈을 사용합니다
});

이를 나누어 설명하겠습니다:

1. fetch('my_wasm_module.wasm'): 이 줄은 브라우저에게 우리의 WebAssembly 파일을 가져오도록 지시합니다.
2. .then(response => response.arrayBuffer()): 응답을 받으면, 그것을 ArrayBuffer로 변환합니다(파일의 원시 데이터라고 생각하세요).
3. .then(bytes => WebAssembly.instantiate(bytes)): 이제 bytes를 사용하여 WebAssembly 인스턴스를 만듭니다(이에 대해 나중에 더 설명하겠습니다).
4. .then(result => { ... }): 마지막으로, 우리는 WebAssembly 모듈을 사용할 수 있습니다!

WebAssembly.compile(): 모듈 준비

이제 우리의 WebAssembly 파일이 있으니, 컴파일해야 합니다. 이는 우리의 경주 차를 조립하는 것과 같은 것입니다.

WebAssembly.compile(wasmBuffer)
.then(module => {
// 컴파일된 모듈을 사용합니다
});

이 예제에서 wasmBuffer는 fetch() 호출에서 얻은 ArrayBuffer입니다. compile() 함수는 이 버퍼를 받아 WebAssembly 모듈로 변환합니다.

WebAssembly.Instance: 준비된 모듈

인스턴스는 준비된 차와 같습니다. 초기화된 WebAssembly 모듈로, 실행 준비가 되었습니다.

WebAssembly.instantiate(wasmModule)
.then(instance => {
// 인스턴스를 사용합니다
let result = instance.exports.myFunction(5, 3);
console.log(result);
});

여기서 wasmModule은 앞서 컴파일한 모듈입니다. instantiate() 함수는 이 모듈의 인스턴스를 생성합니다. 그런 다음, myFunction과 같은 우리의 WebAssembly 모듈에서 내보낸 함수를 사용할 수 있습니다.

WebAssembly.instantiate: 일괄 접근 방식

WebAssembly.instantiate는 일괄 처리 센터와 같습니다. 이는 바이너리 코드(ArrayBuffer) 또는 컴파일된 모듈을 받아 Compilation과 Instantiation을 동시에 수행합니다.

WebAssembly.instantiate(wasmBuffer, importObject)
.then(result => {
const instance = result.instance;
const module = result.module;
// 인스턴스와 모듈을 사용합니다
});

이 예제에서 wasmBuffer는 우리의 원시 WebAssembly 코드이며, importObject는 WebAssembly 모듈로 가져올 값을 포함하는 객체입니다(예를 들어, WebAssembly 코드가 호출할 수 있는 JavaScript 함수).

WebAssembly.instantiateStreaming: 최고 속도 demon

마지막으로, instantiateStreaming을 소개합니다. 이는 우리의 경주 차가 문 앞에 배달되고 조립되어, 몰 준비가 되어 있는 것과 같습니다!

WebAssembly.instantiateStreaming(fetch('my_wasm_module.wasm'), importObject)
.then(result => {
const instance = result.instance;
// 인스턴스를 사용합니다
});

이 함수는 fetch()와 인스턴스화 단계를 하나로 결합하여 WebAssembly 모듈을 가장 빠르게 실행할 수 있도록 합니다.

메서드 요약

여기서 우리가 배운 메서드를 요약한 표를 제공합니다:

메서드	설명
fetch()	WebAssembly 파일을 가져옵니다
WebAssembly.compile()	WebAssembly 모듈을 컴파일합니다
WebAssembly.Instance	WebAssembly 인스턴스를 나타냅니다
WebAssembly.instantiate	WebAssembly 모듈을 컴파일하고 인스턴스화합니다
WebAssembly.instantiateStreaming	Fetch와 인스턴스화를 한 단계로 수행합니다

이제 그렇게! WebAssembly과 그의 JavaScript API로daki 첫 걸음을 냈습니다. 코드를 배우는 것은 운전을 배우는 것과 같습니다 - 연습이 필요하지만, 곧 정보 슈퍼 하이웨이에서 프로처럼 달릴 수 있을 것입니다!

계속 실험하고, 배우고, 가장 중요한 것은 즐기세요! 누가 알겠는가? 다음 번에는 당신이 이 수업을 가르치는 사람이 될 수도 있습니다! ?

Credits: Image by storyset