diff --git a/.github/labeler.yml b/.github/labeler.yml index fcaec757b4..5051ade227 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -17,3 +17,6 @@ i18n: "i18n: zh-cn": - src/content/docs/zh-cn/**/* + +"i18n: ko": + - src/content/docs/ko/**/* diff --git a/astro.config.mjs b/astro.config.mjs index b2b0554e3f..a07bca2163 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -143,6 +143,7 @@ export default defineConfig({ label: 'Guides', translations: { 'zh-CN': '指引', + 'ko': '가이드', }, collapsed: true, items: [ @@ -150,6 +151,7 @@ export default defineConfig({ label: 'Quick Start', translations: { 'zh-CN': '快速开始', + 'ko': '시작하기', }, collapsed: true, items: [ @@ -157,6 +159,7 @@ export default defineConfig({ label: 'What is Tauri?', translations: { 'zh-CN': '什么是 Tauri?', + 'ko': 'Tauri가 무엇인가요?', }, link: '/start/', }, @@ -164,6 +167,7 @@ export default defineConfig({ label: 'Prerequisites', translations: { 'zh-CN': '前置条件', + 'ko': '요구사항', }, link: '/start/prerequisites/', }, @@ -171,6 +175,7 @@ export default defineConfig({ label: 'Create a Project', translations: { 'zh-CN': '创建项目', + 'ko': '프로젝트 생성하기', }, link: '/start/create-project/', }, @@ -178,6 +183,7 @@ export default defineConfig({ label: 'Frontend Configuration', translations: { 'zh-CN': '前端配置', + 'ko': '프론트엔드 설정', }, collapsed: true, autogenerate: { directory: 'start/frontend' }, @@ -186,6 +192,7 @@ export default defineConfig({ label: 'Upgrade & Migrate', translations: { 'zh-CN': '升级和迁移', + 'ko': '업그레이드 & 마이그레이션', }, collapsed: true, autogenerate: { directory: 'start/migrate' }, diff --git a/locales.json b/locales.json index 2fd3c84c6c..6d5898d983 100644 --- a/locales.json +++ b/locales.json @@ -14,5 +14,9 @@ "zh-cn": { "label": "简体中文", "lang": "zh-cn" + }, + "ko": { + "label": "한국어", + "lang": "ko" } } diff --git a/src/content/docs/ko/index.mdx b/src/content/docs/ko/index.mdx new file mode 100644 index 0000000000..8c052512de --- /dev/null +++ b/src/content/docs/ko/index.mdx @@ -0,0 +1,61 @@ +--- +title: Tauri 2.0 +description: 크로스 플랫폼 앱 제작 도구 +i18nReady: true +editUrl: false +lastUpdated: false +template: splash +tableOfContents: false +prev: false +next: false +hero: + tagline: 작고, 빠르고, 안전한 크로스 플랫폼 앱 만들기 + image: + file: ../../../assets/logo-outline.svg + actions: + - text: 시작하기 + link: /ko/start/ + icon: right-arrow + variant: primary + - text: Tauri 1.0 문서 + link: https://v1.tauri.app + icon: external + variant: minimal +--- + +import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; +import Cta from '@fragments/cta.mdx'; + +
+ +
+
+
+ +
+ + + +
+ + + + 기존 웹 스택을 Tauri에 가져오거나 새로운 꿈같은 프로젝트를 시작해보세요. + Tauri는 어떤 프론트엔드 프레임워크도 지원하기 때문에 스택을 변경할 필요가 없습니다. + + + 하나의 코드베이스로 Linux, macOS, Windows, Android 및 iOS 앱을 만들어보세요. + + + JavaScript로 프론트엔드를, Rust로 앱 로직을 작성하고, Swift와 Kotlin으로 시스템에 깊게 연결하세요. + + + Tauri 팀의 최우선 순위이자, 가장 큰 혁신을 이끌어내는 중심입니다. + + + OS의 네이티브 웹 렌더러를 사용하여, Tauri 앱의 크기는 최소 600KB로 줄일 수 있습니다. + + + 성능과 보안을 중심에 둔 Rust는 차세대 앱을 위한 언어입니다. + + diff --git a/src/content/docs/ko/start/create-project.mdx b/src/content/docs/ko/start/create-project.mdx new file mode 100644 index 0000000000..885a1ba39d --- /dev/null +++ b/src/content/docs/ko/start/create-project.mdx @@ -0,0 +1,218 @@ +--- +title: 프로젝트 생성하기 +sidebar: + order: 3 +--- + +import { Card, Steps } from '@astrojs/starlight/components'; + +import Cta from '@fragments/cta.mdx'; + +Tauri의 유연성 중 하나는 어떠한 프론트엔드 프레임워크에서든 작업이 가능하다는 것입니다. 공식적으로 지원하는 프레임워크 템플릿을 사용하여 새로운 Tauri 프로젝트를 만드는 것을 돕기 위해 우리는 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 유틸리티를 만들었습니다. + +`create-tauri-app`은 현재 vanilla (프레임워크 없는 HTML, CSS 및 JavaScript), [Vue.js](https://vuejs.org), [Svelte](https://svelte.dev), [React](https://reactjs.org/), [SolidJS](https://www.solidjs.com/), [Angular](https://angular.io/), [Preact](https://preactjs.com/), [Yew](https://yew.rs/), [Leptos](https://github.com/leptos-rs/leptos), 그리고 [Sycamore](https://sycamore-rs.netlify.app/) 템플릿을 포함합니다. 또한 [Awesome Tauri 레포지토리](https://github.com/tauri-apps/awesome-tauri)에서 커뮤니티 템플릿 및 프레임워크를 찾거나 추가할 수 있습니다. + +{/* TODO: redirect to integrate to existing front-end project specific docs */} +또는, 기존 프로젝트에 [Tauri를 추가](#수동-설정-tauri-cli)하여 기존 코드베이스를 Tauri 앱으로 빠르게 변환할 수 있습니다. + +## `create-tauri-app` 사용하기 + +`create-tauri-app`을 사용하여 프로젝트를 설정하려면 아래 명령어 중 하나를 프로젝트를 설정하고 싶은 폴더에서 실행하세요. 어떤 명령어를 사용할지 모르겠다면, Linux 및 macOS에서는 Bash 명령어를, Windows에서는 PowerShell 명령어를 사용하는 것을 권장합니다. + + + +프롬프트에 따라 프로젝트 이름, 프론트엔드 언어, 패키지 관리자, 프론트엔드 프레임워크, 그리고 프론트엔드 프레임워크 옵션을 선택하세요. + +:::tip[무엇을 선택해야 할지 모르겠나요?] + +{/* TODO: redirect to integrate to existing front-end project specific docs */} +Vanilla 템플릿 (프레임워크 없는 HTML, CSS 및 JavaScript)을 사용하여 시작하는 것을 권장합니다. 나중에 프론트엔드 프레임워크를 통합할 수 있습니다. + +- Choose which language to use for your frontend: `TypeScript / JavaScript` +- Choose your package manager: `pnpm` +- Choose your UI template: `Vanilla` +- Choose your UI flavor: `TypeScript` + +::: + +#### 새 프로젝트 만들기 + + + +1. 이름과 번들 식별자 (앱에 대한 고유 ID)를 선택하세요: + ``` + ? Project name (tauri-app) › + ? Identifier (com.tauri-app.app) › + ``` +2. 프론트엔드에서 사용할 언어를 먼저 선택하세요: + ``` + ? Choose which language to use for your frontend › + Rust (cargo) + TypeScript / JavaScript (pnpm, yarn, npm, bun) + .NET (dotnet) + ``` +3. (여러 개가 있는 경우) 패키지 관리자를 선택하세요: + + **TypeScript / JavaScript**에 대한 옵션: + + ``` + ? Choose your package manager › + pnpm + yarn + npm + bun + ``` + +4. 프론트엔드 템플릿과 프론트엔드 프레임워크를 선택하세요 (여러 개가 있는 경우): + + **Rust**에 대한 옵션: + + ``` + ? Choose your UI template › + Vanilla + Yew + Leptos + Sycamore + ``` + + **TypeScript / JavaScript**에 대한 옵션: + + ``` + ? Choose your UI template › + Vanilla + Vue + Svelte + React + Solid + Angular + Preact + + ? Choose your UI flavor › + TypeScript + JavaScript + ``` + + **.NET**에 대한 옵션: + + ``` + ? Choose your UI template › + Blazor (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/) + ``` + + + +완료되면 유틸리티는 템플릿이 생성되었음을 출력하고 구성된 패키지 관리자를 사용하여 템플릿을 실행하는 방법을 표시합니다. 시스템에서 누락된 종속성을 감지하면 패키지 목록을 인쇄하고 설치 방법을 묻는 메시지를 표시합니다. + +{/* TODO: Can CTA offer to install the deps? */} + +#### 개발 서버 실행하기 + +`create-tauri-app`이 완료되면 프로젝트 폴더로 이동하여 종속성을 설치한 후, [Tauri CLI](/ko/reference/cli/)를 사용하여 개발 서버를 시작할 수 있습니다: + +import CommandTabs from '@components/CommandTabs.astro'; + + + +새 창이 열리며 앱이 실행될 것입니다. + +**축하합니다!** 성공적으로 Tauri 앱을 만들었습니다! 🚀 + +## 수동 설정 (Tauri CLI) + +이미 존재하는 프론트엔드가 있거나 직접 설정하는 것을 선호한다면, Tauri CLI를 사용하여 프로젝트의 백엔드를 별도로 초기화할 수 있습니다. + +:::note +아래 예시는 새 프로젝트를 만드는 것을 가정합니다. 이미 프론트엔드를 설정한 경우, 첫 번째 단계를 건너뛸 수 있습니다. +::: + + + + 1. 프로젝트에 대한 새 디렉토리를 만들고 프론트엔드를 설정하세요. 기본 HTML, CSS 및 JavaScript, 또는 Next.js, Nuxt, Svelte, Yew, 또는 Leptos와 같은 프레임워크를 사용할 수 있습니다. 단지 브라우저에서 앱을 제공할 방법만 존재하면 됩니다. 예를 들어, 다음은 간단한 Vite 앱을 설정하는 방법입니다: + + + + 2. 그런 다음, 원하는 패키지 관리자를 사용하여 Tauri CLI를 설치하세요. `cargo`를 사용하여 Tauri CLI를 설치하는 경우, 전역으로 설치해야 합니다. + + + + 3. 프론트엔드 개발 서버의 URL을 결정하세요. 이는 Tauri가 콘텐츠를 로드하는 데 사용할 URL입니다. 예를 들어, Vite를 사용하는 경우, 기본 URL은 `http://localhost:5173`입니다. + + 4. 프로젝트 디렉토리에서 Tauri를 설정하세요: + + + + 명령어를 실행하면 다음과 같은 프롬프트가 표시됩니다: + + ```sh frame=none + ✔ What is your app name? tauri-app + ✔ What should the window title be? tauri-app + ✔ Where are your web assets located? .. + ✔ What is the url of your dev server? http://localhost:5173 + ✔ What is your frontend dev command? pnpm run dev + ✔ What is your frontend build command? pnpm run build + ``` + + 이는 필요한 Tauri 설정 파일이 포함된 `src-tauri` 디렉토리를 프로젝트에 생성합니다. + + 5. 개발 서버를 실행하여 Tauri 앱이 작동하는지 확인하세요: + + + + 이 명령어는 Rust 코드를 컴파일하고 웹 콘텐츠를 표시하는 창을 엽니다. + + + +**축하합니다!** Tauri CLI를 사용하여 새로운 Tauri 프로젝트를 만들었습니다! 🚀 + +## 다음 단계 + +- [프론트엔드 프레임워크 추가 및 설정](/ko/start/frontend/) +- [Tauri CLI 레퍼런스](/ko/reference/cli/) +- [Tauri 앱 만드는 방법 알아보기](/ko/develop/) +- [Tauri 플러그인 확장 기능 알아보기](/ko/plugin/) diff --git a/src/content/docs/ko/start/frontend/index.mdx b/src/content/docs/ko/start/frontend/index.mdx new file mode 100644 index 0000000000..974e7f55e7 --- /dev/null +++ b/src/content/docs/ko/start/frontend/index.mdx @@ -0,0 +1,55 @@ +--- +title: 프론트엔드 설정 +i18nReady: true +sidebar: + label: 둘러보기 + order: 10 +--- + +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + +Tauri는 프론트엔드에 구애받지 않으며 대부분의 프론트엔드 프레임워크를 기본적으로 지원합니다. 하지만 프레임워크가 Tauri와 통합하기 위해 약간의 추가 설정이 필요한 경우도 있습니다. 아래는 권장 설정이 포함된 프레임워크 목록입니다. + +프레임워크가 목록에 없는 경우 추가 설정 없이 Tauri에서 작동하거나 아직 문서화되지 않았을 수 있습니다. 추가 설정이 필요한 프레임워크를 추가하는 데 기여하면 Tauri 커뮤니티의 다른 사람들을 도울 수 있습니다. + +## 설정 체크리스트 + +개념적으로 Tauri는 정적 웹 호스트 역할을 합니다. Tauri의 웹뷰가 전달할 수 있는 HTML, CSS, JavaScript 및 WASM이 혼합된 폴더를 Tauri에 제공해야 합니다. + +아래는 프론트엔드를 Tauri와 통합하기 위해 필요한 일반적인 시나리오 목록입니다: + +{/* TODO: Link to core concept of SSG/SSR, etc. */} +{/* TODO: Link to mobile development server guide */} +{/* TODO: Concept of how to do a client-server relationship? */} + +- 정적 사이트 생성(SSG), 단일 페이지 애플리케이션(SPA) 또는 기존 다중 페이지 앱(MPA)을 사용합니다. Tauri는 기본적으로 서버 기반 대안(예: SSR)을 지원하지 않습니다. +- 모바일 개발의 경우 내부 IP에서 프론트엔드를 호스팅할 수 있는 일종의 개발 서버가 필요합니다. +- 앱과 API 사이에 적절한 클라이언트-서버 관계를 사용해야 합니다. (SSR을 사용하는 하이브리드 솔루션은 사용하지 마세요) + +## JavaScript + +{/* TODO: Help me with the wording here lol */} +대부분의 프로젝트에서 React, Vue, Svelte, Solid와 같은 SPA 프레임워크에는 [Vite](https://vitejs.dev/)를 권장하지만 일반 JavaScript 또는 TypeScript 프로젝트에도 사용할 수 있습니다. 여기에 나열된 다른 대부분의 가이드는 메타-프레임워크의 사용 방법을 보여 주며, 일반적으로 SSR용으로 설계되었으므로 특별한 구성이 필요합니다. + + + + + + + + + +## Rust + + + + + + +
+ +:::tip[프레임워크가 목록에 없나요?] + +목록에 없는 프레임워크가 있나요? 추가 설정 없이 Tauri에서 작동할 수도 있습니다. [설정 체크리스트](/ko/start/frontend/#설정-체크리스트)에서 공통 설정을 확인하세요. + +::: diff --git a/src/content/docs/ko/start/frontend/leptos.mdx b/src/content/docs/ko/start/frontend/leptos.mdx new file mode 100644 index 0000000000..6bbf415be3 --- /dev/null +++ b/src/content/docs/ko/start/frontend/leptos.mdx @@ -0,0 +1,57 @@ +--- +title: Leptos +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +Leptos는 Rust 기반의 웹 프레임워크입니다. Leptos에 대해 더 알아보려면 [공식 웹사이트](https://leptos.dev/)를 방문하세요. 이 가이드는 Leptos 버전 0.6을 기준으로 작성되었습니다. + +## 체크리스트 + +- SSG를 사용하세요. Tauri는 서버 기반 솔루션을 지원하지 않습니다. +- `serve.ws_protocol = "ws"`를 설정하여 모바일 개발을 위한 핫 리로드 웹소켓을 제대로 연결할 수 있도록 설정하세요. +- `withGlobalTauri`를 활성화하여 Tauri API가 `window.__TAURI__` 변수에서 `wasm-bindgen`을 가져와 사용할 수 있도록 설정하세요. + +## 설정 예시 + + + +1. ##### Tauri 설정 업데이트 + + ```json + // src-tauri/tauri.conf.json + { + "build": { + "beforeDevCommand": "trunk serve", + "devUrl": "http://localhost:1420", + "beforeBuildCommand": "trunk build", + "frontendDist": "../dist" + }, + "app": { + "withGlobalTauri": true + } + } + ``` + +1. ##### Trunk 설정 업데이트 + + ```toml + // Trunk.toml + [build] + target = "./index.html" + + [watch] + ignore = ["./src-tauri"] + + [serve] + port = 1420 + open = false + ws_protocol = "ws" + + ``` + + diff --git a/src/content/docs/ko/start/frontend/nextjs.mdx b/src/content/docs/ko/start/frontend/nextjs.mdx new file mode 100644 index 0000000000..6c588ddf83 --- /dev/null +++ b/src/content/docs/ko/start/frontend/nextjs.mdx @@ -0,0 +1,131 @@ +--- +title: Next.js +i18nReady: true +tableOfContents: + collapseLevel: 1 + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +Next.js는 React를 위한 메타 프레임워크입니다. Next.js에 대해 더 알아보려면 [https://nextjs.org](https://nextjs.org)를 방문하세요. 이 가이드는 Next.js 14.2.3 버전을 기준으로 작성되었습니다. + +## 체크리스트 + +- `output: 'export'`를 설정하여 정적 내보내기를 사용하세요. Tauri는 서버 기반 솔루션을 지원하지 않습니다. +- `tauri.conf.json`에서 `frontendDist`를 `out` 디렉토리로 설정하세요. + +## 설정 예시 + + + +1. ##### Tauri 설정 업데이트 + + + + + + ```json + // src-tauri/tauri.conf.json + { + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run build", + "devUrl": "http://localhost:3000", + "frontendDist": "../out" + } + } + ``` + + + + + + ```json + // src-tauri/tauri.conf.json + { + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn build", + "devUrl": "http://localhost:3000", + "frontendDist": "../out" + } + } + ``` + + + + + + ```json + // src-tauri/tauri.conf.json + { + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm build", + "devUrl": "http://localhost:3000", + "frontendDist": "../out" + } + } + ``` + + + + + + ```json + // src-tauri/tauri.conf.json + { + "build": { + "beforeDevCommand": "deno task dev", + "beforeBuildCommand": "deno task build", + "devUrl": "http://localhost:3000", + "frontendDist": "../out" + } + } + ``` + + + + + +2. ##### Next.js 설정 업데이트 + + ```ts + // next.conf.mjs + const isProd = process.env.NODE_ENV === 'production'; + + const internalHost = process.env.TAURI_DEV_HOST || 'localhost'; + + /** @type {import('next').NextConfig} */ + const nextConfig = { + // Next.js가 SSR 대신 SSG를 사용하도록 설정합니다. + // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports + output: 'export', + // Note: 이 기능은 SSG 모드에서 Next.js 이미지 컴포넌트를 사용하려면 필요합니다. + // 다른 해결 방법은 https://nextjs.org/docs/messages/export-image-api 을 참조하세요. + images: { + unoptimized: true, + }, + // assetPrefix를 구성하지 않으면 서버에서 에셋을 제대로 확인하지 못합니다. + assetPrefix: isProd ? undefined : `http://${internalHost}:3000`, + }; + + export default nextConfig; + ``` + +3. ##### package.json 설정 업데이트 + + ```json + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "tauri": "tauri" + } + ``` + + diff --git a/src/content/docs/ko/start/frontend/nuxt.mdx b/src/content/docs/ko/start/frontend/nuxt.mdx new file mode 100644 index 0000000000..1882c3d0cc --- /dev/null +++ b/src/content/docs/ko/start/frontend/nuxt.mdx @@ -0,0 +1,117 @@ +--- +title: Nuxt +i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; + +Nuxt는 Vue를 위한 메타 프레임워크입니다. Nuxt에 대해 더 알아보려면 [https://nuxt.com](https://nuxt.com)를 방문하세요. 이 가이드는 Nuxt 3.11 버전을 기준으로 작성되었습니다. + +## 체크리스트 + +- `ssr: false`를 설정하여 SSG를 사용하세요. Tauri는 서버 기반 솔루션을 지원하지 않습니다. +- 실제 iOS 디바이스에서 실행되도록 설정한 경우 개발 서버의 호스트 IP로 `process.env.TAURI_DEV_HOST`를 사용하세요. +- `tauri.conf.json`에서 `frontendDist`를 `dist/`로 설정하세요. +- `nuxi generate`를 사용하여 빌드하세요. +- (선택 사항): `nuxt.config.ts`에서 `telemetry: false`를 설정하여 원격 분석을 비활성화하세요. + +## 설정 예시 + + + +1. ##### Tauri 설정 업데이트 + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run generate", + "devUrl": "http://localhost:3000", + "frontendDist": "../dist" + } + } + ``` + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn generate", + "devUrl": "http://localhost:3000", + "frontendDist": "../dist" + } + } + ``` + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm generate", + "devUrl": "http://localhost:3000", + "frontendDist": "../dist" + } + } + ``` + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "deno task dev", + "beforeBuildCommand": "deno task generate", + "devUrl": "http://localhost:3000", + "frontendDist": "../dist" + } + } + ``` + + + + + +1. ##### Nuxt 설정 업데이트 + + ```ts + export default defineNuxtConfig({ + // (선택 사항) Nuxt 개발자 도구 활성화 + devtools: { enabled: true }, + // SSG 활성화 + ssr: false, + // 실제 iOS 디바이스에서 실행되도록 설정한 경우 개발 서버를 다른 기기에서 발견할 수 있도록 설정 + devServer: { host: process.env.TAURI_DEV_HOST || 'localhost' }, + vite: { + // Tauri CLI 출력에 대한 더 나은 지원 + clearScreen: false, + // 환경 변수 활성화 + // 추가 환경 변수는 다음 링크에서 찾을 수 있습니다. + // https://v2.tauri.app/reference/environment-variables/ + envPrefix: ['VITE_', 'TAURI_'], + server: { + // Tauri는 일관된 포트를 요구합니다. + strictPort: true, + }, + }, + }); + ``` + + diff --git a/src/content/docs/ko/start/frontend/qwik.mdx b/src/content/docs/ko/start/frontend/qwik.mdx new file mode 100644 index 0000000000..5c21e19f87 --- /dev/null +++ b/src/content/docs/ko/start/frontend/qwik.mdx @@ -0,0 +1,142 @@ +--- +title: Qwik +i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Steps, TabItem, Tabs } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +이 가이드는 Qwik 웹 프레임워크를 사용하여 Tauri 앱을 만드는 방법을 설명합니다. 더 알아보려면 [https://qwik.dev](https://qwik.dev)를 방문하세요. + +## 체크리스트 + +- [SSG](https://qwik.dev/docs/guides/static-site-generation/)를 사용하세요. Tauri는 서버 기반 솔루션을 지원하지 않습니다. +- `dist/`를 `tauri.conf.json`의 `frontendDist`로 설정하세요. + +## 설정 예시 + + + +1. ##### 새로운 Qwik 앱 생성 + + `} + yarn={`yarn create qwik@latest + cd `} + pnpm={`pnpm create qwik@latest + cd `} + deno={`deno run -A npm:create-qwik@latest + cd `} + /> + +1. ##### `static adapter` 설치 + + + +1. ##### 프로젝트에 Tauri CLI 추가 + + + +1. ##### 새로운 Tauri 프로젝트 설정 + + + +1. ##### Tauri 설정 + + + + + + ```json + // tauri.conf.json + { + "build": { + "devUrl": "http://localhost:5173" + "frontendDist": "../dist", + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "devUrl": "http://localhost:5173" + "frontendDist": "../dist", + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "devUrl": "http://localhost:5173" + "frontendDist": "../dist", + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "devUrl": "http://localhost:5173" + "frontendDist": "../dist", + "beforeDevCommand": "deno task dev", + "beforeBuildCommand": "deno task build" + } + } + ``` + + + + + +1. ##### `tauri` 앱 시작 + + + + diff --git a/src/content/docs/ko/start/frontend/sveltekit.mdx b/src/content/docs/ko/start/frontend/sveltekit.mdx new file mode 100644 index 0000000000..6917c1ba1d --- /dev/null +++ b/src/content/docs/ko/start/frontend/sveltekit.mdx @@ -0,0 +1,136 @@ +--- +title: SvelteKit +i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +SvelteKit은 Svelte를 위한 메타 프레임워크입니다. SvelteKit에 대해 더 알아보려면 [https://kit.svelte.dev](https://kit.svelte.dev)를 방문하세요. 이 가이드는 SvelteKit 2.5.7 / Svelte 4.2.15 버전을 기준으로 작성되었습니다. + +## 체크리스트 + +- [SSG](https://kit.svelte.dev/docs/adapter-static) 혹은 [SPA](https://kit.svelte.dev/docs/single-page-apps)를 `static-adapter`를 사용하여 설정하세요. Tauri는 서버 기반 솔루션을 지원하지 않습니다. +- `tauri.conf.json`의 `frontendDist`를 `build/`로 설정하세요. + +## 설정 예시 + + + +1. ##### `@sveltejs/adapter-static` 설치 + + + +1. ##### Tauri 설정 업데이트 + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run build", + "devUrl": "http://localhost:5173", + "frontendDist": "../build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn build", + "devUrl": "http://localhost:5173", + "frontendDist": "../build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm build", + "devUrl": "http://localhost:5173", + "frontendDist": "../build" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "deno task dev", + "beforeBuildCommand": "deno task build", + "devUrl": "http://localhost:5173", + "frontendDist": "../build" + } + } + ``` + + + + + +1. ##### SvelteKit 설정 업데이트 + + ```js title="svelte.config.js" {1} + import adapter from '@sveltejs/adapter-static'; + import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + + /** @type {import('@sveltejs/kit').Config} */ + const config = { + // https://kit.svelte.dev/docs/integrations#preprocessors + // 전처리기에 대한 자세한 내용은 위 링크를 참고하세요. + preprocess: vitePreprocess(), + + kit: { + adapter: adapter(), + }, + }; + + export default config; + ``` + +1. ##### SSR 비활성화 + + 마지막으로, SSR을 비활성화하고 사전 렌더링을 활성화하기 위해 다음 내용을 포함한 `+layout.ts` 파일(TypeScript를 사용하지 않는 경우 `+layout.js`)을 추가하세요: + + ```ts + // src/routes/+layout.ts + export const prerender = true; + export const ssr = false; + ``` + + `static-adapter`는 전체 앱에 대해 SSR을 비활성화하지 않아도 되지만, [클라이언트 측 검사](https://kit.svelte.dev/docs/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window)없이 전역 `window` 객체에 의존하는 API(Tauri의 API와 같은)를 사용할 수 있도록 합니다. + + 또한, SSG 대신 SPA 모드를 선호하는 경우, 어댑터 설정 및 `+layout.ts`를 [어댑터 문서](https://kit.svelte.dev/docs/single-page-apps)에 따라 변경할 수 있습니다. + + diff --git a/src/content/docs/ko/start/frontend/trunk.mdx b/src/content/docs/ko/start/frontend/trunk.mdx new file mode 100644 index 0000000000..1cfc7dc828 --- /dev/null +++ b/src/content/docs/ko/start/frontend/trunk.mdx @@ -0,0 +1,51 @@ +--- +title: Trunk +i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; + +Trunk는 Rust를 위한 WASM 웹 애플리케이션 번들러입니다. Trunk에 대해 더 알아보려면 [https://trunkrs.dev](https://trunkrs.dev)를 방문하세요. 이 가이드는 Trunk 0.17.5 버전을 기준으로 작성되었습니다. + +## 체크리스트 + +- SSG를 사용하세요. Tauri는 서버 기반 솔루션을 공식적으로 지원하지 않습니다. +- `serve.ws_protocol = "ws"`를 설정하여 모바일 개발을 위한 핫 리로드 웹소켓을 제대로 연결할 수 있도록 설정하세요. +- `withGlobalTauri`를 활성화하여 Tauri API가 `window.__TAURI__` 변수에 사용할 수 있도록 설정하고 `wasm-bindgen`을 사용하여 가져올 수 있도록 설정하세요. + +## 설정 예시 + + + +1. ##### Tauri 설정 업데이트 + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "trunk serve", + "beforeBuildCommand": "trunk build", + "devUrl": "http://localhost:8080", + "frontendDist": "../dist" + }, + "app": { + "withGlobalTauri": true + } + } + ``` + +1. ##### Trunk 설정 업데이트 + + ```toml + # Trunk.toml + [watch] + ignore = ["./src-tauri"] + + [serve] + ws_protocol = "ws" + ``` + + diff --git a/src/content/docs/ko/start/frontend/vite.mdx b/src/content/docs/ko/start/frontend/vite.mdx new file mode 100644 index 0000000000..41d09c396c --- /dev/null +++ b/src/content/docs/ko/start/frontend/vite.mdx @@ -0,0 +1,139 @@ +--- +title: Vite +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 5 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; + +Vite는 최신 웹 프로젝트를 위한 더 빠르고 가벼운 개발 경험을 제공하는 빌드 도구입니다. +이 가이드는 Vite 5.4.8 버전을 기준으로 작성되었습니다. + +## 체크리스트 + +- `tauri.conf.json`에서 `frontendDist`를 `dist/`로 설정하세요. +- 실제 iOS 디바이스에서 실행되도록 설정한 경우 개발 서버의 호스트 IP로 `process.env.TAURI_DEV_HOST`를 사용하세요. + +## 설정 예시 + + + +1. ##### Tauri 설정 업데이트 + + `package.json`에 다음 `dev` 및 `build` 스크립트가 있다고 가정합니다: + + ```json + { + "scripts": { + "dev": "vite dev", + "build": "vite build" + } + } + ``` + + Tauri CLI를 사용하여 Vite 개발 서버 및 dist 폴더를 사용하고, + Vite 스크립트를 자동으로 실행하도록 구성할 수 있습니다: + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "npm run dev", + "beforeBuildCommand": "npm run build", + "devUrl": "http://localhost:5173", + "frontendDist": "../dist" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "yarn dev", + "beforeBuildCommand": "yarn build", + "devUrl": "http://localhost:5173", + "frontendDist": "../dist" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "pnpm dev", + "beforeBuildCommand": "pnpm build", + "devUrl": "http://localhost:5173", + "frontendDist": "../dist" + } + } + ``` + + + + + + ```json + // tauri.conf.json + { + "build": { + "beforeDevCommand": "deno task dev", + "beforeBuildCommand": "deno task build", + "devUrl": "http://localhost:5173", + "frontendDist": "../dist" + } + } + ``` + + + + + +1. ##### Vite 설정 업데이트: + + ```js title="vite.config.js" + import { defineConfig } from 'vite'; + + const host = process.env.TAURI_DEV_HOST; + + export default defineConfig({ + // Vite가 Rust 오류를 가리지 않도록 설정합니다. + clearScreen: false, + server: { + // Tauri는 고정된 포트를 사용하므로, 해당 포트에 접속할 수 없는 경우 실패합니다. + strictPort: true, + // Tauri가 원하는 호스트가 설정된 경우, 이를 사용합니다. + host: host || false, + port: 5173, + }, + // `envPrefix`의 항목으로 시작하는 환경 변수는 `import.meta.env`를 통해 tauri의 소스 코드에 노출됩니다. + envPrefix: ['VITE_', 'TAURI_ENV_*'], + build: { + // Tauri는 Windows에서는 Chromium을, macOS 및 Linux에서는 WebKit을 사용합니다. + target: + process.env.TAURI_ENV_PLATFORM == 'windows' + ? 'chrome105' + : 'safari13', + // 디버그 빌드를 위해 압축하지 않습니다. + minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false, + // 디버그 빌드를 위해 소스맵을 생성합니다. + sourcemap: !!process.env.TAURI_ENV_DEBUG, + }, + }); + ``` + + diff --git a/src/content/docs/ko/start/index.mdx b/src/content/docs/ko/start/index.mdx new file mode 100644 index 0000000000..c148fee049 --- /dev/null +++ b/src/content/docs/ko/start/index.mdx @@ -0,0 +1,50 @@ +--- +title: Tauri가 무엇인가요? +i18nReady: true +sidebar: + order: 0 +--- + +Tauri는 주요 데스크톱 및 모바일 플랫폼을 위한 작고 빠른 바이너리를 만들기 위한 프레임워크입니다. 개발자는 사용자 경험을 구축하기 위해 HTML, JavaScript, CSS로 빌드되는 어떤 프론트엔드 프레임워크든 사용할 수 있으며, 필요한 경우 백엔드 로직을 위해 Rust, Swift, 및 Kotlin과 같은 언어를 활용할 수 있습니다. + +아래의 명령어로 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app)을 사용하여 개발을 시작하세요. [요구 사항 가이드](/ko/start/prerequisites/)를 따라 Tauri가 필요로 하는 모든 의존성을 설치하고, 권장 프론트엔드 설정을 보려면 [프론트엔드 설정 가이드](/ko/start/frontend/)를 확인하세요. + +import Cta from '../../_fragments/cta.mdx'; + + + +첫 번째 앱을 만들었다면, [기능 및 레시피 목록](/ko/plugin/)에서 Tauri의 다양한 기능과 레시피를 살펴보세요. + +## 왜 Tauri를 사용해야 하나요? + +Tauri는 개발자가 앱을 만들기 위한 3가지 주요 장점을 제공합니다: + +- 앱을 만들기 위한 안전한 기반 +- 시스템의 네이티브 웹뷰를 사용하여 번들 크기 최소화 +- 개발자가 어떤 프론트엔드든 사용할 수 있으며, 다양한 언어의 바인딩을 사용할 수 있는 유연성 + +[Tauri 1.0 블로그 포스트](/blog/tauri-1-0/)에서 Tauri의 철학에 대해 더 자세히 알아보세요. + +### 안전한 기반 + +Rust로 작성되면서, Tauri는 Rust가 제공하는 메모리, 스레드, 타입 안정성을 활용할 수 있습니다. Tauri로 만든 앱은 개발자가 Rust 전문가가 아니더라도 자동으로 그 이점을 얻을 수 있습니다. + +Tauri는 메이저 및 마이너 릴리즈에 대한 보안 감사를 받습니다. 이는 Tauri 조직의 코드뿐만 아니라 Tauri가 의존하는 상위 족속성에 대해서도 포함됩니다. 물론 이것이 모든 위험을 완화하는 것은 아니지만, 개발자들이 그 위에 구축할 수 있는 견고한 기반을 제공합니다. + +[Tauri 보안 정책](https://github.com/tauri-apps/tauri/security/policy) 및 [Tauri 2.0 감사 보고서](https://github.com/tauri-apps/tauri/blob/dev/audits/Radically_Open_Security-v2-report.pdf)를 읽어보세요. + +### 더 작은 앱 크기 + +Tauri 앱은 사용자의 시스템에 내장된 웹뷰를 활용합니다. Tauri 앱은 그 앱에 특정한 코드와 자산만 포함하며, 각 앱과 함께 브라우저 엔진을 번들로 포함할 필요가 없습니다. 이는 최소한의 Tauri 앱이 600KB보다 작을 수 있음을 의미합니다. + +[앱 크기 개념](/ko/concept/size/)에서 최적화된 앱을 만드는 방법에 대해 더 자세히 알아보세요. + +### 유연한 아키텍처 + +Tauri는 웹 기술을 사용하기 때문에, 거의 모든 프론트엔드 프레임워크가 Tauri와 호환됩니다. [프론트엔드 설정 가이드](/ko/start/frontend/)에서 인기 있는 프론트엔드 프레임워크에 대한 일반적인 설정을 확인하세요. + +JavaScript의 `invoke` 함수를 사용해 개발자는 JavaScript와 Rust사이를 연결할 수 있습니다. Swift와 Kotlin 연결에 대해서는 [Tauri 플러그인](/ko/develop/plugins/)을 살펴보세요. + +[TAO](https://github.com/tauri-apps/tao)는 Tauri 창 생성을 담당하며, [WRY](https://github.com/tauri-apps/wry)는 웹뷰 렌더링을 담당합니다. 이들은 Tauri에서 유지하는 라이브러리이며, 만약 Tauri가 제공하지 않는 더 깊은 시스템 통합을 요구한다면 직접 사용할 수 있습니다. + +또한, Tauri는 커뮤니티에서 제공하는 플러그인 외에도 여러 플러그인을 관리합니다. [플러그인 섹션](/ko/plugin/)에서 찾아보세요. diff --git a/src/content/docs/ko/start/migrate/from-tauri-1.mdx b/src/content/docs/ko/start/migrate/from-tauri-1.mdx new file mode 100644 index 0000000000..4d1544a72e --- /dev/null +++ b/src/content/docs/ko/start/migrate/from-tauri-1.mdx @@ -0,0 +1,1202 @@ +--- +title: Tauri 1.0에서 업그레이드 +i18nReady: true +sidebar: + order: 15 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +이 가이드는 Tauri 1.0 애플리케이션을 Tauri 2.0으로 업그레이드하는 방법을 안내합니다. + +## 모바일 대응 + +Tauri의 모바일 인터페이스를 사용하려면 공유 라이브러리를 출력하도록 프로젝트를 변경해야 합니다. 기존 애플리케이션을 모바일 대상으로 지정하는 경우 데스크톱 실행 파일과 함께 해당 종류의 아티팩트를 생성하도록 crate를 변경해야 합니다. + +1. Cargo 매니페스트를 변경하여 라이브러리를 생성합니다. 다음 블록을 추가합니다: + +```toml +// src-tauri/Cargo.toml +[lib] +name = "app_lib" +crate-type = ["staticlib", "cdylib", "rlib"] +``` + +2. `src-tauri/src/main.rs`를 `src-tauri/src/lib.rs`로 변경합니다. 이 파일은 데스크톱 및 모바일 대상에서 공유됩니다. + +3. `lib.rs`의 `main` 함수 헤더를 다음과 같이 변경합니다: + +```rust +// src-tauri/src/lib.rs +#[cfg_attr(mobile, tauri::mobile_entry_point)] +pub fn run() { + // your code here +} +``` + +`tauri::mobile_entry_point` 매크로는 모바일에서 실행될 함수를 준비합니다. + +4. 공유된 run 함수를 호출하는 `main.rs` 파일을 다시 생성합니다: + +```rust +// src-tauri/src/main.rs +#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] + +fn main() { + app_lib::run(); +} +``` + +## 자동 마이그레이션 + +Tauri v2 CLI에는 대부분의 프로세스를 자동화하고 마이그레이션을 완료하는 데 도움이 되는 `migrate` 명령어가 포함되어 있습니다: + + + +[CLI 레퍼런스](/ko/reference/cli/#migrate)에서 `migrate` 명령어에 대해 자세히 알아보세요. + +## 변경 사항 요약 + +다음은 Tauri 1.0에서 Tauri 2.0으로의 변경 사항에 대한 요약입니다: + +### Tauri 설정 + +- `package > productName` 및 `package > version`을 최상위 객체로 이동했습니다. +- 바이너리 이름(binary name)이 더 이상 `productName`과 일치하도록 자동으로 변경되지 않으므로 `productName`과 일치하는 `mainBinaryName` 문자열을 최상위 객체에 추가해야 합니다. +- `package`가 제거되었습니다. +- `tauri` 키가 `app`로 변경되었습니다. +- `tauri > allowlist`가 제거되었습니다. [권한 마이그레이션](#권한-마이그레이션)을 참조하세요. +- `tauri > allowlist > protocol > assetScope`가 `app > security > assetProtocol > scope`로 이동했습니다. +- `tauri > cli`가 `plugins > cli`로 이동했습니다. +- `tauri > windows > fileDropEnabled`가 `app > windows > dragDropEnabled`로 변경되었습니다. +- `tauri > updater > active`가 제거되었습니다. +- `tauri > updater > dialog`가 제거되었습니다. +- `tauri > updater`가 `plugins > updater`로 이동했습니다. +- `bundle > createUpdaterArtifacts`가 추가되었습니다. 애플리케이션 업데이터를 사용할 때 설정해야 합니다. + - v1 애플리케이션을 이미 배포한 경우 `v1Compatible`로 설정해야 합니다. [업데이터 가이드](/ko/plugin/updater/)에서 자세히 알아보세요. +- `tauri > systemTray`가 `app > trayIcon`로 변경되었습니다. +- `tauri > pattern`이 `app > security > pattern`로 이동했습니다. +- `tauri > bundle`이 최상위 객체로 이동했습니다. +- `tauri > bundle > identifier`가 최상위 객체로 이동했습니다. +- `tauri > bundle > dmg`가 `bundle > macOS > dmg`로 이동했습니다. +- `tauri > bundle > deb`가 `bundle > linux > deb`로 이동했습니다. +- `tauri > bundle > appimage`가 `bundle > linux > appimage`로 이동했습니다. +- `tauri > bundle > macOS > license`가 제거되었습니다. `bundle > licenseFile`을 대신 사용하세요. +- `tauri > bundle > windows > wix > license`가 제거되었습니다. `bundle > licenseFile`을 대신 사용하세요. +- `tauri > bundle > windows > nsis > license`가 제거되었습니다. `bundle > licenseFile`을 대신 사용하세요. +- `tauri > bundle > windows > webviewFixedRuntimePath`가 제거되었습니다. `bundle > windows > webviewInstallMode`을 대신 사용하세요. +- `build > withGlobalTauri`가 `app > withGlobalTauri`로 이동했습니다. +- `build > distDir`가 `frontendDist`로 변경되었습니다. +- `build > devPath`가 `devUrl`로 변경되었습니다. + +[Tauri 2.0 설정 API 레퍼런스](/ko/reference/config/) + +### 새 Cargo 기능 + +- linux-protocol-body: 사용자 지정 프로토콜 요청에 대한 본문 구문 분석을 활성화하여 IPC에서 사용할 수 있습니다. webkit2gtk 2.40이 필요합니다. + +### 삭제된 Cargo 기능 + +- reqwest-client: 이제 reqwest가 유일한 지원 클라이언트입니다. +- reqwest-native-tls-vendored: `native-tls-vendored`를 대신 사용하세요. +- process-command-api: `shell` 플러그인을 대신 사용하세요. (다음 섹션 참조). +- shell-open-api: `shell` 플러그인을 대신 사용하세요. (다음 섹션 참조). +- windows7-compat: `notification` 플러그인으로 이동했습니다. +- updater: Updater는 이제 플러그인입니다. +- linux-protocol-headers: 최소 webkit2gtk 버전을 업그레이드하여 기본적으로 활성화됩니다. +- system-tray: `tray-icon`으로 변경되었습니다. + +### Rust Crate 변경사항 + +- `api` 모듈이 제거되었습니다. 각 API 모듈은 Tauri 플러그인에서 찾을 수 있습니다. +- `api::dialog` 모듈이 제거되었습니다. `tauri-plugin-dialog`를 대신 사용하세요. [마이그레이션](#dialog-플러그인으로-마이그레이션) +- `api::file` 모듈이 제거되었습니다. Rust의 [`std::fs`](https://doc.rust-lang.org/std/fs/)를 대신 사용하세요. +- `api::http` 모듈이 제거되었습니다. `tauri-plugin-http`를 대신 사용하세요. [마이그레이션](#http-플러그인으로-마이그레이션) +- `api::ip` 모듈이 재작성되고 `tauri::ipc`로 이동했습니다. 새로운 API, 특히 `tauri::ipc::Channel`을 확인하세요. +- `api::path` 모듈 함수 및 `tauri::PathResolved`가 `tauri::Manager::path`로 이동했습니다. [마이그레이션](#path를-tauri-manager로-마이그레이션) +- `api::process::Command`, `tauri::api::shell` 및 `tauri::Manager::shell_scope` API가 제거되었습니다. `tauri-plugin-shell`을 대신 사용하세요. [마이그레이션](#shell-플러그인으로-마이그레이션) +- `api::process::current_binary` 및 `tauri::api::process::restart`가 `tauri::process`로 이동했습니다. +- `api::version` 모듈이 제거되었습니다. [semver crate](https://docs.rs/semver/latest/semver/)를 대신 사용하세요. +- `App::clipboard_manager` 및 `AppHandle::clipboard_manager`가 제거되었습니다. `tauri-plugin-clipboard`를 대신 사용하세요. [마이그레이션](#clipboard-플러그인으로-마이그레이션) +- `App::get_cli_matches`가 제거되었습니다. `tauri-plugin-cli`를 대신 사용하세요. [마이그레이션](#cli-플러그인으로-마이그레이션) +- `App::global_shortcut_manager` 및 `AppHandle::global_shortcut_manager`가 제거되었습니다. `tauri-plugin-global-shortcut`를 대신 사용하세요. [마이그레이션](#global-shortcut-플러그인으로-마이그레이션) +- `Manager::fs_scope`가 제거되었습니다. 파일 시스템 스코프는 `tauri_plugin_fs::FsExt`를 통해 액세스할 수 있습니다. +- `Plugin::PluginApi`는 이제 두 번째 인수로 플러그인 설정을 받습니다. +- `Plugin::setup_with_config`가 제거되었습니다. 업데이트된 `tauri::Plugin::PluginApi`를 대신 사용하세요. +- `scope::ipc::RemoteDomainAccessScope::enable_tauri_api` 및 `scope::ipc::RemoteDomainAccessScope::enables_tauri_api`가 제거되었습니다. 각 핵심 플러그인을 개별적으로 `scope::ipc::RemoteDomainAccessScope::add_plugin`을 통해 활성화하세요. +- `scope::IpcScope`가 제거되었습니다. `scope::ipc::Scope`를 대신 사용하세요. +- `scope::FsScope`, `scope::GlobPattern` 및 `scope::FsScopeEvent`가 제거되었습니다. 대신 `scope::fs::Scope`, `scope::fs::Pattern` 및 `scope::fs::Event`를 사용하세요. +- `updater` 모듈이 제거되었습니다. `tauri-plugin-updater`를 대신 사용하세요. [마이그레이션](#updater-플러그인으로-마이그레이션) +- `Env.args` 필드가 제거되었습니다. 대신 `Env.args_os` 필드를 사용하세요. +- `Menu`, `MenuEvent`, `CustomMenuItem`, `Submenu`, `WindowMenuEvent`, `MenuItem` 및 `Builder::on_menu_event` API가 제거되었습니다. [마이그레이션](#menu로-마이그레이션) +- `SystemTray`, `SystemTrayHandle`, `SystemTrayMenu`, `SystemTrayMenuItemHandle`, `SystemTraySubmenu`, `MenuEntry` 및 `SystemTrayMenuItem` API가 제거되었습니다. [마이그레이션](#tray-icon-모듈로-마이그레이션) + +### JavaScript API 변경사항 + +`@tauri-apps/api` 패키지는 더 이상 비핵심 모듈을 제공하지 않습니다. 이전 `tauri` (이제 `core`), `path`, `event` 및 `window` 모듈만 내보냅니다. 나머지는 플러그인으로 이동했습니다. + +- `@tauri-apps/api/tauri` 모듈이 `@tauri-apps/api/core`로 변경되었습니다. [마이그레이션](#core-모듈로-마이그레이션) +- `@tauri-apps/api/cli` 모듈이 제거되었습니다. `@tauri-apps/plugin-cli`를 대신 사용하세요. [마이그레이션](#cli-플러그인으로-마이그레이션) +- `@tauri-apps/api/clipboard` 모듈이 제거되었습니다. `@tauri-apps/plugin-clipboard`를 대신 사용하세요. [마이그레이션](#clipboard-플러그인으로-마이그레이션) +- `@tauri-apps/api/dialog` 모듈이 제거되었습니다. `@tauri-apps/plugin-dialog`를 대신 사용하세요. [마이그레이션](#dialog-플러그인으로-마이그레이션) +- `@tauri-apps/api/fs` 모듈이 제거되었습니다. `@tauri-apps/plugin-fs`를 대신 사용하세요. [마이그레이션](#file-system-플러그인으로-마이그레이션) +- `@tauri-apps/api/global-shortcut` 모듈이 제거되었습니다. `@tauri-apps/plugin-global-shortcut`를 대신 사용하세요. [마이그레이션](#global-shortcut-플러그인으로-마이그레이션) +- `@tauri-apps/api/http` 모듈이 제거되었습니다. `@tauri-apps/plugin-http`를 대신 사용하세요. [마이그레이션](#http-플러그인으로-마이그레이션) +- `@tauri-apps/api/os` 모듈이 제거되었습니다. `@tauri-apps/plugin-os`를 대신 사용하세요. [마이그레이션](#os-플러그인으로-마이그레이션) +- `@tauri-apps/api/notification` 모듈이 제거되었습니다. `@tauri-apps/plugin-notification`를 대신 사용하세요. [마이그레이션](#notification-플러그인으로-마이그레이션) +- `@tauri-apps/api/process` 모듈이 제거되었습니다. `@tauri-apps/plugin-process`를 대신 사용하세요. [마이그레이션](#process-플러그인으로-마이그레이션) +- `@tauri-apps/api/shell` 모듈이 제거되었습니다. `@tauri-apps/plugin-shell`를 대신 사용하세요. [마이그레이션](#shell-플러그인으로-마이그레이션) +- `@tauri-apps/api/updater` 모듈이 제거되었습니다. `@tauri-apps/plugin-updater`를 대신 사용하세요. [마이그레이션](#updater-플러그인으로-마이그레이션) +- `@tauri-apps/api/window` 모듈이 `@tauri-apps/api/webviewWindow`로 변경되었습니다. [마이그레이션](#새로운-window-api로-마이그레이션) + +v1 플러그인은 이제 `@tauri-apps/plugin-`으로 공개됩니다. 이전에는 git에서 `tauri-plugin--api`로 사용할 수 있었습니다. + +### 환경 변수 변경사항 + +일관성과 실수 방지를 위해 대부분의 Tauri CLI에서 읽고 쓰는 환경 변수의 이름이 변경되었습니다: + +- `TAURI_PRIVATE_KEY` -> `TAURI_SIGNING_PRIVATE_KEY` +- `TAURI_KEY_PASSWORD` -> `TAURI_SIGNING_PRIVATE_KEY_PASSWORD` +- `TAURI_SKIP_DEVSERVER_CHECK` -> `TAURI_CLI_NO_DEV_SERVER_WAIT` +- `TAURI_DEV_SERVER_PORT` -> `TAURI_CLI_PORT` +- `TAURI_PATH_DEPTH` -> `TAURI_CLI_CONFIG_DEPTH` +- `TAURI_FIPS_COMPLIANT` -> `TAURI_BUNDLER_WIX_FIPS_COMPLIANT` +- `TAURI_DEV_WATCHER_IGNORE_FILE` -> `TAURI_CLI_WATCHER_IGNORE_FILENAME` +- `TAURI_TRAY` -> `TAURI_LINUX_AYATANA_APPINDICATOR` +- `TAURI_APPLE_DEVELOPMENT_TEAM` -> `APPLE_DEVELOPMENT_TEAM` +- `TAURI_PLATFORM` -> `TAURI_ENV_PLATFORM` +- `TAURI_ARCH` -> `TAURI_ENV_ARCH` +- `TAURI_FAMILY` -> `TAURI_ENV_FAMILY` +- `TAURI_PLATFORM_VERSION` -> `TAURI_ENV_PLATFORM_VERSION` +- `TAURI_PLATFORM_TYPE` -> `TAURI_ENV_PLATFORM_TYPE` +- `TAURI_DEBUG` -> `TAURI_ENV_DEBUG` + +### 이벤트 시스템 + +이벤트 시스템이 더 쉽게 사용할 수 있도록 재설계되었습니다. 이벤트 소스에 의존하는 대신 이벤트 대상(타겟)에 의존하는 더 간단한 구현을 사용합니다. + +- `emit` 함수는 이제 모든 이벤트 리스너에 이벤트를 내보냅니다. +- 새롭게 추가된 `emit_to` 함수는 특정 대상에 이벤트를 트리거합니다. +- `emit_filter`는 이제 창이 아닌 [`EventTarget`](https://docs.rs/tauri/2.0.0/tauri/event/enum.EventTarget.html)을 기준으로 필터링합니다. +- `listen_global`의 이름을 `listen_any`로 변경했습니다. 이제 필터와 대상에 관계없이 모든 이벤트를 수신 대기합니다. + +### 다중 웹뷰(Multiwebview) 지원 + +Tauri v2는 현재 `unstable` 기능 플래그 뒤에 있는 다중 웹뷰 지원을 추가했습니다. +이를 지원하기 위해 Rust의 `Window` 유형을 `WebviewWindow`로 변경하고 매니저의 `get_window` 함수를 `get_webview_window`로 변경했습니다. + +`WebviewWindow` JS API 유형은 이제 `@tauri-apps/api/webviewWindow` 대신 `@tauri-apps/api/window`에서 다시 내보내집니다. + +### Windows에서의 새 원본 URL + +Windows에서 프로덕션 앱의 프론트엔드 파일은 이제 `https://tauri.localhost` 대신 `http://tauri.localhost`에서 호스팅됩니다. IndexedDB로 인하여, v1에서 `dangerousUseHttpScheme`을 사용하지 않으면 로컬 저장소 및 쿠키가 리셋됩니다. 이를 방지하려면 `app > windows > useHttpsScheme`을 `true`로 설정하거나 `WebviewWindowBuilder::use_https_scheme`을 사용하여 `https` 체계를 계속 사용하도록 설정하면 됩니다. + +## 자세한 마이그레이션 단계 + +Tauri 1.0 애플리케이션을 Tauri 2.0로 마이그레이션할 때 발생할 수 있는 일반적인 시나리오입니다. + +### Core 모듈로 마이그레이션 + +`@tauri-apps/api/tauri` 모듈이 `@tauri-apps/api/core`로 변경되었습니다. +간단하게 모듈 임포트를 변경하세요: + +```diff +- import { invoke } from "@tauri-apps/api/tauri" ++ import { invoke } from "@tauri-apps/api/core" +``` + +### CLI 플러그인으로 마이그레이션 + +Rust의 `App::get_cli_matches` JavaScript `@tauri-apps/api/cli` API가 제거되었습니다. `@tauri-apps/plugin-cli` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-cli = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_cli::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-cli": "^2.0.0" + } +} +``` + +```javascript +import { getMatches } from '@tauri-apps/plugin-cli'; +const matches = await getMatches(); +``` + + + + +```rust +fn main() { + use tauri_plugin_cli::CliExt; + tauri::Builder::default() + .plugin(tauri_plugin_cli::init()) + .setup(|app| { + let cli_matches = app.cli().matches()?; + Ok(()) + }) +} +``` + + + + +### Clipboard 플러그인으로 마이그레이션 + +Rust의 `App::clipboard_manager` 및 `AppHandle::clipboard_manager` 그리고 JavaScript `@tauri-apps/api/clipboard` API가 제거되었습니다. `@tauri-apps/plugin-clipboard-manager` 플러그인을 대신 사용하세요: + +```toml +[dependencies] +tauri-plugin-clipboard-manager = "2" +``` + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_clipboard_manager::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-clipboard-manager": "^2.0.0" + } +} +``` + +```javascript +import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager'; +await writeText('Tauri is awesome!'); +assert(await readText(), 'Tauri is awesome!'); +``` + + + + +```rust +use tauri_plugin_clipboard::{ClipboardExt, ClipKind}; +tauri::Builder::default() + .plugin(tauri_plugin_clipboard::init()) + .setup(|app| { + app.clipboard().write(ClipKind::PlainText { + label: None, + text: "Tauri is awesome!".into(), + })?; + Ok(()) + }) +``` + + + + +### Dialog 플러그인으로 마이그레이션 + +Rust의 `tauri::api::dialog` JavaScript `@tauri-apps/api/dialog` API가 제거되었습니다. `@tauri-apps/plugin-dialog` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-dialog = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_dialog::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-dialog": "^2.0.0" + } +} +``` + +```javascript +import { save } from '@tauri-apps/plugin-dialog'; +const filePath = await save({ + filters: [ + { + name: 'Image', + extensions: ['png', 'jpeg'], + }, + ], +}); +``` + + + + +```rust +use tauri_plugin_dialog::DialogExt; +tauri::Builder::default() + .plugin(tauri_plugin_dialog::init()) + .setup(|app| { + app.dialog().file().pick_file(|file_path| { + // do something with the optional file path here + // the file path is `None` if the user closed the dialog + }); + + app.dialog().message("Tauri is Awesome!").show(); + Ok(()) + }) +``` + + + + +### File System 플러그인으로 마이그레이션 + +Rust의 `App::get_cli_matches` 및 JavaScript `@tauri-apps/api/fs` API가 제거되었습니다. 대신 [`std::fs`](https://doc.rust-lang.org/std/fs/)를 Rust에 사용하고 `@tauri-apps/plugin-fs` 플러그인을 JavaScript에 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-fs = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_fs::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-fs": "^2.0.0" + } +} +``` + +```javascript +import { mkdir, BaseDirectory } from '@tauri-apps/plugin-fs'; +await mkdir('db', { baseDir: BaseDirectory.AppLocalData }); +``` + +일부 함수와 타입이 변경되거나 삭제되었습니다: + +- `Dir` enum 별칭이 제거되었습니다, `BaseDirectory`를 사용하세요. +- `FileEntry`, `FsBinaryFileOption`, `FsDirOptions`, `FsOptions`, `FsTextFileOption` 그리고 `BinaryFileContents` 인터페이스와 타입 별칭이 제거되었습니다, 각 함수에 맞는 새로운 인터페이스를 사용하세요. +- `createDir`이 `mkdir`로 변경되었습니다. +- `readBinaryFile`이 `readFile`로 변경되었습니다. +- `removeDir`이 제거되고 `remove`로 이동되었습니다. +- `removeFile`이 제거되고 `remove`로 이동되었습니다. +- `renameFile`이 제거되고 `rename`로 이동되었습니다. +- `writeBinaryFile`이 `writeFile`로 변경되었습니다. + + + + +Rust에서는 [`std::fs`](https://doc.rust-lang.org/std/fs/) 함수를 사용하세요. + + + + +### Global Shortcut 플러그인으로 마이그레이션 + +Rust의 `App::global_shortcut_manager` 및 `AppHandle::global_shortcut_manager` 그리고 JavaScript `@tauri-apps/api/global-shortcut` API가 제거되었습니다. `@tauri-apps/plugin-global-shortcut` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +[target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies] +tauri-plugin-global-shortcut = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_global_shortcut::Builder::default().build()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-global-shortcut": "^2.0.0" + } +} +``` + +```javascript +import { register } from '@tauri-apps/plugin-global-shortcut'; +await register('CommandOrControl+Shift+C', () => { + console.log('Shortcut triggered'); +}); +``` + + + + +```rust +use tauri_plugin_global_shortcut::GlobalShortcutExt; + +tauri::Builder::default() + .plugin( + tauri_plugin_global_shortcut::Builder::new().with_handler(|app, shortcut| { + println!("Shortcut triggered: {:?}", shortcut); + }) + .build(), + ) + .setup(|app| { + // register a global shortcut + // on macOS, the Cmd key is used + // on Windows and Linux, the Ctrl key is used + app.global_shortcut().register("CmdOrCtrl+Y")?; + Ok(()) + }) +``` + + + + +### HTTP 플러그인으로 마이그레이션 + +Rust의 `tauri::api::http` JavaScript `@tauri-apps/api/http` API가 제거되었습니다. `@tauri-apps/plugin-http` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-http = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_http::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-http": "^2.0.0" + } +} +``` + +```javascript +import { fetch } from '@tauri-apps/plugin-http'; +const response = await fetch( + 'https://raw.githubusercontent.com/tauri-apps/tauri/dev/package.json' +); +``` + + + + +```rust +use tauri_plugin_http::reqwest; + +tauri::Builder::default() + .plugin(tauri_plugin_http::init()) + .setup(|app| { + let response_data = tauri::async_runtime::block_on(async { + let response = reqwest::get( + "https://raw.githubusercontent.com/tauri-apps/tauri/dev/package.json", + ) + .await + .unwrap(); + response.text().await + })?; + Ok(()) + }) +``` + +HTTP 플러그인은 [reqwest](https://docs.rs/reqwest/latest/reqwest/)를 다시 내보내므로 자세한 내용은 해당 문서에서 확인할 수 있습니다. + + + + +### Notification 플러그인으로 마이그레이션 + +Rust의 `tauri::api::notification` JavaScript `@tauri-apps/api/notification` API가 제거되었습니다. `@tauri-apps/plugin-notification` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-notification = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_notification::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-notification": "^2.0.0" + } +} +``` + +```javascript +import { sendNotification } from '@tauri-apps/plugin-notification'; +sendNotification('Tauri is awesome!'); +``` + + + + +```rust +use tauri_plugin_notification::NotificationExt; +use tauri::plugin::PermissionState; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_notification::init()) + .setup(|app| { + if app.notification().permission_state()? == PermissionState::Unknown { + app.notification().request_permission()?; + } + if app.notification().permission_state()? == PermissionState::Granted { + app.notification() + .builder() + .body("Tauri is awesome!") + .show()?; + } + Ok(()) + }) +} +``` + + + + +### Menu로 마이그레이션 + +Rust의 `Menu` API가 `tauri::menu` 모듈으로 이동되고 [muda crate](https://github.com/tauri-apps/muda)를 사용하도록 재작성되었습니다. + +#### `tauri::menu::MenuBuilder` 사용하기 + +`tauri::menu::MenuBuilder` 대신 `tauri::Menu`를 사용하세요. 생성자는 매니저 인스턴스(`App`, `AppHandle` 또는 `WebviewWindow`)를 인자로 받습니다: + +```rust +use tauri::menu::MenuBuilder; + +tauri::Builder::default() + .setup(|app| { + let menu = MenuBuilder::new(app) + .copy() + .paste() + .separator() + .undo() + .redo() + .text("open-url", "Open URL") + .check("toggle", "Toggle") + .icon("show-app", "Show App", app.default_window_icon().cloned().unwrap()) + .build()?; + Ok(()) + }) +``` + +#### `tauri::menu::PredefinedMenuItem` 사용하기 + +`tauri::menu::PredefinedMenuItem` 대신 `tauri::MenuItem`을 사용하세요: + +```rust +use tauri::menu::{MenuBuilder, PredefinedMenuItem}; + +tauri::Builder::default() + .setup(|app| { + let menu = MenuBuilder::new(app).item(&PredefinedMenuItem::copy(app)?).build()?; + Ok(()) + }) +``` + +:::tip +MenuBuilder에는 각각의 PredefinedMenuItem을 추가하는 전용 메소드가 있으므로, `.item(&PredefinedMenuItem::copy(app, None)?)` 대신 `.copy()`를 호출할 수 있습니다. +::: + +#### `tauri::menu::MenuItemBuilder` 사용하기 + +`tauri::menu::MenuItemBuilder` 대신 `tauri::CustomMenuItem`을 사용하세요: + +```rust +use tauri::menu::MenuItemBuilder; + +tauri::Builder::default() + .setup(|app| { + let toggle = MenuItemBuilder::new("Toggle").accelerator("Ctrl+Shift+T").build(app)?; + Ok(()) + }) +``` + +#### `tauri::menu::SubmenuBuilder` 사용하기 + +`tauri::menu::SubmenuBuilder` 대신 `tauri::Submenu`를 사용하세요: + +```rust +use tauri::menu::{MenuBuilder, SubmenuBuilder}; + +tauri::Builder::default() + .setup(|app| { + let submenu = SubmenuBuilder::new(app, "Sub") + .text("Tauri") + .separator() + .check("Is Awesome") + .build()?; + let menu = MenuBuilder::new(app).item(&submenu).build()?; + Ok(()) + }) +``` + +`tauri::Builder::menu`는 이제 메뉴를 빌드하려면 매니저 인스턴스가 필요하기 때문에 클로저가 필요합니다. 자세한 내용은 [문서](https://docs.rs/tauri/2.0.0/tauri/struct.Builder.html#method.menu)를 참고하세요. + +#### Menu 이벤트 + +Rust `tauri::Builder::on_menu_event` API가 제거되었습니다. `tauri::App::on_menu_event` 또는 `tauri::AppHandle::on_menu_event`를 대신 사용하세요: + +```rust +use tauri::menu::{CheckMenuItemBuilder, MenuBuilder, MenuItemBuilder}; + +tauri::Builder::default() + .setup(|app| { + let toggle = MenuItemBuilder::with_id("toggle", "Toggle").build(app)?; + let check = CheckMenuItemBuilder::new("Mark").build(app)?; + let menu = MenuBuilder::new(app).items(&[&toggle, &check]).build()?; + + app.set_menu(menu)?; + + app.on_menu_event(move |app, event| { + if event.id() == check.id() { + println!("`check` triggered, do something! is checked? {}", check.is_checked().unwrap()); + } else if event.id() == "toggle" { + println!("toggle triggered!"); + } + }); + Ok(()) + }) +``` + +어떤 메뉴 아이템이 선택되었는지 확인하는 방법에는 두 가지가 있습니다. 아이템을 이벤트 핸들러 클로저로 이동하여 ID를 비교하거나 `with_id` 생성자를 통해 아이템의 사용자 지정 ID를 정의하고 해당 ID 문자열을 사용하여 비교합니다. + +:::tip +메뉴 아이템은 메뉴 간에 공유할 수 있으며, 메뉴 이벤트는 메뉴나 창이 아닌 메뉴 아이템에 바인딩됩니다. +메뉴 아이템이 선택될 때 모든 리스너가 트리거되지 않도록 하려면 메뉴 아이템을 공유하지 말고 전용 인스턴스를 사용하여 `tauri::WebviewWindow/WebviewWindowBuilder::on_menu_event` 클로저로 이동할 수 있습니다. +::: + +### OS 플러그인으로 마이그레이션 + +Rust `tauri::api::os` 및 JavaScript `@tauri-apps/api/os` API가 제거되었습니다. `@tauri-apps/plugin-os` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-os = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_os::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-os": "^2.0.0" + } +} +``` + +```javascript +import { arch } from '@tauri-apps/plugin-os'; +const architecture = await arch(); +``` + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_os::init()) + .setup(|app| { + let os_arch = tauri_plugin_os::arch(); + Ok(()) + }) +} +``` + + + + +### Process 플러그인으로 마이그레이션 + +Rust `tauri::api::process` 및 JavaScript `@tauri-apps/api/process` API가 제거되었습니다. `@tauri-apps/plugin-process` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-process = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_process::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-process": "^2.0.0" + } +} +``` + +```javascript +import { exit, relaunch } from '@tauri-apps/plugin-process'; +await exit(0); +await relaunch(); +``` + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_process::init()) + .setup(|app| { + // exit the app with a status code + app.handle().exit(1); + // restart the app + app.handle().restart(); + Ok(()) + }) +} +``` + + + + +### Shell 플러그인으로 마이그레이션 + +Rust `tauri::api::shell` 및 JavaScript `@tauri-apps/api/shell` API가 제거되었습니다. `@tauri-apps/plugin-shell` 플러그인을 대신 사용하세요: + +1. cargo 의존성에 추가하세요: + +```toml +# Cargo.toml +[dependencies] +tauri-plugin-shell = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_shell::init()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-shell": "^2.0.0" + } +} +``` + +```javascript +import { Command, open } from '@tauri-apps/plugin-shell'; +const output = await Command.create('echo', 'message').execute(); + +await open('https://github.com/tauri-apps/tauri'); +``` + + + + +- URL 열기 + +```rust +use tauri_plugin_shell::ShellExt; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_shell::init()) + .setup(|app| { + app.shell().open("https://github.com/tauri-apps/tauri", None)?; + Ok(()) + }) +} +``` + +- 자식 프로세스 생성 및 상태 코드 검색 + +```rust +use tauri_plugin_shell::ShellExt; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_shell::init()) + .setup(|app| { + let status = tauri::async_runtime::block_on(async move { app.shell().command("which").args(["ls"]).status().await.unwrap() }); + println!("`which` finished with status: {:?}", status.code()); + Ok(()) + }) +} +``` + +- 자식 프로세스 생성 및 출력 캡처 + +```rust +use tauri_plugin_shell::ShellExt; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_shell::init()) + .setup(|app| { + let output = tauri::async_runtime::block_on(async move { app.shell().command("echo").args(["TAURI"]).output().await.unwrap() }); + assert!(output.status.success()); + assert_eq!(String::from_utf8(output.stdout).unwrap(), "TAURI"); + Ok(()) + }) +} +``` + +- 자식 프로세스 생성 및 비동기적으로 이벤트 읽기 + +```rust +use tauri_plugin_shell::{ShellExt, process::CommandEvent}; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_shell::init()) + .setup(|app| { + let handle = app.handle().clone(); + tauri::async_runtime::spawn(async move { + let (mut rx, mut child) = handle.shell().command("cargo") + .args(["tauri", "dev"]) + .spawn() + .expect("Failed to spawn cargo"); + + let mut i = 0; + while let Some(event) = rx.recv().await { + if let CommandEvent::Stdout(line) = event { + println!("got: {}", String::from_utf8(line).unwrap()); + i += 1; + if i == 4 { + child.write("message from Rust\n".as_bytes()).unwrap(); + i = 0; + } + } + } + }); + Ok(()) + }) +} +``` + + + + +### Tray Icon 모듈로 마이그레이션 + +Rust `SystemTray` API가 일관성을 위해 `TrayIcon`으로 이름이 변경되었습니다. 새로운 API는 Rust `tray` 모듈에서 찾을 수 있습니다. + +#### `tauri::tray::TrayIconBuilder` 사용하기 + +`tauri::SystemTray` 대신 `tauri::tray::TrayIconBuilder`를 사용하세요: + +```rust +let tray = tauri::tray::TrayIconBuilder::with_id("my-tray").build(app)?; +``` + +[TrayIconBuilder](https://docs.rs/tauri/2.0.0/tauri/tray/struct.TrayIconBuilder.html)에서 자세한 내용을 참고하세요. + +#### Menu로 마이그레이션 + +`tauri::SystemTrayMenu` 대신 `tauri::menu::Menu`를, `tauri::SystemTraySubmenu` 대신 `tauri::menu::Submenu`를, `tauri::SystemTrayMenuItem` 대신 `tauri::menu::PredefinedMenuItem`을 사용하세요. + +#### Tray 이벤트 + +`tauri::SystemTray::on_event`가 `tauri::tray::TrayIconBuilder::on_menu_event` 및 `tauri::tray::TrayIconBuilder::on_tray_icon_event`로 분리되었습니다: + +```rust +use tauri::{ + menu::{MenuBuilder, MenuItemBuilder}, + tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent}, +}; + +tauri::Builder::default() + .setup(|app| { + let toggle = MenuItemBuilder::with_id("toggle", "Toggle").build(app)?; + let menu = MenuBuilder::new(app).items(&[&toggle]).build()?; + let tray = TrayIconBuilder::new() + .menu(&menu) + .on_menu_event(move |app, event| match event.id().as_ref() { + "toggle" => { + println!("toggle clicked"); + } + _ => (), + }) + .on_tray_icon_event(|tray, event| { + if let TrayIconEvent::Click { + button: MouseButton::Left, + button_state: MouseButtonState::Up, + .. + } = event + { + let app = tray.app_handle(); + if let Some(webview_window) = app.get_webview_window("main") { + let _ = webview_window.show(); + let _ = webview_window.set_focus(); + } + } + }) + .build(app)?; + + Ok(()) + }) +``` + +### Updater 플러그인으로 마이그레이션 + +자동 업데이트 확인 기능이 있는 기본 제공 대화 상자(dialog)가 제거되었으며, 대신 Rust 및 JS API를 사용하여 업데이트를 확인하고 설치합니다. + +Rust `tauri::updater` 및 JavaScript `@tauri-apps/api-updater` API가 제거되었습니다. `@tauri-apps/plugin-updater` 플러그인을 사용하여 사용자 지정 업데이터 타겟을 설정하세요: + +1. cargo 의존성에 추가하세요: + +```toml +[dependencies] +tauri-plugin-updater = "2" +``` + +2. JavaScript 또는 Rust 프로젝트에서 사용하세요: + + + + +```rust +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_updater::Builder::new().build()) +} +``` + +```json +// package.json +{ + "dependencies": { + "@tauri-apps/plugin-updater": "^2.0.0" + } +} +``` + +```javascript +import { check } from '@tauri-apps/plugin-updater'; +import { relaunch } from '@tauri-apps/plugin-process'; + +const update = await check(); +if (update?.available) { + console.log(`Update to ${update.version} available! Date: ${update.date}`); + console.log(`Release notes: ${update.body}`); + await update.downloadAndInstall(); + // requires the `process` plugin + await relaunch(); +} +``` + + + + +업데이트 확인하기: + +```rust +use tauri_plugin_updater::UpdaterExt; + +fn main() { + tauri::Builder::default() + .plugin(tauri_plugin_updater::Builder::new().build()) + .setup(|app| { + let handle = app.handle(); + tauri::async_runtime::spawn(async move { + let response = handle.updater().check().await; + }); + Ok(()) + }) +} +``` + +사용자 지정 업데이터 타겟 설정하기: + +```rust +fn main() { + let mut updater = tauri_plugin_updater::Builder::new(); + #[cfg(target_os = "macos")] + { + updater = updater.target("darwin-universal"); + } + tauri::Builder::default() + .plugin(updater.build()) +} +``` + + + + +### Path를 Tauri Manager로 마이그레이션 + +Rust `tauri::api::path` 모듈 함수 및 `tauri::PathResolver`가 `tauri::Manager::path`로 이동되었습니다: + +```rust +use tauri::{path::BaseDirectory, Manager}; + +tauri::Builder::default() + .setup(|app| { + let home_dir_path = app.path().home_dir().expect("failed to get home dir"); + + let path = app.path().resolve("path/to/something", BaseDirectory::Config)?; + + Ok(()) + }) +``` + +### 새로운 Window API로 마이그레이션 + +Rust에서 `Window`는 `WebviewWindow`로 변경되었으며, `WindowBuilder`는 `WebviewWindowBuilder`로 이름이 변경되었고, `WindowUrl`은 `WebviewUrl`로 이름이 변경되었습니다. + +또한, `Manager::get_window` 함수는 `get_webview_window`로 변경되었고, +윈도우의 `parent_window` API는 `parent_raw`로 변경되어 고급 수준의 윈도우 부모 API를 지원합니다. + +JavaScript에서는 `WebviewWindow` 클래스가 이제 `@tauri-apps/api/webviewWindow` 경로에서 내보내집니다. + +`onMenuClicked` 함수가 제거되었으며, 대신 JavaScript에서 메뉴를 생성할 때 메뉴 이벤트를 가로챌 수 있습니다. + +### 임베딩된 추가 파일(리소스) 마이그레이션 + +JavaScript에서는 [File System 플러그인으로 마이그레이션](#file-system-플러그인으로-마이그레이션)을 확인하세요. +또한, [권한 마이그레이션](#권한-마이그레이션)에서 v1 허용 목록에 대한 변경 사항을 확인하세요. + +Rust에서는 [Path를 Tauri Manager로 마이그레이션](#path를-tauri-manager로-마이그레이션)을 확인하세요. + +### 임베딩된 외부 바이너리(Sidecar) 마이그레이션 + +Tauri v1에서는 외부 바이너리 및 인자가 허용 목록에 정의되었습니다. v2에서는 새로운 권한 시스템을 사용하세요. [권한 마이그레이션](#권한-마이그레이션)에서 자세한 내용을 확인하세요. + +JavaScript에서는 [Shell 플러그인으로 마이그레이션](#shell-플러그인으로-마이그레이션)을 확인하세요. + +Rust에서는 `tauri::api::process` API가 제거되었습니다. 대신 `tauri_plugin_shell::ShellExt` 및 `tauri_plugin_shell::process::CommandEvent` API를 사용하세요. [임베딩된 외부 바이너리](/ko/develop/sidecar/#running-it-from-rust) 가이드를 참고하세요. + +v2에서는 "process-command-api" 기능 플래그가 제거되었습니다. 따라서 외부 바이너리를 실행할 때 이 기능을 더이상 Tauri 설정에 정의할 필요가 없습니다. + +### 권한 마이그레이션 + +v1 허용 목록(allowlist)은 개별 플러그인에 대해 작동하고 다중 창 및 원격 URL 지원을 위해 훨씬 더 구성하기 쉬운 완전히 새로운 권한 시스템으로 재작성되었습니다. +이 새로운 시스템은 액세스 제어 목록(ACL)처럼 작동하여 명령을 허용하거나 거부하고, 특정 창 및 도메인 집합에 권한을 할당하고, 액세스 범위를 정의할 수 있습니다. + +앱에 대한 권한을 활성화하려면 `src-tauri/capabilities` 폴더에 기능 파일을 생성해야 하며, 그 외의 모든 권한은 Tauri가 자동으로 구성합니다. + +`migrate` CLI 명령어는 v1 허용 목록을 자동으로 분석하고 관련 기능 파일을 생성합니다. + +권한 및 기능에 대한 자세한 내용은 [보안 문서](/ko/security/)를 참고하세요. diff --git a/src/content/docs/ko/start/migrate/from-tauri-2-beta.mdx b/src/content/docs/ko/start/migrate/from-tauri-2-beta.mdx new file mode 100644 index 0000000000..a122cd3161 --- /dev/null +++ b/src/content/docs/ko/start/migrate/from-tauri-2-beta.mdx @@ -0,0 +1,152 @@ +--- +title: Tauri 2.0 베타에서 업그레이드 +i18nReady: false +sidebar: + order: 16 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import CommandTabs from '@components/CommandTabs.astro'; + +이 가이드는 Tauri 2.0 베타 애플리케이션을 Tauri 2.0 RC(Release Candidate)로 업그레이드하는 방법을 안내합니다. + +## 자동 마이그레이션 + +Tauri v2 CLI에는 대부분의 프로세스를 자동화하고 마이그레이션을 완료하는 데 도움이 되는 `migrate` 명령이 포함되어 있습니다. + + + +[CLI 레퍼런스](/ko/reference/cli/#migrate)에서 `migrate` 명령어에 대해 자세히 알아보세요. + +## 중요 변경 사항 + +베타 버전에서 RC 버전으로 전환하는 과정에서 몇 가지 중요한 변경 사항이 있었습니다. 이러한 변경 사항은 자동 마이그레이션(위 참조) 혹은 수동으로 수행할 수 있습니다. + +### Tauri 코어 플러그인 + +Tauri 내장 플러그인이 권한 설정에서 어떻게 처리되는지에 대해 [PR #10390](https://github.com/tauri-apps/tauri/pull/10390)에서 변경되었습니다. + +최신 베타 버전에서 마이그레이션하려면 권한 식별자에 `core:`를 붙이거나 `core:default` 권한으로 전환하고 이전 코어 플러그인 식별자를 제거해야 합니다. + +```json +... +"permissions": [ + "path:default", + "event:default", + "window:default", + "app:default", + "image:default", + "resources:default", + "menu:default", + "tray:default", +] +... +``` + +```json +... +"permissions": [ + "core:path:default", + "core:event:default", + "core:window:default", + "core:app:default", + "core:image:default", + "core:resources:default", + "core:menu:default", + "core:tray:default", +] +... +``` + +또한 모든 코어 플러그인의 기본 권한을 전부 포함하는 새로운 특수 `core:default` 권한 세트를 추가하여 권한 설정에서 불필요한 코드를 줄일 수 있습니다. + +```json +... +"permissions": [ + "core:default" +] +... +``` + +### 내장 개발 서버 + +내장 개발 서버의 네트워크 노출에 대해 [PR #10437](https://github.com/tauri-apps/tauri/pull/10437) 및 [PR #10456](https://github.com/tauri-apps/tauri/pull/10456)에서 변경되었습니다. + +내장 모바일 개발 서버는 더 이상 네트워크 전체를 노출하거나 로컬 머신에서 디바이스로 트래픽을 직접 터널링하지 않습니다. + +현재 이 개선 사항은 iOS 디바이스에서 실행할 때(직접 또는 Xcode에서) 자동으로 적용되지 않습니다. +이 경우 기본적으로 개발 서버에 공용 네트워크 주소를 사용하도록 설정되어 있지만, +Xcode를 열어 macOS 머신과 연결된 iOS 디바이스 간의 연결을 자동으로 시작하고, +`tauri ios dev --force-ip-prompt`를 실행하여 iOS 디바이스의 TUN 주소(**::2**로 끝남)를 선택하는 방법이 있습니다. + +실제 iOS 기기에서 실행하려는 경우 개발 서버 설정을 이 변경 사항에 맞게 조정해야 합니다. +이전에는 `TAURI_ENV_PLATFORM` 환경 변수가 `android` 또는 `ios`와 일치하는지 확인하는 것을 권장했습니다. +하지만 이제 iOS 디바이스를 사용하지 않는 경우 localhost에 연결할 수 있으므로 `TAURI_DEV_HOST` 환경 변수를 확인해야 합니다. +다음은 Vite 설정에 대한 마이그레이션 예시입니다: + +- 2.0.0-beta: + +```js +import { defineConfig } from 'vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; +import { internalIpV4Sync } from 'internal-ip'; + +const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM); + +export default defineConfig({ + plugins: [svelte()], + clearScreen: false, + server: { + host: mobile ? '0.0.0.0' : false, + port: 1420, + strictPort: true, + hmr: mobile + ? { + protocol: 'ws', + host: internalIpV4Sync(), + port: 1421, + } + : undefined, + }, +}); +``` + +- 2.0.0: + +```js +import { defineConfig } from 'vite'; +import Unocss from 'unocss/vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +const host = process.env.TAURI_DEV_HOST; + +export default defineConfig({ + plugins: [svelte()], + clearScreen: false, + server: { + host: host || false, + port: 1420, + strictPort: true, + hmr: host + ? { + protocol: 'ws', + host: host, + port: 1430, + } + : undefined, + }, +}); +``` + +:::note +`TAURI_DEV_HOST` 값을 직접 사용할 수 있으므로, `internal-ip` NPM 패키지는 더 이상 필요하지 않습니다. +::: diff --git a/src/content/docs/ko/start/migrate/index.mdx b/src/content/docs/ko/start/migrate/index.mdx new file mode 100644 index 0000000000..5b430f5b4a --- /dev/null +++ b/src/content/docs/ko/start/migrate/index.mdx @@ -0,0 +1,23 @@ +--- +title: 업그레이드 & 마이그레이션 +sidebar: + label: 둘러보기 + order: 10 +--- + +Tauri 1.0에서 업그레이드하거나 다른 프레임워크에서 마이그레이션하는 일반적인 시나리오와 단계에 대해 알아보세요. + +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + diff --git a/src/content/docs/ko/start/prerequisites.mdx b/src/content/docs/ko/start/prerequisites.mdx new file mode 100644 index 0000000000..03be5b7dfb --- /dev/null +++ b/src/content/docs/ko/start/prerequisites.mdx @@ -0,0 +1,386 @@ +--- +title: 요구사항 +i18nReady: true +sidebar: + order: 0 +--- + +import { Tabs, TabItem, Card } from '@astrojs/starlight/components'; + +Tauri를 사용하여 프로젝트를 시작하기 위해 몇 가지 의존성을 설치해야 합니다: + +1. [시스템 의존성](#시스템-의존성) +2. [Rust](#rust) +3. [모바일 타겟을 위한 설정](#모바일-타겟을-위한-설정) (모바일 개발을 할 때에 필요) + +## 시스템 의존성 + +사용하고 있는 각 운영 체제에 대해 시작 링크를 따라가세요: + +- [Linux](#linux) (특정 배포판에 대해 아래 내용 참고) +- [macOS Catalina (10.15) 혹은 이후 버전](#macos) +- [Windows 7 혹은 이후 버전](#windows) + +### Linux + +Tauri는 Linux에서 개발을 위한 다양한 시스템 의존성을 요구합니다. 이는 배포판에 따라 다를 수 있지만, 아래에서 일반적인 배포판에 대한 설정을 참고하세요. + +{/* Note: These are the officially supported linux distributions. */} +{/* If you wish to add another please open an issue to discuss prior to opening a PR */} + + + + +```sh +sudo apt update +sudo apt install libwebkit2gtk-4.1-dev \ + build-essential \ + curl \ + wget \ + file \ + libxdo-dev \ + libssl-dev \ + libayatana-appindicator3-dev \ + librsvg2-dev +``` + + + + +```sh +sudo pacman -Syu +sudo pacman -S --needed \ + webkit2gtk-4.1 \ + base-devel \ + curl \ + wget \ + file \ + openssl \ + appmenu-gtk-module \ + libappindicator-gtk3 \ + librsvg +``` + + + + +```sh +sudo dnf check-update +sudo dnf install webkit2gtk4.1-devel \ + openssl-devel \ + curl \ + wget \ + file \ + libappindicator-gtk3-devel \ + librsvg2-devel +sudo dnf group install "C Development Tools and Libraries" +``` + + + + +```sh +sudo emerge --ask \ + net-libs/webkit-gtk:4.1 \ + dev-libs/libappindicator \ + net-misc/curl \ + net-misc/wget \ + sys-apps/file +``` + + + + +```sh +sudo zypper up +sudo zypper in webkit2gtk3-devel \ + libopenssl-devel \ + curl \ + wget \ + file \ + libappindicator3-1 \ + librsvg-devel +sudo zypper in -t pattern devel_basis +``` + + + +```sh +sudo apk add \ + build-base \ + webkit2gtk \ + curl \ + wget \ + file \ + openssl \ + libayatana-appindicator-dev \ + librsvg +``` + + + +Using `nix-shell`: + +```sh +with import { }; +mkShell { + buildInputs = [ + at-spi2-atk + atkmm + cairo + gdk-pixbuf + glib + gobject-introspection + gobject-introspection.dev + gtk3 + harfbuzz + librsvg + libsoup_3 + pango + webkitgtk_4_1 + webkitgtk_4_1.dev + ]; + + PKG_CONFIG_PATH = "${glib.dev}/lib/pkgconfig:${libsoup_3.dev}/lib/pkgconfig:${webkitgtk_4_1.dev}/lib/pkgconfig:${at-spi2-atk.dev}/lib/pkgconfig:${gtk3.dev}/lib/pkgconfig:${gdk-pixbuf.dev}/lib/pkgconfig:${cairo.dev}/lib/pkgconfig:${pango.dev}/lib/pkgconfig:${harfbuzz.dev}/lib/pkgconfig"; +} +``` + + + + +만약 사용하고 있는 배포판이 위에 포함되지 않는다면, [Github의 Awesome Tauri](https://github.com/tauri-apps/awesome-tauri#guides)에서 가이드를 찾아보세요. + +다음 단계: [Rust 설치](#rust) + +### macOS + +Tauri는 [Xcode](https://developer.apple.com/xcode/resources/)와 다양한 macOS 및 iOS 개발 의존성을 사용합니다. + +아래의 링크에서 Xcode를 다운로드하고 설치하세요: + +- [Mac App Store](https://apps.apple.com/gb/app/xcode/id497799835?mt=12) +- [Apple Developer 웹사이트](https://developer.apple.com/xcode/resources/). + +Xcode를 설치 후 실행하여 설정을 완료하세요. + +
+데스크톱 환경을 대상으로만 개발하나요? +만약 iOS 개발을 하지 않는다면, 대신 Xcode Command Line Tools를 설치할 수 있습니다: + +```sh +xcode-select --install +``` + +
+ +다음 단계: [Rust 설치](#rust) + +### Windows + +Tauri는 개발을 위해 Microsoft C++ Build Tools와 Microsoft Edge WebView2를 사용합니다. 이 두 가지는 Windows에서의 개발을 위해 필요합니다. + +아래의 단계를 따라 필요한 의존성을 설치하세요. + +#### Microsoft C++ Build Tools + +1. [Microsoft C++ Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/) 설치 프로그램을 다운로드하고 설치를 시작하세요. +2. 설치 과정에서 "Desktop development with C++ (데스크톱 개발을 위한 C++)" 옵션을 확인하세요. + +![Visual Studio C++ Build Tools installer screenshot](@assets/start/prerequisites/visual-studio-build-tools-installer.png) + +다음 단계: [WebView2 설치](#webview2). + +#### WebView2 + +:::tip +WebView 2는 Windows 10 (버전 1803 이후) 및 이후 버전에 이미 설치되어 있습니다. 이 버전들 중 하나를 개발하고 있다면, 이 단계를 건너뛰고 [Rust 설치](#rust)로 넘어가세요. +::: + +Tauri는 Windows에서 Microsoft Edge WebView2를 사용하여 콘텐츠를 렌더링합니다. + +WebView2를 설치하려면 [WebView2 Runtime 다운로드 섹션](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section)을 방문하세요. "Evergreen Boostrapper"를 다운로드하고 설치하세요. + +다음 단계: [Rust 설치](#rust) + +## Rust + +Tauri는 [Rust](https://www.rust-lang.org)로 빌드되며, 개발을 위해 필요합니다. 아래의 방법 중 하나를 사용하여 Rust를 설치하세요. 더 많은 설치 방법은 [여기](https://www.rust-lang.org/tools/install)를 참고하세요. + + + + +[`rustup`](https://github.com/rust-lang/rustup)을 사용하여 설치하세요: + +```sh +curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh +``` + +:::tip[보안 팁] +저희는 이 bash 스크립트를 검증했고, 이 스크립트는 제대로 작동합니다. 하지만 무턱대고 스크립트를 실행하기 전에 항상 스크립트를 먼저 살펴보는 것이 현명합니다. + +여기에 평문 스크립트가 있습니다: [rustup.sh](https://sh.rustup.rs/) +::: + + + + +https://www.rust-lang.org/tools/install 에 방문하여 `rustup`를 설치하세요. + + + + +터미널을 재시작하여 변경 사항을 적용하세요. (때로는 시스템을 재시작해야 할 수도 있습니다.) + +다음 단계: Android 및 iOS를 대상으로 개발하고 싶다면 [모바일 타겟을 위한 설정](#모바일-타겟을-위한-설정) 혹은, JavaScript 프레임워크를 사용하고 싶다면 [Node.js 설치](#nodejs). 아니라면 [프로젝트 만들기](/ko/start/create-project/)를 살펴보세요. + +## Node.js + +:::note[JavaScript 생태계] +JavaScript 프론트엔드 프레임워크를 사용하고 싶다면 진행하세요. +::: + +1. [Node.js 웹사이트](https://nodejs.org)에 방문하여 LTS 버전을 다운로드하고 설치하세요. + +2. 설치가 성공적으로 완료되었는지 확인하려면 다음을 실행하세요: + +```sh +node -v +# v20.10.0 +npm -v +# 10.2.3 +``` + +터미널을 재시작하여 변경 사항을 적용하세요. (때로는 시스템을 재시작해야 할 수도 있습니다.) + +npm은 Node.js의 기본 패키지 관리자이지만, pnpm 또는 yarn과 같은 다른 패키지 관리자를 사용할 수도 있습니다. 이를 활성화하려면 터미널에서 `corepack enable`을 실행하세요. 이 단계는 npm을 제외한 패키지 관리자를 사용하고 싶을 때만 필요합니다. + +다음 단계: [모바일 타겟을 위한 설정](#모바일-타겟을-위한-설정) 혹은 [프로젝트 만들기](/ko/start/create-project/). + +## 모바일 타겟을 위한 설정 + +만약 앱을 Android 또는 iOS로 빌드하고 싶다면 몇 가지 추가 의존성을 설치해야 합니다: + +- [Android](#android) +- [iOS](#ios) + +### Android + +1. [Android Studio from the Android Developers 웹사이트](https://developer.android.com/studio)에서 Android Studio를 다운로드받고 설치하세요. +2. `JAVA_HOME` 환경 변수를 설정하세요: + +{/* TODO: Can this be done in the 4th step? */} + + + + +```sh +export JAVA_HOME=/opt/android-studio/jbr +``` + + + + +```sh +export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home" +``` + + + + +```ps +[System.Environment]::SetEnvironmentVariable("JAVA_HOME", "C:\Program Files\Android\Android Studio\jbr", "User") +``` + + + +3. Android Studio의 SDK 관리자를 사용하여 다음을 설치하세요: + +- Android SDK Platform +- Android SDK Platform-Tools +- NDK (Side by side) +- Android SDK Build-Tools +- Android SDK Command-line Tools + +SDK 관리자에서 "Show Package Details"를 선택하면 이전 버전의 패키지를 설치할 수 있습니다. 필요한 경우에만 이전 버전을 설치하세요. 이전 버전은 호환성 문제 또는 보안 위험을 일으킬 수 있습니다. + +4. `ANDROID_HOME` 및 `NDK_HOME` 환경 변수를 설정하세요. + + + + +```sh +export ANDROID_HOME="$HOME/Android/Sdk" +export NDK_HOME="$ANDROID_HOME/ndk/$(ls -1 $ANDROID_HOME/ndk)" +``` + + + + +```sh +export ANDROID_HOME="$HOME/Library/Android/sdk" +export NDK_HOME="$ANDROID_HOME/ndk/$(ls -1 $ANDROID_HOME/ndk)" +``` + + + + +```ps +[System.Environment]::SetEnvironmentVariable("ANDROID_HOME", "$env:LocalAppData\Android\Sdk", "User") +$VERSION = Get-ChildItem -Name "$env:LocalAppData\Android\Sdk\ndk" +[System.Environment]::SetEnvironmentVariable("NDK_HOME", "$env:LocalAppData\Android\Sdk\ndk\$VERSION", "User") +``` + +:::tip +PowerShell은 재부팅 또는 로그아웃 후에 새로운 환경 변수를 인식합니다. 하지만 현재 세션을 새로 고칠 수 있습니다: + +````ps +[System.Environment]::GetEnvironmentVariables("User").GetEnumerator() | % { Set-Item -Path "Env:\$($_.key)" -Value $_.value }\ +::: + + + + + +5. `rustup`을 사용하여 Android 타겟을 추가하세요: + +```sh +rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android +```` + +다음 단계: [iOS 설정](#ios) 혹은 [프로젝트 만들기](/ko/start/create-project/). + +### iOS + +:::caution[macOS 전용] +iOS 개발은 Xcode를 필요로 하며, macOS에서만 가능합니다. [macOS 시스템 의존성 섹션](#macos)에서 안내한 Xcode Command Line Tools가 아닌 Xcode를 설치하여야 합니다. +::: + +1. `rustup`을 사용하여 iOS 타겟을 추가하세요: + +```sh +rustup target add aarch64-apple-ios x86_64-apple-ios aarch64-apple-ios-sim +``` + +2. [Homebrew](https://brew.sh)를 설치하세요: + +```sh +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +``` + +3. Homebrew를 사용하여 [Cocoapods](https://cocoapods.org)를 설치하세요: + +```sh +brew install cocoapods +``` + +다음 단계: [프로젝트 만들기](/ko/start/create-project/). + +## 문제 해결 + +설치 과정에서 문제가 발생하면 [문제 해결 가이드](/ko/develop/debug/)를 확인하세요. 혹은 [Tauri Discord](https://discord.com/invite/tauri)에 문의하세요. + + + +이제 모든 요구 사항을 설치했으므로 [첫 번째 Tauri 프로젝트 만들기](/ko/start/create-project/)를 진행하세요! + +