diff --git a/docs/.vitepress/config/ko.ts b/docs/.vitepress/config/ko.ts index e7f1936e..fa6ad011 100644 --- a/docs/.vitepress/config/ko.ts +++ b/docs/.vitepress/config/ko.ts @@ -18,7 +18,7 @@ export const ko = defineConfig({ editLink: { pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', - text: 'GitHub에서 이 페이지를 편집하세요' + text: '이 페이지 편집 제안하기' }, footer: { @@ -32,7 +32,7 @@ export const ko = defineConfig({ }, outline: { - label: '이 페이지에서' + label: '이 페이지 목차', }, lastUpdated: { @@ -131,15 +131,15 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { collapsed: false, items: [ { - text: '맞춤 테마 사용', + text: '커스텀 테마 사용하기', link: 'custom-theme' }, { - text: '기본 테마 확장', + text: '기본 테마 확장하기', link: 'extending-default-theme' }, { - text: '빌드할 때 데이터 로딩', + text: '빌드할 때 데이터 로딩하기', link: 'data-loading' }, { @@ -147,7 +147,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { link: 'ssr-compat' }, { - text: 'CMS 연결', + text: 'CMS 연결하기', link: 'cms' } ] diff --git a/docs/ko/guide/cms.md b/docs/ko/guide/cms.md index 9d0042b7..712c2402 100644 --- a/docs/ko/guide/cms.md +++ b/docs/ko/guide/cms.md @@ -53,4 +53,4 @@ VitePress를 CMS에 연결하는 것은 주로 [동적 라우트](./routing#dyna ## 통합 가이드 {#integration-guides} -VitePress를 특정 CMS와 통합하는 방법에 대한 가이드를 작성한 경우 아래의 "GitHub에서 이 페이지를 편집하세요" 링크를 클릭하여 여기에 제출하세요! +VitePress를 특정 CMS와 통합하는 방법에 대한 가이드를 작성한 경우 아래의 "이 페이지 편집 제안하기" 링크를 클릭하여 여기에 제출하세요! diff --git a/docs/ko/guide/custom-theme.md b/docs/ko/guide/custom-theme.md index 0c0fe683..6b319b4e 100644 --- a/docs/ko/guide/custom-theme.md +++ b/docs/ko/guide/custom-theme.md @@ -1,8 +1,8 @@ -# 사용자 정의 테마 사용하기 {#using-a-custom-theme} +# 커스텀 테마 사용하기 {#using-a-custom-theme} -## 테마 해결 {#theme-resolving} +## 테마 사용법 {#theme-resolving} -`.vitepress/theme/index.js` 또는 `.vitepress/theme/index.ts` 파일(“테마 엔트리 파일”)을 생성하여 사용자 정의 테마를 활성화할 수 있습니다: +`.vitepress/theme/index.js` 또는 `.vitepress/theme/index.ts` 파일("테마 엔트리 파일")을 생성하여 커스텀 테마를 활성화할 수 있습니다: ``` . @@ -10,50 +10,50 @@ │ ├─ .vitepress │ │ ├─ theme │ │ │ └─ index.js # 테마 엔트리 -│ │ └─ config.js # 설정 파일 +│ │ └─ config.js # 구성 파일 │ └─ index.md └─ package.json ``` -VitePress는 테마 엔트리 파일의 존재를 감지하면 기본 테마 대신 항상 사용자 정의 테마를 사용합니다. 하지만 [기본 테마를 확장하여](./extending-default-theme) 그 위에 고급 사용자 정의를 수행할 수 있습니다. +VitePress는 테마 엔트리 파일이 존재를 감지하면 기본 테마 대신 커스텀 테마를 사용합니다. 아니면 [기본 테마 확장하기](./extending-default-theme)를 통해 이를 기반으로 고급 커스터마이징을 수행할 수 있습니다. ## 테마 인터페이스 {#theme-interface} -VitePress 사용자 정의 테마는 다음 인터페이스를 가진 객체로 정의됩니다: +VitePress 커스텀 테마는 아래와 같은 인터페이스 객체로 정의됩니다: ```ts interface Theme { /** * 모든 페이지의 루트 레이아웃 컴포넌트 - * @필수 + * @required */ Layout: Component /** - * Vue 앱 인스턴스 개선 - * @선택적 + * Vue 애플리케이션 인스턴스 추가조작 (의역: "enhance → 추가조작") + * @optional */ enhanceApp?: (ctx: EnhanceAppContext) => Awaitable /** - * 다른 테마 확장, 우리의 `enhanceApp` 전에 호출 - * @선택적 + * 현재 `enhanceApp`를 호출하기 전, 다른 테마를 먼저 확장 + * @optional */ extends?: Theme } interface EnhanceAppContext { - app: App // Vue 앱 인스턴스 + app: App // Vue 애플리케이션 인스턴스 router: Router // VitePress 라우터 인스턴스 siteData: Ref // 사이트 수준 메타데이터 } ``` -테마 엔트리 파일은 테마를 기본으로 내보내야 합니다: +테마 엔트리 파일은 테마(Theme 객체)를 "export default" 해야 합니다: ```js // .vitepress/theme/index.js -// 테마 엔트리에서 Vue 파일을 직접 가져올 수 있습니다 -// VitePress는 @vitejs/plugin-vue로 미리 설정되어 있습니다. +// 테마 엔트리에서 Vue 파일을 직접 "import" 할 수 있습니다. +// VitePress는 @vitejs/plugin-vue가 사전 구성되어 있습니다. import Layout from './Layout.vue' export default { @@ -64,25 +64,25 @@ export default { } ``` -기본 내보내기는 사용자 정의 테마에 대한 유일한 계약이며, `Layout` 속성만 필수입니다. 기술적으로, VitePress 테마는 단일 Vue 컴포넌트만큼 간단할 수 있습니다. +"export default"는 커스텀 테마를 설정하는 유일한 방법이며, `Layout` 프로퍼티만 필수입니다. 따라서 기술적으로 VitePress 테마는 단일 Vue 컴포넌트처럼 간단할 수 있습니다. -레이아웃 컴포넌트 내부에서는 평소처럼 Vite + Vue 3 애플리케이션처럼 작동합니다. 테마도 [SSR-호환성이](./ssr-compat) 있어야 합니다. +레이아웃 컴포넌트 내부에서는 일반적인 Vite + Vue 3 애플리케이션처럼 동작합니다. 또한 테마가 [SSR 호환](./ssr-compat)이 되어야 합니다. ## 레이아웃 만들기 {#building-a-layout} -가장 기본적인 레이아웃 컴포넌트는 [``](../reference/runtime-api#content) 컴포넌트를 포함해야 합니다: +가장 기본적인 레이아웃 컴포넌트는 [``](../reference/runtime-api#content) 컴포넌트가 포함되어야 합니다: ```vue ``` -위의 레이아웃은 각 페이지의 마크다운을 HTML로 단순히 렌더링합니다. 우리가 추가할 수 있는 첫 번째 개선 사항은 404 오류를 처리하는 것입니다: +위의 레이아웃은 각 페이지의 마크다운을 HTML로 렌더링합니다. 첫 번째로 개선 사항은 404 에러를 처리하는 것입니다: ```vue{1-4,9-12} ``` -[`useData()`](../reference/runtime-api#usedata) 헬퍼는 우리가 필요로 하는 모든 런타임 데이터를 제공하여, 다른 레이아웃을 조건부로 렌더링할 수 있습니다. 우리가 접근할 수 있는 또 다른 데이터는 현재 페이지의 프론트매터입니다. 이를 활용하여 사용자가 각 페이지의 레이아웃을 제어할 수 있도록 합니다. 예를 들어, 사용자는 특별한 홈페이지 레이아웃을 사용해야 한다고 지정할 수 있습니다: +[`useData()`](../reference/runtime-api#usedata) 헬퍼는 다양한 레이아웃을 조건부로 렌더링하는 데 필요한 모든 런타임 데이터를 제공합니다. 접근할 수 있는 다른 데이터 중 하나는 현재 페이지의 전문(front-matter)입니다. 이를 활용하여 각 페이지에 맞게 레이아웃을 제어할 수 있습니다. 예를 들어 특정 페이지에서 홈 페이지 레이아웃을 사용하도록 지정할 수 있습니다: ```md --- @@ -108,7 +108,7 @@ layout: home --- ``` -그리고 우리는 이를 처리하기 위해 테마를 조정할 수 있습니다: +그리고 이를 처리하도록 테마를 조정할 수 있습니다: ```vue{3,12-14} ``` -물론, 레이아웃을 더 많은 컴포넌트로 나눌 수 있습니다: +물론 레이아웃을 더 많은 컴포넌트로 나눌 수 있습니다: ```vue{3-5,12-15} ``` -테마 컴포넌트에서 사용할 수 있는 모든 것에 대한 [런타임 API 참조](../reference/runtime-api)를 참조하세요. 또한, [빌드할 때 데이터 로딩](./data-loading)을 활용하여 데이터 기반 레이아웃을 생성할 수 있습니다 - 예를 들어, 현재 프로젝트 내 모든 블로그 포스트를 나열하는 페이지 등. +테마 컴포넌트에서 사용할 수 있는 모든 항목에 대해서는 [런타임 API 레퍼런스](../reference/runtime-api)를 참고하세요. 또한 [빌드할 때 데이터 로딩하기](./data-loading)를 활용하여 데이터 기반의 레이아웃을 생성할 수 있습니다. 예를 들어 현재 프로젝트의 모든 블로그 게시물을 나열하는 페이지를 만들 수 있습니다. ## 사용자 정의 테마 배포하기 {#distributing-a-custom-theme} -사용자 정의 테마를 배포하는 가장 쉬운 방법은 [GitHub에서 템플릿 저장소로 제공하는 것입니다](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository). +커스텀 테마를 배포하는 가장 쉬운 방법은 [GitHub 템플릿 리포지토리](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository)로 제공하는 것입니다. -npm 패키지로 테마를 배포하려면 다음 단계를 따르세요: +테마를 npm 패키지로 배포하려면 다음 단계를 따라야 합니다: -1. 패키지 엔트리에서 테마 객체를 기본 내보내기로 내보냅니다. +1. 패키지 엔트리에서 테마 객체를 "export default" 합니다. -2. 적용된다면, 테마 설정 타입 정의를 `ThemeConfig`로 내보냅니다. +2. 해당되는 경우, 테마 구성 타입 정의를 `ThemeConfig`로 "export" 합니다. -3. 테마가 VitePress 설정을 조정해야 하는 경우, 사용자가 확장할 수 있도록 패키지 하위 경로(예: `my-theme/config`)에 해당 설정을 내보냅니다. +3. 테마에서 VitePress 구성을 조정해야 하는 경우, 사용자가 확장할 수 있도록 패키지 하위 경로(예: `my-theme/config`)에 해당 구성을 "export" 합니다. -4. 설정 파일 및 프론트매터를 통한 테마 설정 옵션을 문서화합니다. +4. 테마 구성 옵션을 문서화합니다 (구성 파일과 전문 둘 다). -5. 테마를 소비하는 방법에 대한 명확한 지침을 제공합니다(아래 참조). +5. 테마를 사용하는 방법에 대한 명확한 지침을 제공합니다 (아래 참조). -## 사용자 정의 테마 소비하기 {#consuming-a-custom-theme} +## 커스텀 테마 사용하기 {#consuming-a-custom-theme} -외부 테마를 소비하려면 사용자 정의 테마 엔트리에서 가져와서 다시 내보냅니다: +외부 테마를 사용하려면, 커스텀 테마 엔트리에서 테마를 "import" 후 다시 "export"합니다: ```js // .vitepress/theme/index.js @@ -193,19 +193,19 @@ export default { } ``` -테마가 특별한 VitePress 설정을 요구하는 경우, 자신의 설정에서도 그 설정을 확장해야 합니다: +테마가 특별한 VitePress 구성을 요구하는 경우, 해당 구성을 (외부 커스텀 테마를 사용하는 자신의) 구성 파일에서도 확장해야 합니다: ```ts // .vitepress/config.ts import baseConfig from 'awesome-vitepress-theme/config' export default { - // 필요한 경우 테마 기본 설정 확장 + // 필요한 경우 테마 기본 구성 확장 extends: baseConfig } ``` -마지막으로, 테마가 테마 설정에 대한 타입을 제공하는 경우: +마지막으로 테마가 테마 구성에 대한 타입을 제공하는 경우: ```ts // .vitepress/config.ts diff --git a/docs/ko/guide/data-loading.md b/docs/ko/guide/data-loading.md index fb61c48f..c95b57be 100644 --- a/docs/ko/guide/data-loading.md +++ b/docs/ko/guide/data-loading.md @@ -1,12 +1,12 @@ -# 빌드할 때 데이터 로딩 {#build-time-data-loading} +# 빌드할 때 데이터 로딩하기 {#build-time-data-loading} -VitePress는 **데이터 로더**라고 불리는 기능을 제공하여 임의의 데이터를 로드하고 페이지나 컴포넌트에서 가져올 수 있습니다. 데이터 로딩은 **빌드 시간에만 실행**됩니다: 결과적으로 생성된 데이터는 최종 자바스크립트 번들에 JSON으로 직렬화됩니다. +VitePress는 페이지나 컴포넌트에서 임의의 데이터를 로드하고 이를 가져올 수 있는 **데이터 로더** 기능을 제공합니다. 데이터 로딩은 **빌드할 때에만** 실행되며, 결과적으로 생성된 데이터는 최종 JavaScript 번들에 JSON으로 직렬화됩니다. -데이터 로더는 원격 데이터를 가져오거나 로컬 파일을 기반으로 메타데이터를 생성하는 데 사용할 수 있습니다. 예를 들어, 모든 로컬 API 페이지를 파싱하고 모든 API 항목의 색인을 자동으로 생성하기 위해 데이터 로더를 사용할 수 있습니다. +데이터 로더는 원격 데이터를 가져오거나 로컬 파일을 기반으로 메타데이터를 생성하는 데 사용할 수 있습니다. 예를 들어, 데이터 로더를 사용하여 모든 로컬 API 페이지를 파싱하고 모든 API 항목의 색인을 자동으로 생성할 수 있습니다. ## 기본 사용법 {#basic-usage} -데이터 로더 파일은 `.data.js` 또는 `.data.ts`로 끝나야 합니다. 이 파일은 `load()` 메서드를 가진 객체를 기본 내보내기해야 합니다: +데이터 로더 파일은 반드시 `.data.js` 또는 `.data.ts`로 끝나야 합니다. 이 파일은 `load()` 메서드를 가진 객체를 "export default" 해야 합니다: ```js // example.data.js @@ -19,9 +19,9 @@ export default { } ``` -로더 모듈은 Node.js에서만 평가되므로, 필요에 따라 Node API와 npm 종속성을 가져올 수 있습니다. +로더 모듈은 Node.js에서만 평가되므로, 필요한 경우 Node API와 npm 종속성을 "import" 할 수 있습니다. -이 파일에서 데이터를 `.md` 페이지와 `.vue` 컴포넌트에서 `data`라는 이름으로 내보낼 수 있습니다: +그런 다음 `.md` 페이지와 `.vue` 컴포넌트에서 `data`라는 이름으로 "export" 한 데이터를 이 파일에서 "import" 할 수 있습니다: ```vue