serde: 타입의 다리

"serde는 다리 위에 서 있는 번역가야. Rust struct를 JSON으로, 다시 거꾸로 — 파싱 한 줄 안 짜게 해줘."

derive 하고 잊어

IPC 다리를 건너는 건 뭐든 평범한 데이터가 돼야 해. Rust에서 이걸 하는 크레이트가 serde야. struct나 enum에 #[derive(Serialize, Deserialize)]를 붙이면 serde가 변환 코드를 생성해: Serialize는 프론트엔드로 가게 하고(command 반환으로), Deserialize는 프론트엔드에서 오게 해(command 인자로). 수동 JSON 조립은 영원히 없어.

양방향 struct

command는 struct를 받고 struct를 반환할 수 있어. 프론트엔드가 평범한 객체를 보내면 네 Rust struct로 deserialize되고, command가 struct를 반환하면 웹뷰가 받는 평범한 객체로 serialize돼. 이게 풍부한 데이터가 깔끔하게 건너는 방식이야 — 양쪽 끝에서 타입 모양으로 생각하고, 중간의 선로 포맷은 serde가 처리해.

필드 이름을 프론트엔드에 맞춰

Rust struct는 snake_case 필드(created_at)를 쓰는데, 네 TypeScript는 아마 camelCase(createdAt)를 원해. struct에 #[serde(rename_all = "camelCase")]를 더하면 serde가 선로의 모든 필드 이름을 바꿔. 이제 Rust는 관용을 지키고 프론트엔드는 기대하는 case를 받아 — 인자 관례랑 같은 철학을 데이터 모양에 적용한 거야.

Code

양방향으로 건너는 struct·rust

use serde::{Serialize, Deserialize};

// rename_all이 선로 JSON을 camelCase로 만들어 행복한 TS 프론트엔드에 맞추고,
// Rust는 관용적인 snake_case 필드를 지켜.
#[derive(Serialize, Deserialize)]
#[serde(rename_all = "camelCase")]
struct Note {
    id: u32,
    title: String,
    created_at: String,   // JS엔 `createdAt`로 도착
}

// struct 받고 struct 반환 — serde가 양방향 다 처리.
#[tauri::command]
fn save_note(draft: Note) -> Note {
    // ... 저장하고 ...
    draft  // 평범한 객체로 웹뷰에 다시 serialize
}

프론트엔드는 깔끔한 camelCase를 봐·tsx

// 맞는 TypeScript 모양 (rename_all 덕에 camelCase).
interface Note {
  id: number;
  title: string;
  createdAt: string;
}

const saved = await invoke<Note>("save_note", {
  draft: { id: 1, title: "Hi", createdAt: new Date().toISOString() },
});

Exercise

여러 단어 필드(created_at 같은)를 최소 하나 가진 struct를 정의하고, Serialize/Deserialize를 derive하고, #[serde(rename_all = "camelCase")]를 더해. 그걸 반환하는 command를 짜고, 프론트엔드에서 invoke하고, 콘솔에서 필드가 camelCase로 도착하는지 확인해. 그다음 rename_all 줄을 빼고 필드 이름이 바뀌는 걸 봐 — serde의 이름 바꾸기를 눈으로 본 거야.

Hint

rename_all 없으면 TS는 created_at을 받고, 있으면 createdAt. 맞는 TS 인터페이스는 camelCase를 써. 이게 두 언어를 둘 다 관용적으로 지키는 제일 깔끔한 방법이야.