프론트엔드에서 Rust 부르기

"웹 쪽에서 네이티브 힘은 함수 하나로 압축돼: invoke. 나머지는 뭘 넘기고 뭘 기다리느냐일 뿐이야."

코어에 닿는 함수 하나

invoke(@tauri-apps/api/core에 있어)가 웹뷰에서 등록된 command를 부르는 방법이야. command 이름이랑 인자 객체를 주면, command가 돌려준 값으로 resolve되는 Promise를 내놔. Promise니까 await하고 try/catch로 감싸면 돼 — fetch랑 똑같이. 서버랑 대화할 때 쓰던 감각이 그대로 옮겨와.

camelCase랑 snake_case 사이의 다리

누구나 한 번 놀라는 관례가 있어. Rust 파라미터는 user_id(snake_case, Rust다운 이름)인데 JavaScript에선 { userId }(camelCase, JS다운 이름)를 넘겨. 그 사이는 Tauri가 알아서 이어줘. JS에서 snake_case로 보내면 인자가 조용히 안 붙고, camelCase로 보내면 그냥 돼. 각 언어가 제 스타일을 지키고, 이음매는 Tauri가 맡는 거야.

가능하면 반환 타입을 적어

TypeScript에선 invoke가 제네릭이야. invoke<Note>('get_note', { id })라고 쓰면 resolve되는 값이 Note라고 컴파일러한테 알려주는 거지. 근데 이건 Rust command가 진짜로 그 모양을 돌려줄 때만 참말이야. 양쪽 사이엔 컴파일 타임에 이어지는 끈이 없으니까, 네가 적은 타입은 네가 한 약속이야. 그 약속을 깨기 어렵게 만드는 법은 typed-ipc 레슨에서 보여줄게.

Code

invoke: 코어로 가는 유일한 문·tsx

import { invoke } from "@tauri-apps/api/core";

// 간단한 호출 — camelCase 인자가 snake_case Rust 파라미터에 매핑.
const greeting = await invoke<string>("greet", { name: "Pippa" });

// Rust 파라미터는 `user_id`; JS는 `userId` 보냄. Tauri가 case를 다리 놓아.
const note = await invoke<Note>("get_note", { userId: 42, noteId: 7 });

// fetch랑 똑같이 다뤄: await + try/catch.
try {
  const sum = await invoke<number>("add", { a: 2, b: 3 });
  console.log(sum); // 5
} catch (err) {
  console.error("command failed:", err);
}

Exercise

지난 레슨에서 짠 add command를 프론트엔드 버튼에 엮어봐. 클릭하면 invoke<number>('add', { a, b })를 부르고 결과를 그려. 그다음 일부러 파라미터를 first_number처럼 여러 단어로 바꾸고 JS에서 first_number를 보내서 실패하는 걸 봐 — 그 실패가 어떤 문서보다 camelCase 규칙을 잘 가르쳐줘.

Hint

import { invoke } from '@tauri-apps/api/core'. 실패를 보려면 Rust 파라미터를 first_number로 바꾸고 { firstNumber }(됨)랑 { first_number }(안 붙음)를 각각 보내서 관례를 느껴봐.