오늘은 Tauri 프로젝트 개발 환경을 처음부터 세팅해보려고 합니다
Tauri란?
Tauri 2.0
The cross-platform app building toolkit
v2.tauri.app
Tauri는 Electron과 같이 크로스 플렛폼 앱을 만들기 위해 개발된 프레임워크입니다.
Electron과 다른 점은 Electron은 웹을 그대로 데스크톱 앱으로 옮기기 쉬운 쪽에 가깝고 Tauri는 더 작고 가벼운 앱을 만들기 좋은 쪽에 가깝습니다.
그래서 빠른 개발과 익숙한 Node.js 생태계가 중요하면 Electron이 유리하고, 배포 용량이나 메모리 효율이 중요하면 Tauri가 더 적합합니다.
| 구분 | Electron | Tauri |
| 뷰 | Chromium(독자 엔진)사용 | 시스템에 설치되어있는 웹뷰 사용 |
| 번들 사이즈 | 약 350MB | 약 30MB |
| 백엔드 환경 | Node.js | Rust |
| 개발 경험 | 생태계가 크고 JavaScript 친화적 |
경량성과 보안에 강점 |
이번 글에서는 새 Tauri 프로젝트를 만들고 개발 서버를 띄우는 것까지 다루겠습니다.
Node.js부터 깔아보기
프론트 템플릿을 돌리거나 create-tauri-app 스크립트를 실행할 때 Node.js가 필요합니다.
- Node.js 공식 사이트에서 LTS를 받아 설치합니다.
- 설치가 끝났으면 터미널을 새로 연 다음 아래로 확인합니다.
node -v
npm -v버전 숫자가 찍히면 여기까지는 성공입니다.
Rust 다운로드
Tauri의 네이티브 쪽은 Rust로 빌드되기 때문에, rustup으로 툴체인을 깔아줘야 합니다.
1. 터미널을 열고 다음 명령을 사용해 설치를 진행합니다.
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh2. 역시 터미널을 새로 연 뒤 확인합니다.
rustc -V
cargo -V
새 프로젝트 만들기 — create-tauri-app
사용하는 패키지 매니저에 맞게 프로젝트를 만드시면 됩니다.
| 환경 | 예시 |
|---|---|
| npm | npm create tauri-app@latest |
| pnpm | pnpm create tauri-app |
| Yarn | yarn create tauri-app |
명령어를 실행하면
프로젝트 이름 -> 고유식별자(pakageName) -> 프론트 개발 언어 -> 패키지 매니저 -> 프로젝트 기본 프레임워크 -> 내부 사용 언어순으로 프로젝트를 세팅하게 됩니다.
Tauri 프로젝트 구조
├── package.json
├── index.html
├── src/ ## 프론트엔드 프로젝트
│ ├── main.js ## 초기 진입점
├── src-tauri/ ## 백엔드 프로젝트
│ ├── Cargo.toml
│ ├── Cargo.lock
│ ├── build.rs
│ ├── tauri.conf.json ## Tauri의 기본 설정 파일
│ ├── src/
│ │ ├── main.rs
│ │ └── lib.rs
│ ├── icons/
│ │ ├── icon.png
│ │ ├── icon.icns
│ │ └── icon.ico
│ └── capabilities/
│ └── default.json
해당 구조도는 처음 프로젝트를 생성했을 때 생기는 기본 템플릿입니다.
src는 프론트엔드 프로젝트, src-tauri는 rust 프로젝트가 존재합니다.
개발 서버 띄우기
프로젝트 폴더로 들어가서 의존성을 깔고, Tauri 개발 모드를 켭니다.
cd tauri-init-app
pnpm install
pnpm tauri dev
데스크톱 창이 뜨면 성공입니다.
그리고 처음 tauri dev나 tauri build를 돌릴 때는 Rust 크레이트를 받아 오느라 시간이 꽤 걸릴 수 있습니다.
배포용으로 한 번 빌드해보기
npm run tauri buildpnpm이면 pnpm tauri build처럼, 사용하시는 패키지 매니저에 맞춰 주면 됩니다.
결과물은 src-tauri/target/release/bundle 에서 확인하실 수 있습니다.
