\n \n

Welcome to our app

This content is automatically translated

\n );\n}\n\nexport default App;\n```\n\n## 6단계. 빌드 및 테스트\n\n개발 서버를 시작하세요:\n\n```bash\nnpm run dev\n```\n\n컴파일러는 자동으로 다음을 수행합니다:\n\n1. React 컴포넌트에서 번역 가능한 콘텐츠 스캔\n2. 번역 키 추출\n3. AI 기반 번역 생성\n4. `lingo/` 디렉토리에 최적화된 번역 파일 생성\n\n`http://localhost:5173`에 접속하여 다국어 앱이 작동하는 것을 확인하세요.\n\n## 구성 옵션\n\n컴파일러 동작을 사용자 정의할 수 있습니다:\n\n```ts\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\", \"ja\"],\n lingoDir: \"lingo\",\n debug: false,\n })(viteConfig),\n);\n```\n\n## 개발 기능\n\n### 핫 모듈 교체(HMR)\n\n컴파일러는 번역 업데이트를 위한 Vite의 HMR을 지원합니다:\n\n```tsx\n// src/components/Welcome.tsx\nexport function Welcome() {\n return (\n

Welcome to our app

Edit this text and see translations update automatically

\n );\n}\n```\n\n### 빌드 최적화\n\nVite의 빌드 최적화는 컴파일러와 원활하게 작동합니다:\n\n- **코드 분할**은 번역 번들을 포함합니다\n- **자산 최적화**는 번역 파일을 효율적으로 처리합니다\n- **트리 쉐이킹**은 사용되지 않는 번역을 제거합니다\n\n## 예제 프로젝트 구조\n\n```\nmy-vite-app/\n├── src/\n│ ├── components/\n│ │ └── Welcome.tsx\n│ ├── App.tsx\n│ ├── main.tsx\n│ └── lingo/ # 생성된 번역 파일\n│ ├── meta.json\n│ └── dictionary.js\n├── vite.config.ts\n├── package.json\n└── .env\n```\n\n## 프로덕션 배포\n\n1. **애플리케이션 빌드**:\n\n ```bash\n npm run build\n ```\n\n2. **번역 파일 커밋**:\n\n ```bash\n git add src/lingo/\n git commit -m \"Add translations\"\n ```\n\n3. **선호하는 플랫폼(Vercel, Netlify 등)을 사용하여 배포**\n\nVite 앱은 사용자 환경 설정에 따라 자동으로 현지화된 콘텐츠를 제공합니다.\n\n## 문제 해결\n\n### 일반적인 문제\n\n**번역이 생성되지 않음**: `.env` 파일에 `GROQ_API_KEY`가 올바르게 설정되어 있는지 확인하세요.\n\n**빌드 오류**: `lingo/` 디렉토리가 버전 관리에 포함되어 있는지 확인하세요.\n\n**HMR이 작동하지 않음**: 새로운 번역 가능한 콘텐츠를 추가한 후 개발 서버를 재시작하세요.\n\n## 다음 단계\n\n- **고급 구성**: [커스터마이제이션 옵션](../configuration/advanced)\n- **FAQ**: [일반적인 질문 및 문제 해결](../guides/faq)\n- **작동 방식**: [빌드 프로세스 이해하기](../how-it-works)\n","content","\n**Lingo.dev 컴파일러**는 Vite와 직접 통합되어 React 애플리케이션에 빌드 타임 현지화를 제공합니다.\n\nVite + React 애플리케이션에 다국어 지원을 추가하려면 다음 단계를 따르세요.\n\n또는 [Vite 데모 프로젝트](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project)를 살펴보고 컴파일러를 실제로 사용해 보세요.\n\n## 사전 요구사항\n\n- **Vite 4+**\n- **React 18+**\n- Node.js 18 이상\n\n## 1단계. 패키지 설치\n\n**lingo.dev** 패키지를 설치하세요:\n\n```bash\nnpm install lingo.dev\n```\n\n## 2단계. Vite 구성\n\n컴파일러를 `vite.config.ts`에 가져오고 구성하세요:\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nconst viteConfig = {\n plugins: [react()],\n // 기존 Vite 구성\n};\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n })(viteConfig),\n);\n```\n\n## 3단계. 인증 설정\n\n**Lingo.dev 컴파일러**는 콘텐츠를 AI 번역 엔진으로 전송하여 현지화하므로 먼저 인증이 필요합니다.\n\n### 옵션 1. Lingo.dev 엔진\n\nLingo.dev 컴파일러는 AI 번역 엔진으로 **Lingo.dev 엔진**을 사용할 수 있습니다. 이는 동적 모델 선택, 자동 라우팅, 번역 메모리 및 용어집 지원을 제공합니다. 무료 및 유료 옵션이 제공됩니다.\n\n인증하려면 다음을 실행하세요:\n\n```bash\nnpx lingo.dev@latest login\n```\n\n브라우저 흐름에 문제가 있는 경우 `.env`에 `LINGODOTDEV_API_KEY`를 수동으로 추가할 수 있습니다:\n\n```bash\n\n# .env\n\nLINGODOTDEV_API_KEY=...\n```\n\nLingo.dev 엔진 프로젝트 설정에서 토큰을 찾을 수 있습니다.\n\n### 옵션 2. 대체 LLM 제공업체\n\n또는 지원되는 LLM 제공업체의 모델을 사용할 수 있습니다:\n\n- [GROQ](https://groq.com/)\n- [Google AI](https://aistudio.google.com/)\n- [OpenRouter](https://openrouter.ai/)\n- [Ollama](https://ollama.com/)\n\nAPI 키를 `.env`에 추가하세요:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\n```\n\n**참고:** 컴파일러에서 사용하기 전에 LLM 제공업체에서 계정을 활성화하고 서비스 약관에 동의해야 합니다.\n\n## 4단계. 제공자 추가\n\n메인 진입점 파일(`src/main.tsx`)에 제공자를 가져옵니다:\n\n```tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport { LingoProviderWrapper, loadDictionary } from \"lingo.dev/react/client\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n \n loadDictionary(locale)}>\n \n \n ,\n);\n```\n\n## 5단계. 선택 사항: 로케일 전환기 추가\n\n앱 또는 헤더에 언어 전환기 컴포넌트를 생성합니다:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nfunction App() {\n return (\n

\n \n

Welcome to our app

This content is automatically translated

Welcome to our app

Edit this text and see translations update automatically

Vite 통합