(Tauri)기본 기능 확인하기

Tauri 시작하는 방법

cargo로 시작하는 방법

cargo install create-tauri-app --locked
cargo create-tauri-app

FE lang(JS/rust), package manager(npm…), UI template(React, Svelte…), UI flavor(JS/ TS) 등은 각자 취향에 맞게 세팅하면 된다.

그리고 생성된 폴더로 이동 후 명령어 입력

npm run tauri dev

그러면 vite로 인해 dev server가 빌드되면서 아래와 같은 창이 뜬다.

package.json에 보면 초기 세팅된 명령어들을 볼 수 있는데 주로 쓰는 두 명령어의 차이점만 확인하자.

• npm run dev : localhost 브라우저로 확인하는 명령어
  • html/css/js 쪽 수정하면 즉각적으로 업데이트 된다.
  • tauri 앱이 빌드가 안 되므로 비교적 컴파일 빠른 편이다.
  • 대신, rust 쪽 명령어나 @tauri 패키지 tauri IPC 기능 등을 사용할 수 없으니 웹 페이지 디자인만 빠르게 확인하고 싶으면 이 명령어를 사용하면 된다. (보통 콘솔에 TypeError : window.__TAURI_PIC__ is not a function 에러로 뱉는다.)
• npm run tauri dev : localhost 브라우저 외에도 tauri 윈도우 앱으로 빌드되는 명령어
  • 똑같이 html/css/js 쪽 수정하면 즉각적으로 업데이트 된다.
  • main.rs, tauri.conf.json 등의 파일을 수정하면 앱이 재시작된다.
    • rust 컴파일이 대체로 느린데, 웹페이지 js 오류로 500 error를 띄우거나 렌더링 자체 아예 안 될 경우 다시 수동으로 빌드해줘야 하는 상황이 자주 있다.

---

Electron 기능과 비교하기

2024-08-07 기준으로 아직 Tauri는 Electron에 비해 공식문서나 참고자료가 부족하다. 그렇기 때문에 Electron에서 사용 가능했던 기능들 기준으로 어떤 걸 사용할 수 있는지 체크할 필요가 있다.

사용할 기능은 Udemy - Master Electron목차를 기준으로 살펴볼 예정이다.

공식 문서 존재 여부

기능모음	Electron	Tauri
Modal window	Modal	없으나 Dialog면 충분하지 않을까 싶다.
Session& Cookies& JWT	Session	없음. 구현 가능 여부 확인 중
Dialog	Dialog	Dialog
Menu, MenuItem	Menu	Menu
Tray	Tray	System-Tray
Accelerator	Accelerator	globalShortcut
Power Monitior	Power Monitor	없음. 구현 가능 여부 확인 중
Screen	Screen	Window 유사 기능 존재
IPC Communication	IPC	mockIPC이 있는데 electron IPC와 같은 기능을 하는지 확인 중이다.
Process	Process	Process
Shell	Shell	Shell
NativeImage	NativeImage	없음. 구현 가능 여부 확인 중
Clipboard	Clipboard	Clipboard

시간 되면 각각의 기능에 대한 간략한 설명과 코드를 추가할 예정이다.

Reference

1. Tauri Session - github Issue