블라블라 피자돌이

1.root 폴더에 folder 생성

 - folder name : .vscode

2.vscode폴더에 launch.json 파일 생성

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Tauri App",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "tauri",
        "dev"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

Tauri는 하나의 통합된 프로그램으로, 프론트엔드와 백엔드가 서로 연결되어 함께 동작하는 데스크탑 애플리케이션을 개발할 수 있게 해줍니다. 프론트엔드와 백엔드가 구분되긴 하지만, 결국 하나의 앱을 만들기 위해 서로 협력하는 구조입니다.

Tauri 구조의 핵심: 프론트엔드 + 백엔드

• 프론트엔드: **웹 기술(HTML, CSS, JavaScript)**을 사용해 UI/UX를 개발합니다. 이 부분은 React, Vue.js, Svelte 등 웹 프레임워크를 사용할 수 있습니다.
• 백엔드: Rust로 작성된 네이티브 애플리케이션이 실제로 시스템 자원을 다룹니다. 파일 시스템, 네트워크 요청, 하드웨어 접근 등 네이티브 기능은 Rust로 처리됩니다.

Tauri의 핵심은 웹 기반 UI와 네이티브 백엔드가 웹 기술과 네이티브 언어의 장점을 결합해 애플리케이션을 만든다는 점입니다.

프론트엔드와 백엔드가 구분되는 이유

Tauri의 아키텍처에서는 프론트엔드와 백엔드가 구현 언어와 역할에서 구분이 됩니다. 하지만, 이를 "구분"한다고 해서 두 부분이 완전히 분리된 두 애플리케이션이 되는 것은 아니에요. 하나의 애플리케이션이지만, 각 부분이 웹과 네이티브의 역할을 맡고 있다는 의미입니다.

1. 프론트엔드 (UI 부분)

• HTML, CSS, JavaScript(또는 TypeScript) 등을 사용해 웹 UI를 작성합니다.
• 이 부분은 React, Vue, Svelte 같은 프레임워크를 사용할 수 있습니다.
• Tauri API를 통해 백엔드와 연결됩니다.

2. 백엔드 (네이티브 부분)

• Rust로 작성된 백엔드는 시스템 자원에 접근하거나 네이티브 기능을 처리합니다. 예를 들어, 파일 시스템 접근, 하드웨어 제어, 네트워크 요청 등을 처리합니다.
• 프론트엔드와는 **IPC (Inter-Process Communication)**를 통해 데이터를 주고받습니다.

Tauri CLI 설치 명령어의 차이점

• **npm install -g tauri**는 프론트엔드 개발을 위한 CLI 도구로, JavaScript/TypeScript 환경에서 UI를 작성하고, 빌드 및 배포하는 데 사용됩니다.
• **cargo install tauri-cli**는 백엔드 개발을 위한 CLI 도구로, Rust 환경에서 애플리케이션의 빌드, 패키징, 배포 작업을 처리합니다.

하나의 프로그램으로 통합

두 CLI 도구는 각각 프론트엔드와 백엔드에서 다르게 동작하지만, 결국 하나의 Tauri 애플리케이션을 만들기 위한 필수적인 도구입니다. 프론트엔드와 백엔드는 서로 연결되어 작업하고, 결과적으로 하나의 프로그램이 생성됩니다.

예를 들어:

1. 프론트엔드에서 UI를 작성하고, Rust 백엔드와 데이터를 주고받기 위해 IPC를 사용합니다.
2. Rust 백엔드는 로컬 시스템 기능을 다루고, UI에서 전달된 요청을 처리합니다.

결과적으로, 프론트엔드와 백엔드가 협력하여 하나의 통합된 애플리케이션을 만듭니다.

예시: Tauri 애플리케이션 아키텍처

• 프론트엔드: 웹 UI (HTML, CSS, JavaScript, React 등)
• 백엔드: Rust 코드로 작성된 시스템 기능 (예: 파일 읽기, 네트워크 요청)
• 소통 방식: **IPC (Inter-Process Communication)**를 통해 두 부분이 데이터를 주고받습니다.

결론

• Tauri는 하나의 애플리케이션을 생성하지만, 프론트엔드와 백엔드의 역할이 구분됩니다. 프론트엔드는 웹 기술을 사용하고, 백엔드는 Rust로 작성되어 네이티브 기능을 처리합니다.
• npm install -g tauri는 프론트엔드 개발용 CLI, cargo install tauri-cli는 백엔드 개발용 CLI입니다. 두 CLI 도구가 협력하여 하나의 Tauri 애플리케이션을 만듭니다.

시스템 구성

tauri + react + vite + tailwind

1. 프로젝트 생성

npm create vite@latest tauri-app -- --template react

cd tauri-app

2. tailwind 설정

npm install -D tailwindcss @tailwindcss/cli postcss autoprefixer Tailwind v4에서는 달라짐

npm install -D tailwindcss @tailwindcss/postcss autoprefixer

npx tailwindcss init -p <- 이거 사라짐

tailwind.config.css, postcss.config.js 수동으로 만들어야 함

3. tauri 추가

npm install --save-dev @tauri-apps/cli

npx tauri init

4. package 설치

npm install react-router-dom

 -> react router

npm install @heroicons/react

 -> icon package

1. rust 설치 안되어 있을 경우

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | zsh

rustc --version

2. cli 설치

설치 1.

npm install -g tauri

 -> 프론트엔드 개발을 위한 CLI 도구

* sharp 관련 에러가 발생하면 "brew install vips"명령어를 통해서 vips라이브러리를 수동 설치해주자

설치 2.

cargo install tauri-cli

 -> 백엔드(Rust) 빌드 및 패키징을 위한 CLI 도구