VuePress - Lingo.dev CLI

VuePress란 무엇인가요?

VuePress는 문서 사이트 생성을 위한 Vue 기반 정적 사이트 생성기입니다. 기술 문서에 최적화된 테마와 Vue 컴포넌트 통합 기능을 제공합니다.

Lingo.dev CLI란 무엇인가요?

Lingo.dev는 AI 기반 번역 플랫폼입니다. Lingo.dev CLI는 소스 파일을 읽고, 번역 가능한 콘텐츠를 대규모 언어 모델로 전송한 다음, 번역된 파일을 프로젝트에 다시 작성합니다.

이 가이드에 대하여

이 가이드는 VuePress 문서 사이트에서 Lingo.dev CLI를 설정하는 방법을 설명합니다. VuePress로 프로젝트를 구성하고, 번역 파이프라인을 구성하며, 결과를 확인하는 방법을 배우게 됩니다.

1단계. VuePress 프로젝트 설정하기

새 VuePress 프로젝트 생성:
```
npm create vuepress@latest my-docs
```
프로젝트 디렉토리로 이동:
```
cd my-docs
```
의존성 설치:
```
npm install
```

2단계. 소스 콘텐츠 생성하기

소스 로케일의 문서를 저장할 디렉토리 생성:
```
mkdir docs/en
```

문서 콘텐츠가 포함된 파일 생성(예: docs/en/README.md):

---
home: true
title: Home
heroText: VuePress Documentation
tagline: Documentation powered by VuePress
---

## 시작하기

이 문서는 Lingo.dev에 의해 자동으로 번역됩니다.

## 기능

저희 제품은 현대적인 개발을 위한 강력한 기능을 포함하고 있습니다.

3단계. 심볼릭 링크 설정하기

VuePress는 소스 로케일 콘텐츠를 루트 docs 디렉토리에, 대상 로케일 콘텐츠를 하위 디렉토리에 배치하도록 예상하지만, Lingo.dev CLI는 이러한 조합을 지원하지 않습니다.

해결책으로 다음을 권장합니다:

소스 콘텐츠 파일을 로케일 디렉토리에 저장(예: docs/en/)
파일이 루트 docs 디렉토리에도 나타나도록 심볼릭 링크 생성

이 프로세스를 간소화하려면:

심볼릭 링크를 생성하는 스크립트 작성(예: scripts/symlinks.sh):

for file in docs/en/*; do ln -sf "en/$(basename "$file")" "docs/$(basename "$file")"; done

스크립트를 실행 가능하게 만들기:
```
chmod +x scripts/symlinks.sh
```
스크립트 실행:
```
./scripts/symlinks.sh
```

docs/en/ 디렉토리에 파일을 추가할 때마다 스크립트를 다시 실행해야 합니다.

4단계. CLI 구성하기

프로젝트 루트에 i18n.json 파일을 생성하세요:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "markdown": {
      "include": ["docs/[locale]/*.md", "docs/[locale]/*/*.md"]
    }
  }
}

이 파일은 다음을 정의합니다:

Lingo.dev CLI가 번역해야 할 파일
번역할 언어 간의 관계

이 경우, 구성은 마크다운 파일을 영어에서 스페인어로 번역합니다.

다음 사항에 주의하는 것이 중요합니다:

[locale]은 런타임에 대체되는 플레이스홀더입니다. 이는 콘텐츠가 한 위치(예: docs/en/README.md)에서 읽혀 다른 위치(예: docs/es/README.md)에 쓰여지도록 보장합니다.
Lingo.dev CLI는 재귀적 글로브 패턴(예: **/*.md)을 지원하지 않습니다. 중첩된 디렉토리 내에 존재하는 파일을 번역하려면 추가적인 include 패턴을 생성해야 합니다.

자세한 내용은 i18n.json 구성을 참조하세요.

5단계. 콘텐츠 번역하기

Lingo.dev 계정에 가입하세요.
CLI를 통해 Lingo.dev에 로그인하세요:
```
npx lingo.dev@latest login
```
번역 파이프라인을 실행하세요:
```
npx lingo.dev@latest run
```
CLI는 번역된 콘텐츠를 저장하기 위한 docs/es/ 디렉토리와 번역된 항목을 추적하기 위한 i18n.lock 파일(불필요한 재번역을 방지하기 위함)을 생성합니다.

6단계. 번역 사용하기

docs/.vuepress/config.js 파일에서:

테마 구성에 locales 속성을 추가하세요:

theme: defaultTheme({
  locales: {
    "/": {
      selectLanguageName: "English",
    },
    "/es/": {
      selectLanguageName: "Español",
    },
  },
}),

각 로케일에 대한 언어 구성을 정의하기 위해 루트 레벨 locales 속성을 추가하세요:

{
  locales: {
    "/": {
      lang: "en",
      title: "VuePress",
    },
    "/es/": {
      lang: "es",
      title: "VuePress",
    },
  },
}

개발 서버를 시작하세요:
```
npm run docs:dev
```
http://localhost:8080으로 이동하세요. 언어 전환을 위한 드롭다운이 표시되어야 합니다.