Tauri 프레임워크: 코드 중심 심층 분석

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 대상: Rust 및 웹 기술을 사용한 데스크탑 애플리케이션 개발자

- 난이도: 중급 이상 (Rust 기초 및 웹 개발 지식 필요)

핵심 요약

• Tauri의 핵심 아키텍처: 프론트엔드(WebView)와 백엔드(Rust)는 보안 IPC 채널을 통해 별도 프로세스로 작동
• #[command] 매크로: JavaScript에서 Rust 함수 호출을 가능하게 하며, invoke API를 통해 통신
• 상태 관리: Mutex와 serde를 사용해 공유 상태를 안전하게 처리 (예: AppState 구조체)

섹션별 세부 요약

1. 아키텍처 개요

• Tauri는 프론트엔드(HTML/CSS/JS)와 백엔드(Rust)를 별도 프로세스로 분리
• IPC(Ipc Bridge)를 통해 보안 통신 가능
• 시스템 API, 파일 I/O, 네트워크 등 백엔드 기능 제공

2. Tauri 프로젝트 초기화

• 설치 명령어: cargo install tauri-cli, cargo tauri init, npm create tauri-app@latest
• 프로젝트 생성 후 tauri.conf.json 파일에서 구성 가능

3. 핵심 설정(tauri.conf.json)

• allowlist: 파일 시스템 접근 권한, 대화 상자(Open/Save) 등 허용 범위 정의
• security: 콘텐츠 보안 정책(CSP) 설정 (예: default-src 'self')
• windows: 창 크기, 제목, 최소 크기 등 UI 설정

4. Rust 백엔드 구조(src-tauri/src/main.rs)

• #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]: 릴리스 버전에서 콘솔 창 숨김
• AppState 구조체: Mutex를 사용해 공유 상태(카운터, 사용자 데이터) 관리
• #[derive(Serialize, Deserialize)]: Rust와 JS 간 데이터 직렬화/역직렬화 가능

5. #[command] 매크로 활용

• greet(name: String): JS에서 await invoke("greet", { name: "Alice" }) 호출 시 Rust 함수 실행
• increment_counter(state: State<'_, AppState>): Mutex를 사용해 카운터 값을 증가
• process_data(data: Vec, options: ProcessOptions): 데이터 필터링 및 상태 업데이트

6. TypeScript 통합

• @tauri-apps/api/tauri 모듈을 통해 Rust 함수 호출
• 예시: await invoke('increment_counter')

결론

• 핵심 팁: #[command] 매크로를 사용해 JS와 Rust 간 안전한 IPC 통신 구현
• tauri.conf.json에서 보안 정책 및 창 설정을 명확히 정의
• Mutex와 serde를 활용해 병렬 처리 시 공유 상태를 안전하게 관리
• Tauri는 웹 기술과 Rust를 결합해 빠르고 가벼운 데스크탑 애플리케이션 개발 가능