WebAssembly (WASM) for High Performance Apps · 강의

복잡한 데이터 구조 전달

WASM과 JavaScript 사이에서 문자열, 배열 및 사용자 지정 객체를 효율적으로 전송하는 전략을 배웁니다.

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

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

Complex Data in WASM

When building high-performance applications with WebAssembly (WASM), you often need to exchange more than just simple numbers between your WASM module and JavaScript.

How do you pass a string?
What about an array of numbers?
Or even a custom object structure?

This lesson explores strategies for efficiently handling these complex data types.

WASM's Linear Memory

The key to passing complex data lies in understanding WASM's linear memory. This is a contiguous block of memory (like a large array of bytes) that is shared between your WASM module and the JavaScript environment.

WASM functions can only return numbers. So, instead of passing the entire data, we pass a pointer (a memory address, which is just a number!) to where the data resides in this shared memory.

Strings: Pointer & Length

Strings are sequences of characters. To pass a string from WASM to JavaScript, the WASM module will:

Write the string's bytes into its linear memory.
Return two pieces of information to JavaScript:
- The starting memory address (pointer) of the string.
- The length of the string (how many bytes it occupies).

JavaScript then uses these to read the bytes from the shared memory and decode them into a JavaScript string.

C String to JS Example

Here's a C function that returns a pointer to a string. When compiled with Emscripten, JavaScript can call this function and then read the string from the WASM memory.

EMSCRIPTEN_KEEPALIVE makes the function callable from JavaScript.

#include <emscripten/emscripten.h>
#include <string.h>

// A static string for demonstration
const char* myString = "Hello WASM!";

EMSCRIPTEN_KEEPALIVE
const char* getGreetingPtr() {
  return myString;
}

EMSCRIPTEN_KEEPALIVE
int getGreetingLength() {
  return strlen(myString);
}

int main() {
  // Required for a complete C program
  return 0;
}

Arrays: Contiguous Data

Numeric arrays (like int[] or float[]) are similar to strings. They are stored as a contiguous block of values in WASM's linear memory.

To pass an array, WASM returns:

A pointer to the first element of the array.
The number of elements in the array.

JavaScript then reads the raw bytes from the shared memory, knowing the type and size of each element (e.g., 4 bytes for an integer).

C Array to JS Example

This C code creates an array, populates it, and provides functions to get its pointer and length. JavaScript would then use Module.HEAP32 (for 32-bit integers) to access the elements.

#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc

int* dynamicArray = NULL;
int currentArrayLength = 0;

EMSCRIPTEN_KEEPALIVE
int* createAndGetArray(int size) {
  if (dynamicArray) {
    free(dynamicArray);
  }
  dynamicArray = (int*)malloc(size * sizeof(int));
  currentArrayLength = size;
  for (int i = 0; i < size; ++i) {
    dynamicArray[i] = i * 10 + 5;
  }
  return dynamicArray;
}

EMSCRIPTEN_KEEPALIVE
int getArrayLength() {
  return currentArrayLength;
}

int main() {
  // Required for a complete C program
  return 0;
}

Custom Objects (Structs)

Passing custom objects (like structs in C/C++) is more involved. These objects are collections of different data types (e.g., an integer, a float, and a string).

The strategy is to manually lay out the object's fields in WASM's linear memory. WASM then returns a pointer to the start of this memory block. JavaScript must then know the exact memory layout (offsets and types of each field) to correctly read the data.

C Struct to JS Example

This C example defines a Person struct and a function to create one. JavaScript would receive a pointer and then read values from specific offsets in the WASM memory buffer, knowing the struct's layout.

id (int) at offset 0
age (int) at offset 4
height (float) at offset 8

#include <emscripten/emscripten.h>
#include <stdlib.h> // For malloc
#include <string.h> // For strcpy

typedef struct {
  int id;
  int age;
  float height; // assuming 4 bytes after age
  char name[16]; // Fixed-size string buffer
} Person;

EMSCRIPTEN_KEEPALIVE
Person* createPerson(int id, int age, float height, const char* name) {
  Person* p = (Person*)malloc(sizeof(Person));
  p->id = id;
  p->age = age;
  p->height = height;
  strncpy(p->name, name, sizeof(p->name) - 1);
  p->name[sizeof(p->name) - 1] = '\0'; // Ensure null termination
  return p;
}

int main() {
  // Required for a complete C program
  return 0;
}

JS Allocates WASM Memory

What if JavaScript needs to pass complex data *into* WASM? For example, a large image array for WASM to process.

JavaScript can call WASM's exposed memory allocation functions (like Emscripten's _malloc) to reserve space within WASM's linear memory. Then, JavaScript writes the data into that allocated space and passes the pointer to a WASM function for processing.

Quick Check

You've learned how WASM handles complex data. Let's test your understanding!

Recap: Complex Data

Congratulations! You've learned the fundamental techniques for passing complex data between WebAssembly and JavaScript.

WASM and JavaScript communicate via a shared linear memory.
Complex data (strings, arrays, structs) are passed by their pointer (memory address) and often their length or size.
JavaScript then reads the raw bytes from the shared memory, interpreting them based on the known data structure.
For custom objects, understanding the exact memory layout is crucial.

These techniques allow for efficient, high-performance data exchange!

자주 묻는 질문

“복잡한 데이터 구조 전달” 강의는 무료인가요?

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

“복잡한 데이터 구조 전달”에서 뭘 배우나요?

WASM과 JavaScript 사이에서 문자열, 배열 및 사용자 지정 객체를 효율적으로 전송하는 전략을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 WebAssembly (WASM) for High Performance Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“복잡한 데이터 구조 전달” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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