Rust + WASM 실전 프로젝트 1: 실시간 텍스트 분석기 구현

지난 글에서는 Rust로 구현한 이미지 필터 기능을 WebAssembly로 브라우저에 통합하는 방법을 다뤘습니다. 이번 글에서는 Rust와 WebAssembly를 활용하여 실시간 텍스트 분석기를 만들어 보겠습니다. 입력된 문자열을 실시간으로 처리하여 단어 수, 문장 수, 문자 빈도 등을 계산하고, JavaScript를 통해 웹 페이지에 결과를 표시하는 간단한 유틸리티입니다.

프로젝트 개요

Rust + WASM 실전 프로젝트 ②: 실시간 텍스트 분석기 구현

기능: 텍스트 입력에 대한 실시간 통계 분석
Rust 모듈: 단어 수, 문자 빈도 계산
WASM 컴파일: wasm-pack
웹 UI: HTML5 + JavaScript
타겟 플랫폼: wasm32-unknown-unknown

Rust 코드 (lib.rs)

텍스트 분석 로직은 Rust에서 처리하고, 결과는 JavaScript로 반환합니다.

use wasm_bindgen::prelude::*;
use std::collections::HashMap;

#[wasm_bindgen]
pub fn analyze_text(input: &str) -> JsValue {
    let words = input.split_whitespace().count();
    let lines = input.lines().count();

    let mut freq = HashMap::new();
    for ch in input.chars().filter(|c| c.is_alphabetic()) {
        *freq.entry(ch.to_ascii_lowercase()).or_insert(0) += 1;
    }

    serde_wasm_bindgen::to_value(&serde_json::json!({
        "word_count": words,
        "line_count": lines,
        "char_frequency": freq
    })).unwrap()
}

serde_wasm_bindgen은 Rust의 HashMap 및 JSON 데이터를 JavaScript에서 사용할 수 있는 객체로 변환하는 데 사용됩니다.

Cargo.toml 설정


[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
serde-wasm-bindgen = "0.5"

빌드 방법

wasm-pack build --target web
pkg/ 디렉토리 생성 확인

JavaScript 통합 코드

import init, { analyze_text } from "./pkg/text_analyzer.js";

async function run() {
  await init();
  const input = document.getElementById("text-input");
  const result = document.getElementById("result");

  input.addEventListener("input", () => {
    const stats = analyze_text(input.value);
    const { word_count, line_count, char_frequency } = stats;
    result.innerHTML = `
      <p>단어 수: ${word_count}</p>
      <p>줄 수: ${line_count}</p>
      <h3>문자 빈도수</h3>
      <ul>${Object.entries(char_frequency)
        .map(([char, count]) => `<li>${char}: ${count}</li>`)
        .join("")}</ul>
    `;
  });
}

run();

HTML 예시

<pre

rachel414 님의 블로그

Rust+WASM 실전 프로젝트 1