create-tauri-app로 0에서 시작

"프레임워크를 제일 빨리 이해하는 법은, 돌아가는 앱을 생성하게 시킨 다음 걔가 준 걸 읽는 거야."

명령 하나, 돌아가는 앱

create-tauri-app은 공식 스캐폴더야. 몇 가지 물어봐 — 앱 이름, 프론트엔드 프레임워크(vanilla, React, Vue, Svelte, Solid, Angular…), 패키지 매니저 — 그리고 이미 빌드되고 돌아가는 프로젝트를 생성해줘. 행복 경로엔 손으로 엮을 게 없어. 프론트엔드, Rust 코어, 설정, 그리고 열리는 창이 나와.

이미 프론트엔드가 있어? 처음부터 다시 할 필요 없어. tauri init이 기존 웹 프로젝트에 src-tauri/ 반쪽을 더해줘서, 이미 사랑하는 React 앱에 Tauri를 볼트로 박을 수 있어. 어느 쪽이든, Foundations 트랙의 멘탈 모델이 이제 찔러볼 수 있는 진짜 폴더가 됐어.

전제조건: 사람들이 건너뛰는 부분

Tauri는 진짜 네이티브 코드를 컴파일하니까 Rust 툴체인(rustup으로 설치)이랑 플랫폼 빌드 의존성이 필요해: macOS는 Xcode Command Line Tools, Windows는 WebView2 + MSVC 빌드 도구, Linux는 WebKitGTK + 시스템 라이브러리 몇 개. 공식 Prerequisites 페이지가 OS별 정확한 패키지를 나열해 — 한 번 해두면 첫 빌드가 그냥 돼. 건너뛰는 게 첫 tauri dev가 에러 나는 1번 이유야.

첫 실행은 느려 — 일부러

네 첫 npm run tauri dev는 Rust 의존성 트리 전체를 컴파일해서 몇 분 걸릴 수 있어. 그건 일회성 비용이고, 이후 실행은 증분이라 빨라. 첫 빌드가 CPU를 씹어도 당황하지 마 — JavaScript 번들링이 아니라 진짜 네이티브 바이너리를 만드는 중이야.

Code

스캐폴딩하고 돌리기·bash

# 새 Tauri 2 앱 스캐폴딩 — 쓰는 패키지 매니저로 골라.
npm create tauri-app@latest
# pnpm create tauri-app
# yarn create tauri-app
# bun create tauri-app
# Rust: cargo install create-tauri-app && cargo create-tauri-app

cd my-app
npm install
npm run tauri dev   # 첫 실행은 Rust 컴파일 — 커피 한 잔, 그 다음부턴 빨라

tauri init —가진 것 위에 볼트로 박기·bash

# 새로 시작하는 대신 '기존' 웹 앱에 Tauri 더하기:
npm install -D @tauri-apps/cli@latest
npx tauri init    # 대화형: 앱 이름, 창 제목, frontendDist, devUrl
# 이제 기존 프론트엔드 옆에 src-tauri/가 생겼어.

Exercise

실제로 하나 스캐폴딩해. create-tauri-app 돌리고, React + TypeScript 템플릿 고르고, 설치하고, npm run tauri dev로 창을 열어. 열리면 프론트엔드 한 줄 고쳐서 네이티브 창 안에서 핫리로드되는 거 봐. 이제 이 퀘스트 나머지 동안 실험할 진짜 Tauri 앱이 생겼어.

Hint

첫 빌드가 에러 나면 거의 항상 전제조건 누락이야 — 네 OS의 Prerequisites 페이지 다시 확인해(macOS는 Xcode CLT, Windows는 WebView2/MSVC, Linux는 webkit2gtk). 에러 메시지가 보통 빠진 조각을 알려줘.