WebAssembly

// Rust에서 WASM 모듈 작성하기
// Cargo.toml: wasm-bindgen, wasm-pack 사용

use wasm_bindgen::prelude::*;

// JavaScript에서 호출할 수 있는 함수 내보내기
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// 문자열 처리 예제
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("안녕하세요, {}님! WASM에서 인사드립니다.", name)
}

// 이미지 처리 예제: 픽셀 밝기 조절
#[wasm_bindgen]
pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
    for pixel in pixels.iter_mut() {
        let adjusted = (*pixel as f32 * factor).min(255.0) as u8;
        *pixel = adjusted;
    }
}

// 컴파일: wasm-pack build --target web

// C에서 WASM 컴파일 (Emscripten 사용)
// math_utils.c

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

// EMSCRIPTEN_KEEPALIVE: 함수가 최적화로 제거되지 않게 함
EMSCRIPTEN_KEEPALIVE
int factorial(int n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

EMSCRIPTEN_KEEPALIVE
double calculate_distance(double x1, double y1, double x2, double y2) {
    double dx = x2 - x1;
    double dy = y2 - y1;
    return sqrt(dx * dx + dy * dy);
}

// 배열 처리: 합계 계산
EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int length) {
    int sum = 0;
    for (int i = 0; i < length; i++) {
        sum += arr[i];
    }
    return sum;
}

/*
컴파일 명령어:
emcc math_utils.c -o math_utils.js \
    -s EXPORTED_FUNCTIONS='["_factorial", "_calculate_distance", "_sum_array"]' \
    -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \
    -s WASM=1 \
    -O3
*/

// JavaScript에서 WASM 모듈 로드 및 사용

// 1. 기본 WASM 모듈 로드 (순수 WASM)
async function loadWasm() {
    const response = await fetch('module.wasm');
    const bytes = await response.arrayBuffer();
    const { instance } = await WebAssembly.instantiate(bytes, {
        env: {
            // WASM에서 사용할 import 함수들
            consoleLog: (value) => console.log('WASM에서 호출:', value)
        }
    });

    // 내보낸 함수 사용
    const result = instance.exports.fibonacci(10);
    console.log('피보나치(10):', result); // 55
}

// 2. wasm-bindgen으로 생성된 모듈 사용 (Rust)
import init, { greet, adjust_brightness } from './pkg/my_wasm_module.js';

async function runRustWasm() {
    await init(); // WASM 모듈 초기화

    const message = greet('개발자');
    console.log(message); // "안녕하세요, 개발자님! WASM에서 인사드립니다."

    // 이미지 처리 예제
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    adjust_brightness(imageData.data, 1.5); // 50% 밝게
    ctx.putImageData(imageData, 0, 0);
}

// 3. Emscripten 모듈 사용 (C/C++)
async function runCWasm() {
    const Module = await createModule(); // Emscripten이 생성한 로더

    // cwrap으로 C 함수를 JavaScript 함수로 래핑
    const factorial = Module.cwrap('factorial', 'number', ['number']);
    const distance = Module.cwrap('calculate_distance', 'number',
        ['number', 'number', 'number', 'number']);

    console.log('10! =', factorial(10)); // 3628800
    console.log('거리:', distance(0, 0, 3, 4)); // 5
}

// 성능 비교: JS vs WASM
function benchmarkFibonacci(n) {
    // JavaScript 버전
    const jsStart = performance.now();
    const jsResult = jsFibonacci(n);
    const jsTime = performance.now() - jsStart;

    // WASM 버전 (이미 로드됨 가정)
    const wasmStart = performance.now();
    const wasmResult = wasmModule.fibonacci(n);
    const wasmTime = performance.now() - wasmStart;

    console.log(`JS: ${jsTime.toFixed(2)}ms, WASM: ${wasmTime.toFixed(2)}ms`);
    console.log(`WASM이 ${(jsTime / wasmTime).toFixed(1)}배 빠름`);
}