WebAssembly (WASM) for High Performance Apps · 강의

JavaScript에서 WASM 불러오고 실행하기

JavaScript를 사용하여 웹 브라우저에서 컴파일된 WASM 모듈을 불러오고 내보낸 함수를 호출하는 방법을 배웁니다.

JavaScript에서 WASM 불러오고 실행하기은(는) CoddyKit의 무료 WebAssembly (WASM) for High Performance Apps 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 WebAssembly (WASM) for High Performance Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. WebAssembly (WASM) for High Performance Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Getting WASM into the Browser

Welcome! You've learned how to compile C/C++ code into a .wasm file. Now, it's time to bring that powerful WebAssembly module to life in your web browser.

This lesson will guide you through loading your .wasm module using JavaScript and invoking its functions.

Browser's WASM Gateway

Modern web browsers provide a global WebAssembly object. This object is your primary interface for interacting with WebAssembly modules.

It allows you to compile, instantiate, and manage WASM code.
We'll use its methods to fetch and load our .wasm file into the browser's runtime.

Streamlined WASM Loading

The most efficient way to load a WASM module from a network request is using WebAssembly.instantiateStreaming().

It directly streams the raw bytes from the network response.
It compiles and instantiates the module in one go, saving time and resources.
This method expects a Response object, typically obtained from the fetch() API.

Our Simple C Function

Let's assume we have a very basic C function that adds two numbers, like this one. This function will be compiled into add.wasm (as covered in the previous lesson) and then exported from the WASM module.

This export makes it callable directly from JavaScript.

/* add.c */
int add(int a, int b) {
    return a + b;
}

Fetching the .wasm File

Before we can instantiate our WASM module, we need to fetch the .wasm file itself. The standard fetch() API is perfect for this task.

It returns a Promise that resolves to a Response object, which we'll then pass to instantiateStreaming().

async function fetchWasmModule() {
  const response = await fetch('add.wasm');
  // Check if the request was successful
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response;
}

Instantiating the WASM Module

The WebAssembly.instantiateStreaming() function takes the Response and returns a Promise. This Promise resolves to an object containing two important properties:

module: The compiled WebAssembly module itself.
instance: An object representing the running instance of the module, which holds its exports.

async function loadAndInstantiate() {
  const response = await fetch('add.wasm');
  const wasmObject = await WebAssembly.instantiateStreaming(response);
  console.log(wasmObject); // Shows { module: WebAssembly.Module, instance: WebAssembly.Instance }
  return wasmObject.instance;
}

Accessing Exported Functions

Once you have the instance object, you can access any functions or global variables that were exported from your WASM module. These are available through its exports property.

For our C add function, when compiled to WASM and exported, it will be accessible in JavaScript as instance.exports.add.

Full Example: Load & Call WASM

Here's a complete JavaScript code snippet. It fetches add.wasm, instantiates it, and then calls the exported add function with two numbers, logging the result.

This code would run inside a <script> tag in an HTML file.

async function runWasmAdder() {
  try {
    const response = await fetch('add.wasm');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const { instance } = await WebAssembly.instantiateStreaming(response);

    // Call the exported 'add' function
    const num1 = 15;
    const num2 = 25;
    const sum = instance.exports.add(num1, num2);

    console.log(`${num1} + ${num2} = ${sum}`);
    // Expected output: "15 + 25 = 40"

  } catch (error) {
    console.error("Error loading or running WASM:", error);
  }
}

runWasmAdder();

Inside the Instance Object

The instance object is your primary interface to the running WebAssembly module. It contains more than just exported functions:

instance.exports: An object holding all functions, globals, and memory exported by the WASM module.
instance.module: A reference to the compiled WebAssembly.Module object.
instance.memory: If the WASM module uses memory, this provides access to its linear memory (an ArrayBuffer).

Quick Check: WASM Loading

You've seen how to efficiently load and instantiate a WASM module. What is the key JavaScript function used for this purpose when streaming from a network request?

Recap: WASM in the Browser

Fantastic work! You've successfully learned how to bring your compiled WebAssembly modules to life in the browser. Here's what we covered:

Using the global WebAssembly object.
Efficiently loading with WebAssembly.instantiateStreaming().
Accessing exported functions via the instance.exports object.
Calling WASM functions directly from JavaScript.

Now you can execute high-performance code right in your web applications!

자주 묻는 질문

“JavaScript에서 WASM 불러오고 실행하기” 강의는 무료인가요?

네 — “JavaScript에서 WASM 불러오고 실행하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 WebAssembly (WASM) for High Performance Apps 강의 전체를 잠금 해제할 수 있습니다. WebAssembly (WASM) for High Performance Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“JavaScript에서 WASM 불러오고 실행하기”에서 뭘 배우나요?

JavaScript를 사용하여 웹 브라우저에서 컴파일된 WASM 모듈을 불러오고 내보낸 함수를 호출하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 WebAssembly (WASM) for High Performance Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

WebAssembly (WASM) for High Performance Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 WebAssembly (WASM) for High Performance Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“JavaScript에서 WASM 불러오고 실행하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 WebAssembly (WASM) for High Performance Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 WebAssembly (WASM) for High Performance Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← WebAssembly (WASM) for High Performance Apps(으)로 돌아가기