diff --git a/docs/.vitepress/config/ko.ts b/docs/.vitepress/config/ko.ts
index 44f7b4462a2e..004cb9ee7455 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: {
@@ -105,7 +105,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
collapsed: false,
items: [
{
- text: '마크다운 확장',
+ text: '마크다운 확장 기능',
link: 'markdown'
},
{
@@ -113,33 +113,33 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
link: 'asset-handling'
},
{
- text: '프론트마터',
+ text: '전문(Front-matter)',
link: 'frontmatter'
},
{
- text: '마크다운에서 Vue 사용',
+ text: '마크다운에서 Vue 사용하기',
link: 'using-vue'
},
{
- text: '국제화',
+ text: 'i18n',
link: 'i18n'
}
]
},
{
- text: '사용자 정의',
+ text: '커스텀',
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'
}
]
@@ -167,7 +167,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
]
},
{
- text: '설정 & API 참조',
+ text: '구성 & API 레퍼런스',
base: '/ko/reference/',
link: 'site-config'
}
diff --git a/docs/ko/guide/asset-handling.md b/docs/ko/guide/asset-handling.md
index 0054397cf97f..5f6a35d113a5 100644
--- a/docs/ko/guide/asset-handling.md
+++ b/docs/ko/guide/asset-handling.md
@@ -1,54 +1,54 @@
-# 자산 처리 {#asset-handling}
+# 에셋 핸들링 {#asset-handling}
-## 정적 자산 참조하기 {#referencing-static-assets}
+## 정적 에셋 참조하기 {#referencing-static-assets}
-모든 Markdown 파일은 Vue 컴포넌트로 컴파일되며 [Vite](https://vitejs.dev/ko/guide/assets.html)에 의해 처리됩니다. 상대 URL을 사용하여 어떠한 자산도 참조할 수 **있으며 해야 합니다**:
+모든 마크다운 파일은 Vue 컴포넌트로 컴파일되어 [Vite](https://vitejs.dev/guide/assets.html)에 의해 처리됩니다. 모든 에셋은 상대 URL을 사용하여 참조할 수 있으며, **참조해야 합니다**:
```md
![이미지](./image.png)
```
-Markdown 파일, 테마의 `*.vue` 컴포넌트, 스타일 및 일반 `.css` 파일에서 정적 자산을 참조할 수 있으며, 절대 공개 경로(프로젝트 루트를 기준으로 함) 또는 상대 경로(파일 시스템을 기준으로 함)를 사용할 수 있습니다. 후자는 Vite, Vue CLI 또는 webpack의 `file-loader`를 사용해 본 적이 있다면 익숙한 동작 방식과 유사합니다.
+마크다운 파일에서 정적 에셋을 참조할 수 있으며, 테마 내의 `*.vue` 컴포넌트, 스타일 및 일반 `.css` 파일을 절대 경로(프로젝트 루트를 기준으로) 또는 상대 경로(파일 시스템을 기준으로)를 사용하여 참조할 수 있습니다. 후자는 Vite, Vue CLI 또는 webpack의 `file-loader` 동작과 유사합니다.
-일반적인 이미지, 미디어, 폰트 파일 유형은 자동으로 자산으로 감지되어 포함됩니다.
+일반적인 이미지, 미디어 및 글꼴 파일 형식은 자동으로 에셋으로 감지되어 포함됩니다.
-::: tip 링크된 파일은 자산으로 취급되지 않음
-Markdown 파일 내의 링크로 참조된 PDF 또는 기타 문서는 자동으로 자산으로 취급되지 않습니다. 링크된 파일을 접근 가능하게 만들기 위해서는 수동으로 해당 파일을 프로젝트의 [`public`](#the-public-directory) 디렉토리에 배치해야 합니다.
+::: tip 링크를 통해 참조된 파일은 에셋으로 처리되지 않습니다
+마크다운 파일 내에서 링크로 참조된 PDF 또는 기타 문서는 자동으로 에셋으로 처리되지 않습니다. 링크된 파일을 접근 가능하게 하려면 프로젝트의 [`public`](#the-public-directory) 디렉토리에 수동으로 배치해야 합니다.
:::
-절대 경로를 포함한 모든 참조된 자산은 생산 빌드에서 해시된 파일 이름으로 출력 디렉토리에 복사됩니다. 참조되지 않은 자산은 복사되지 않습니다. 4kb보다 작은 이미지 자산은 base64 인라인으로 처리됩니다 - 이는 [`vite`](../reference/site-config#vite) 구성 옵션을 통해 설정할 수 있습니다.
+절대 경로를 사용하는 에셋을 포함하여 모든 참조된 에셋은 프로덕션 빌드에서 해시된 파일 이름으로 출력 디렉토리에 복사됩니다. 참조되지 않은 에셋은 복사되지 않습니다. 4kb보다 작은 이미지 에셋은 base64로 인라인됩니다. 이는 [`vite`](../reference/site-config#vite) 구성 옵션을 통해 구성할 수 있습니다.
-모든 **정적** 경로 참조, 절대 경로를 포함하여, 작업 디렉토리 구조를 기반으로 해야 합니다.
+모든 **정적** 경로 참조는 절대 경로를 포함하여 작업 디렉토리 구조를 기반으로 해야 합니다.
-## Public 디렉토리 {#the-public-directory}
+## Public 디렉터리 {#the-public-directory}
-Markdown이나 테마 컴포넌트에서 직접 참조되지 않은 정적 자산을 제공할 필요가 있거나, 특정 파일을 원본 파일명으로 제공하고 싶은 경우가 있을 수 있습니다. 이러한 파일의 예로는 `robots.txt`, 파비콘, PWA 아이콘이 있습니다.
+때때로 마크다운이나 테마 컴포넌트에서 직접 참조되지 않는 정적 에셋을 제공해야 하거나 특정 파일을 원래 파일 이름으로 제공하고 싶을 때가 있습니다. 이러한 파일의 예로는 `robots.txt`, 파비콘, PWA 아이콘 등이 있습니다.
-이 파일들은 [소스 디렉토리](./routing#source-directory) 아래의 `public` 디렉토리에 배치할 수 있습니다. 예를 들어, 프로젝트 루트가 `./docs`이고 기본 소스 디렉토리 위치를 사용한다면, public 디렉토리는 `./docs/public`이 됩니다.
+이 파일들은 [소스 디렉토리](./routing#source-directory) 아래의 `public` 디렉토리에 놓을 수 있습니다. 예를 들어 프로젝트 루트가 `./docs`이고 기본 소스 디렉토리 위치를 사용 중인 경우, `public` 디렉토리는 `./docs/public`이 됩니다.
-`public`에 배치된 자산은 그대로 출력 디렉토리의 루트로 복사됩니다.
+`public`에 배치된 에셋은 출력 디렉토리의 루트로 그대로 복사됩니다.
-`public`에 배치된 파일을 참조할 때는 루트 절대 경로를 사용해야 한다는 점에 유의하세요 - 예를 들어, `public/icon.png`는 소스 코드에서 항상 `/icon.png`로 참조되어야 합니다.
+`public`에 배치된 파일은 루트 절대 경로를 사용하여 참조해야 한다는 점에 유의하세요. 예를 들어, `public/icon.png`는 소스 코드에서 항상 `/icon.png`로 참조되어야 합니다.
-## 기본 URL {#base-url}
+## Base URL {#base-url}
-사이트가 루트 URL이 아닌 곳에 배포되는 경우, `.vitepress/config.js`에서 `base` 옵션을 설정해야 합니다. 예를 들어, 사이트를 `https://foo.github.io/bar/`에 배포할 계획이라면, `base`는 `'/bar/'`(항상 슬래시로 시작하고 끝나야 함)로 설정해야 합니다.
+사이트가 루트 URL이 아닌 곳에 배포된 경우, `.vitepress/config.js`에서 `base` 옵션을 설정해야 합니다. 예를 들어, 사이트를 `https://foo.github.io/bar/`에 배포하려는 경우 `base`는 `'/bar/'`로 설정해야 합니다(항상 슬래시로 시작하고 끝나야 합니다).
-모든 정적 자산 경로는 다양한 `base` 구성 값에 맞게 자동으로 처리됩니다. 예를 들어, 마크다운에서 `public` 아래에 있는 자산에 대한 절대 참조가 있는 경우:
+모든 정적 에셋 경로는 다른 `base` 구성 값에 맞게 자동으로 처리됩니다. 예를 들어, 마크다운에서 `public` 하위의 에셋에 대한 절대 참조가 있는 경우:
```md
![이미지](/image-inside-public.png)
```
-이 경우 `base` 구성 값을 변경하더라도 업데이트할 필요가 **없습니다**.
+이 경우 `base` 구성 값을 변경할 때 **업데이트할 필요가 없습니다**.
-그러나 자산을 동적으로 연결하는 테마 컴포넌트를 작성하는 경우, 예를 들어 테마 구성 값에 기반한 이미지의 `src`가 있는 경우:
+그러나 테마 구성 값을 기반으로 `src`가 설정된 이미지와 같이 동적으로 에셋에 링크하는 테마 컴포넌트를 작성하는 경우:
```vue
```
-이 경우 VitePress에 제공되는 [`withBase` 헬퍼](../reference/runtime-api#withbase)로 경로를 래핑하는 것이 권장됩니다:
+이 경우 VitePress에서 제공하는 [`withBase` 헬퍼](../reference/runtime-api#withbase)로 경로를 감싸는 것이 좋습니다:
```vue
-
사용자 정의 레이아웃!
+
Custom Layout!
- 사용자 정의 404 페이지!
+ Custom 404 page!
```
-[`useData()`](../reference/runtime-api#usedata) 헬퍼는 우리가 필요로 하는 모든 런타임 데이터를 제공하여, 다른 레이아웃을 조건부로 렌더링할 수 있습니다. 우리가 접근할 수 있는 또 다른 데이터는 현재 페이지의 프론트매터입니다. 이를 활용하여 사용자가 각 페이지의 레이아웃을 제어할 수 있도록 합니다. 예를 들어, 사용자는 특별한 홈페이지 레이아웃을 사용해야 한다고 지정할 수 있습니다:
+[`useData()`](../reference/runtime-api#usedata) 헬퍼는 다양한 레이아웃을 조건부로 렌더링하는 데 필요한 모든 런타임 데이터를 제공합니다. 접근할 수 있는 다른 데이터 중 하나는 현재 페이지의 전문(front-matter)입니다. 이를 활용하여 각 페이지에 맞게 레이아웃을 제어할 수 있습니다. 예를 들어 특정 페이지에서 홈 페이지 레이아웃을 사용하도록 지정할 수 있습니다:
```md
---
@@ -108,7 +108,7 @@ layout: home
---
```
-그리고 우리는 이를 처리하기 위해 테마를 조정할 수 있습니다:
+그리고 이를 처리하도록 테마를 조정할 수 있습니다:
```vue{3,12-14}
-
사용자 정의 레이아웃!
+
Custom Layout!
- 사용자 정의 404 페이지!
+ Custom 404 page!
- 사용자 정의 홈 페이지!
+ Custom home page!
```
-물론, 레이아웃을 더 많은 컴포넌트로 나눌 수 있습니다:
+물론 레이아웃을 더 많은 컴포넌트로 나눌 수 있습니다:
```vue{3-5,12-15}
-
사용자 정의 레이아웃!
+
Custom Layout!
-
+
```
-테마 컴포넌트에서 사용할 수 있는 모든 것에 대한 [런타임 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 fb61c48f60dc..c95b57be3b37 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
-
모든 블로그 게시물
+
All Blog Posts
{{ post.frontmatter.title }}
@@ -133,34 +133,34 @@ import { data as posts } from './posts.data.js'
### 옵션 {#options}
-기본 데이터가 모든 요구 사항에 맞지 않을 수 있습니다 - 옵션을 사용하여 데이터를 변환할 수 있습니다:
+기본 데이터가 모든 요구 사항에 충족하지 않을 수 있습니다. 옵션을 사용하여 데이터를 변환할 수 있습니다:
```js
// posts.data.js
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', {
- includeSrc: true, // 원시 마크다운 소스를 포함시킬까요?
- render: true, // 완성된 전체 페이지 HTML을 렌더링하여 포함시킬까요?
- excerpt: true, // 발췌문을 포함시킬까요?
+ includeSrc: true, // 원시 마크다운 소스를 포함할까요?
+ render: true, // 렌더링된 전체 페이지 HTML을 포함할까요?
+ excerpt: true, // 발췌문을 포함할까요?
transform(rawData) {
- // 원하는 대로 원시 데이터를 매핑, 정렬 또는 필터링하세요.
- // 최종 결과가 클라이언트에 전송될 것입니다.
+ // 필요에 따라 원시 데이터를 매핑, 정렬 또는 필터링.
+ // 최종 결과를 클라이언트에 전달.
return rawData.sort((a, b) => {
return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
}).map((page) => {
page.src // 원시 마크다운 소스
page.html // 렌더링된 전체 페이지 HTML
- page.excerpt // 렌더링된 발췌문 HTML (`---` 위의 내용)
+ page.excerpt // 렌더링된 발췌문 HTML (첫 번째 `---` 위에 있는 내용)
return {/* ... */}
})
}
})
```
-[Vue.js 블로그](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts)에서 사용되는 방법을 확인하세요.
+[Vue.js 블로그](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts)에서 어떻게 사용되었는지 확인해보세요.
-`createContentLoader` API는 [빌드 후크](../reference/site-config#build-hooks) 내에서도 사용될 수 있습니다:
+`createContentLoader` API는 [빌드 훅](../reference/site-config#build-hooks) 내에서도 사용할 수 있습니다:
```js
// .vitepress/config.js
@@ -168,6 +168,7 @@ export default {
async buildEnd() {
const posts = await createContentLoader('posts/*.md').load()
// 포스트 메타데이터를 기반으로 파일 생성하기, 예: RSS 피드
+ // 게시물 메타데이터를 기반으로 파일 생성, 예: RSS 피드
}
}
```
@@ -177,23 +178,23 @@ export default {
```ts
interface ContentOptions {
/**
- * src를 포함시킬까요?
+ * src를 포함할까요?
* @default false
*/
includeSrc?: boolean
/**
- * src를 HTML로 렌더링하고 데이터에 포함시킬까요?
+ * src를 HTML로 렌더링하고 데이터에 포함할까요?
* @default false
*/
render?: boolean
/**
- * `boolean`인 경우, 발췌문을 구문 분석하고 포함할지 여부입니다. (HTML로 렌더링됨)
+ * `boolean` 타입인 경우, 발췌문을 파싱하고 포함할지 여부를 나타냅니다. (HTML로 렌더링됨)
*
- * `function`인 경우, 콘텐츠에서 발췌문이 추출되는 방식을 제어합니다.
+ * `function` 타입인 경우, 콘텐츠에서 발췌문을 추출하는 방법을 제어합니다.
*
- * `string`인 경우, 발췌문을 추출하는 데 사용되는 사용자 정의 구분자를 정의합니다.
+ * `string` 타입인 경우, 발췌문을 추출하는 데 사용할 커스텀 구분자를 정의합니다.
* `excerpt`가 `true`인 경우 기본 구분자는 `---`입니다.
*
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt
@@ -207,16 +208,16 @@ interface ContentOptions {
| string
/**
- * 데이터를 변환하십시오. 컴포넌트나 마크다운 파일에서 가져올 경우,
- * 데이터는 클라이언트 번들에 JSON으로 인라인될 것입니다.
+ * 데이터를 변환합니다. 데이터는 컴포넌트나 마크다운 파일에서 가져올 경우,
+ * 클라이언트 번들에 JSON으로 포함됩니다.
*/
transform?: (data: ContentData[]) => T | Promise
}
```
-## 타입된 데이터 로더 {#typed-data-loaders}
+## 데이터 로더의 "export" 타입 {#typed-data-loaders}
-TypeScript를 사용할 때, 다음과 같이 로더와 `data` 내보내기를 타입할 수 있습니다:
+TypeScript를 사용할 때, 로더와 `data` "export"를 다음과 같이 타입 지정할 수 있습니다:
```ts
import { defineLoader } from 'vitepress'
@@ -229,7 +230,7 @@ declare const data: Data
export { data }
export default defineLoader({
- // 타입 검사된 로더 옵션
+ // type checked loader options
watch: ['...'],
async load(): Promise {
// ...
@@ -239,7 +240,7 @@ export default defineLoader({
## 구성 {#configuration}
-로더 내부에서 구성 정보를 가져오려면 다음과 같은 코드를 사용할 수 있습니다:
+로더 내부에서 구성 정보를 가져오려면 다음과 같이 코드를 사용해야 합니다:
```ts
import type { SiteConfig } from 'vitepress'
diff --git a/docs/ko/guide/deploy.md b/docs/ko/guide/deploy.md
index cb5465b3dc9e..5da3efa3a54a 100644
--- a/docs/ko/guide/deploy.md
+++ b/docs/ko/guide/deploy.md
@@ -4,11 +4,11 @@ outline: deep
# VitePress 사이트 배포하기 {#deploy-your-vitepress-site}
-다음 가이드는 몇 가지 공유된 가정을 바탕으로 합니다:
+다음 가이드는 몇 가지 공통된 가정을 기반으로 합니다:
-- VitePress 사이트는 프로젝트의 `docs` 디렉토리 안에 있습니다.
-- 기본 빌드 출력 디렉토리(`.vitepress/dist`)를 사용하고 있습니다.
-- VitePress를 프로젝트의 로컬 의존성으로 설치했으며, `package.json`에 다음 스크립트를 설정했습니다:
+- VitePress 사이트는 프로젝트의 `docs` 디렉토리 안에 있다.
+- 기본 빌드 출력 디렉토리(`.vitepress/dist`)를 사용하고 있다.
+- VitePress는 프로젝트의 로컬 종속성으로 설치되어 있으며, `package.json`에 다음 스크립트가 설정되어 있다:
```json
{
@@ -33,9 +33,9 @@ outline: deep
$ npm run docs:preview
```
- `preview` 명령어는 `.vitepress/dist` 출력 디렉토리를 `http://localhost:4173`에서 제공하는 로컬 정적 웹 서버를 부팅합니다. 이를 사용하여 프로덕션에 푸시하기 전에 모든 것이 잘 보이는지 확인할 수 있습니다.
+ `preview` 명령은 출력 디렉토리 `.vitepress/dist`를 `http://localhost:4173`에서 제공할 것입니다. 이를 사용하여 프로덕션에 푸시하기 전에 모든 것이 잘 보이는지 확인할 수 있습니다.
-3. `--port` 인수를 전달하여 서버의 포트를 구성할 수 있습니다.
+3. `--port` 인자를 전달하여 서버의 포트를 구성할 수 있습니다.
```json
{
@@ -45,21 +45,21 @@ outline: deep
}
```
- 이제 `docs:preview` 메소드가 `http://localhost:8080`에서 서버를 시작합니다.
+ 이제 `docs:preview` 메서드가 `http://localhost:8080`에서 서버를 시작합니다.
## public 기본 경로 설정하기 {#setting-a-public-base-path}
-기본적으로, 사이트가 도메인의 루트 경로(`/`)에서 배포될 것으로 가정합니다. 사이트가 하위 경로, 예를 들어 `https://mywebsite.com/blog/`에서 제공되는 경우, VitePress 구성에서 [`base`](../reference/site-config#base) 옵션을 `'/blog/'`로 설정해야 합니다.
+기본적으로 사이트가 도메인의 루트 경로(`/`)에 배포된다고 가정합니다. 예를 들어 사이트가 `https://mywebsite.com/blog/` 와 같은 서브 경로에서 제공될 경우, VitePress 구성에서 [`base`](../reference/site-config#base) 옵션을 `'/blog/'`로 설정해야 합니다.
-**예:** GitHub(또는 GitLab) 페이지를 사용하여 `user.github.io/repo/`로 배포하는 경우, `base`를 `/repo/`로 설정하세요.
+**예**: Github(또는 GitLab) Pages를 사용하여 `user.github.io/repo/`에 배포하는 경우, `base`를 `/repo/`로 설정하세요.
## HTTP 캐시 헤더 {#http-cache-headers}
-프로덕션 서버에서 HTTP 헤더를 제어할 수 있다면, 반복 방문 시 성능을 향상시키기 위해 `cache-control` 헤더를 구성할 수 있습니다.
+프로덕션 서버에서 HTTP 헤더를 제어할 수 있다면, 반복 방문 시 더 나은 성능을 위해 `cache-control` 헤더를 구성할 수 있습니다.
-프로덕션 빌드는 정적 자산(JavaScript, CSS, `public`에 있지 않은 다른 가져온 자산)을 위해 해시된 파일 이름을 사용합니다. 브라우저 개발 도구의 네트워크 탭을 사용하여 프로덕션 미리보기를 검사하면, `app.4f283b18.js`와 같은 파일을 볼 수 있습니다.
+프로덕션 빌드는 정적 자산(JavaScript, CSS, `public`가 아닌 곳에서 가져온 에셋)에 대해 해시된 파일 이름을 사용합니다. 브라우저 개발 도구의 네트워크 탭을 사용하여 프로덕션 미리보기를 검사하면 `app.4f283b18.js`와 같은 파일을 볼 수 있습니다.
-이 `4f283b18` 해시는 이 파일의 내용에서 생성됩니다. 같은 해시된 URL은 항상 동일한 파일 내용을 제공하도록 보장됩니다 - 내용이 변경되면 URL도 변경됩니다. 이는 이러한 파일에 대해 가장 강력한 캐시 헤더를 안전하게 사용할 수 있음을 의미합니다. 이러한 모든 파일이 출력 디렉토리의 `assets/` 아래에 배치되므로, 그들을 위해 다음 헤더를 구성할 수 있습니다:
+이 `4f283b18` 해시는 파일의 내용에서 생성됩니다. 동일한 해시된 URL은 동일한 파일 내용을 제공할 것이 보장되며, 내용이 변경되면 URL도 변경됩니다. 이는 이러한 파일에 대해 가장 강력한 캐시 헤더를 안전하게 사용할 수 있음을 의미합니다. 모든 이러한 파일은 출력 디렉토리의 `assets/` 아래에 배치되므로, 다음 헤더를 구성할 수 있습니다:
```
Cache-Control: max-age=31536000,immutable
@@ -73,13 +73,13 @@ Cache-Control: max-age=31536000,immutable
cache-control: immutable
```
-참고: `_headers` 파일은 [public 디렉토리](./asset-handling#the-public-directory)에 배치해야 합니다 - 우리의 경우, `docs/public/_headers` - 출력 디렉토리에 그대로 복사되도록 하기 위해서입니다.
+참고: `_headers` 파일은 [public 디렉토리](./asset-handling#the-public-directory)에 배치해야 합니다. 이 경우 `docs/public/_headers`에 위치하여 출력 디렉토리에 그대로 복사됩니다.
-[Netlify 사용자 정의 헤더 문서](https://docs.netlify.com/routing/headers/)
+[Netlify 커스텀 헤더 문서](https://docs.netlify.com/routing/headers/)
:::
-::: details `vercel.json` 내의 Vercel 설정 예시
+::: details Vercel 내의 `vercel.json` 구성 예시
```json
{
@@ -97,9 +97,9 @@ Cache-Control: max-age=31536000,immutable
}
```
-참고: `vercel.json` 파일은 **리포지토리**의 루트에 위치해야 합니다.
+참고: `vercel.json` 파일은 **리포지토리**의 루트에 배치해야 합니다.
-[Vercel 헤더 설정에 대한 문서](https://vercel.com/docs/concepts/projects/project-configuration#headers)
+[Vercel 헤더 구성에 대한 문서](https://vercel.com/docs/concepts/projects/project-configuration#headers)
:::
@@ -107,42 +107,41 @@ Cache-Control: max-age=31536000,immutable
### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render
-새 프로젝트를 설정하고 대시보드를 사용하여 이 설정을 변경하세요:
+새 프로젝트를 설정하고 대시보드를 사용하여 다음 설정을 변경하세요:
- **빌드 명령어:** `npm run docs:build`
- **출력 디렉토리:** `docs/.vitepress/dist`
- **노드 버전:** `18` (또는 그 이상)
::: warning
-HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세요. Vue에 의미를 가진 주석이 제거될 수 있습니다. 제거되면 수화 불일치 오류가 발생할 수 있습니다.
+HTML 코드에 대해 _Auto Minify_ 옵션을 활성화하지 마세요. 이는 Vue에 의미가 있는 주석을 출력에서 제거할 것입니다. 제거되면 하이드레이션 불일치 오류가 발생할 수 있습니다.
:::
### GitHub Pages
-1. 프로젝트의 `.github/workflows` 디렉토리 안에 `deploy.yml`이라는 파일을 생성하고 다음과 같은 내용을 넣으세요:
+1. 프로젝트의 `.github/workflows` 디렉토리 안에 `deploy.yml`이라는 파일을 만들고 다음과 같은 내용을 추가하세요:
```yaml
- # GitHub Pages에 VitePress 사이트를 빌드하고 배포하기 위한 샘플 워크플로우
+ # VitePress 사이트를 GitHub Pages에 빌드하고 배포하는 샘플 워크플로우
#
- name: Deploy VitePress site to Pages
+ name: VitePress 사이트를 Pages에 배포
on:
- # `main` 브랜치를 대상으로 하는 푸시에 대해 실행합니다. 기본 브랜치로 `master`를
- # 사용하는 경우, 이를 `master`로 변경하세요.
+ # `main` 브랜치를 대상으로 하는 푸시에서 실행됩니다. 기본 브랜치로 `master`를 사용하는 경우 여기를 `master`로 변경하세요.
push:
branches: [main]
- # Actions 탭에서 이 워크플로우를 수동으로 실행할 수 있도록 허용합니다.
+ # Actions 탭에서 이 워크플로우를 수동으로 실행할 수 있게 합니다.
workflow_dispatch:
- # GitHub Pages에 배포를 허용하기 위해 GITHUB_TOKEN의 권한을 설정합니다.
+ # GitHub Pages에 배포할 수 있도록 GITHUB_TOKEN의 권한을 설정합니다.
permissions:
contents: read
pages: write
id-token: write
- # 동시에 하나의 배포만 허용하며, 진행 중인 실행과 최신 대기열 사이에 대기열에 있는 실행을 건너뛰기.
- # 그러나, 이러한 프로덕션 배포를 완료하도록 진행 중인 실행을 취소하지는 마세요.
+ # 진행 중인 실행과 마지막으로 대기 중인 실행 사이에 대기 중인 실행을 건너뛰어 하나의 동시 배포만 허용합니다.
+ # 그러나 이러한 프로덕션 배포가 완료되도록 진행 중인 실행은 취소하지 않습니다.
concurrency:
group: pages
cancel-in-progress: false
@@ -155,9 +154,9 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
- name: Checkout
uses: actions/checkout@v4
with:
- fetch-depth: 0 # lastUpdated가 활성화되어 있지 않다면 필요 없습니다
- # - uses: pnpm/action-setup@v3 # pnpm을 사용하는 경우 이것을 주석 해제하세요
- # - uses: oven-sh/setup-bun@v1 # Bun을 사용하는 경우 이것을 주석 해제하세요
+ fetch-depth: 0 # lastUpdated가 활성화되지 않은 경우 필요하지 않음
+ # - uses: pnpm/action-setup@v3 # pnpm을 사용하는 경우 주석 해제
+ # - uses: oven-sh/setup-bun@v1 # Bun을 사용하는 경우 주석 해제
- name: Setup Node
uses: actions/setup-node@v4
with:
@@ -189,16 +188,16 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
```
::: warning
- VitePress의 `base` 옵션이 제대로 구성되어 있는지 확인하세요. 자세한 내용은 [public 기본 경로 설정하기](#setting-a-public-base-path)를 참조하세요.
+ VitePress의 `base` 옵션이 제대로 구성되어 있는지 확인하세요. 자세한 내용은 [public 기본 경로 설정하기](#setting-a-public-base-path)를 참고하세요.
:::
-2. 저장소 설정에서 "Pages" 메뉴 항목 아래 "빌드 및 배포 > 출처"에서 "GitHub Actions"를 선택하세요.
+2. 리포지토리 설정의 "Pages" 메뉴 항목에서 "Build and deployment > Source"에서 "GitHub Actions"를 선택하세요.
-3. `main` 브랜치에 변경 사항을 푸시하고 GitHub Actions 워크플로우가 완료되기를 기다리세요. 설정에 따라 사이트가 `https://.github.io/[repository]/` 또는 `https:///`에 배포된 것을 볼 수 있습니다. `main` 브랜치에 푸시할 때마다 사이트가 자동으로 배포됩니다.
+3. 변경 사항을 `main` 브랜치에 푸시하고 GitHub Actions 워크플로우가 완료될 때까지 기다립니다. 설정에 따라 사이트가 `https://.github.io/[repository]/` 또는 `https:///`에 배포된 것을 볼 수 있습니다. 사이트는 `main` 브랜치에 푸시할 때마다 자동으로 배포됩니다.
### GitLab Pages
-1. VitePress 구성에서 `outDir`을 `../public`으로 설정합니다. `https://.gitlab.io//`에 배포하려면 `base` 옵션을 `'//'`로 구성하세요.
+1. VitePress 구성에서 `outDir`을 `../public`으로 설정하세요. `https://.gitlab.io//`에 배포하려면 `base` 옵션을 `'//'`로 구성하세요. 커스텀 도메인, 유저 또는 그룹 페이지에 배포하거나 GitLab에서 "Use unique domain" 설정이 활성화된 경우에는 `base`가 필요하지 않습니다.
2. 변경 사항을 적용할 때마다 사이트를 빌드하고 배포하도록 하기 위해 프로젝트의 루트에 다음 내용을 가진 `.gitlab-ci.yml` 파일을 생성하세요:
@@ -209,7 +208,7 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
paths:
- node_modules/
script:
- # - apk add git # lastUpdated가 활성화되어 있고 alpine과 같은 작은 도커 이미지를 사용하는 경우 이것을 주석 해제하세요
+ # - apk add git # alpine 과 같은 작은 도커 이미지를 사용하고 있고 lastUpdated 가 활성화된 경우 주석 처리를 제거하세요.
- npm install
- npm run docs:build
artifacts:
@@ -223,7 +222,7 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
1. [공식 문서](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration)를 따르세요.
-2. 구성 파일에 이 값을 설정하세요(필요하지 않은 값들, 예를 들어 `api_location` 같은 것은 제거하세요):
+2. 구성 파일에 다음 값을 설정하세요(필요하지 않은 값들, 예를 들어 `api_location` 같은 것은 제거하세요):
- **`app_location`**: `/`
- **`output_location`**: `docs/.vitepress/dist`
@@ -231,7 +230,7 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
### Firebase {#firebase}
-1. 프로젝트의 루트에 `firebase.json`과 `.firebaserc`를 생성하세요:
+1. 프로젝트 루트에 `firebase.json`과 `.firebaserc`를 생성하세요:
`firebase.json`:
@@ -270,9 +269,9 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
### Heroku
-1. [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static)에 주어진 문서 및 가이드를 따르세요.
+1. [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static)에 제공된 문서와 가이드를 따르세요.
-2. 프로젝트의 루트에 아래 내용을 가진 `static.json` 파일을 생성하세요:
+2. 프로젝트 루트에 아래 내용을 포함한 `static.json` 파일을 생성하세요:
```json
{
@@ -282,19 +281,19 @@ HTML 코드에 대해 _Auto Minify_와 같은 옵션을 활성화하지 마세
### Edgio
-[Edgio에 VitePress 앱 생성 및 배포하기](https://docs.edg.io/guides/vitepress)를 참조하세요.
+[Edgio에 VitePress 앱 생성 및 배포하기](https://docs.edg.io/guides/vitepress)를 참고하세요.
### Kinsta 정적 사이트 호스팅 {#kinsta-static-site-hosting}
-[Kinsta](https://kinsta.com/static-site-hosting/)에서 VitePress 웹사이트를 배포하는 방법은 [이 지침](https://kinsta.com/docs/vitepress-static-site-example/)을 따르세요.
+[VitePress](https://kinsta.com/static-site-hosting/) 웹사이트를 [Kinsta](https://kinsta.com/static-site-hosting/)에 배포하려면 이 [지침](https://kinsta.com/docs/vitepress-static-site-example/)을 따르세요.
-### 스톰킷
+### Stormkit
-VitePress 프로젝트를 [Stormkit](https://www.stormkit.io)에 배포하려면 이 [지침](https://stormkit.io/blog/how-to-deploy-vitepress)을 따르세요.
+[VitePress](https://stormkit.io) 프로젝트를 [Stormkit](https://www.stormkit.io)에 배포하려면 이 [지침](https://stormkit.io/blog/how-to-deploy-vitepress)을 따르세요.
### Nginx
-다음은 Nginx 서버 블록 구성의 예입니다. 이 설정에는 일반적인 텍스트 기반 자산에 대한 gzip 압축, 적절한 캐싱 헤더로 VitePress 사이트의 정적 파일을 제공하는 규칙, `cleanUrls: true`를 처리하는 규칙이 포함되어 있습니다.
+다음은 Nginx 서버 블록 구성의 예입니다. 이 설정은 일반적인 텍스트 기반 에셋에 대한 gzip 압축, VitePress 사이트의 정적 파일을 적절한 캐싱 헤더와 함께 제공하는 규칙 및 `cleanUrls: true`를 처리하는 규칙을 포함합니다.
```nginx
server {
@@ -306,20 +305,20 @@ server {
index index.html;
location / {
- # 내용 위치
+ # 콘텐츠 위치
root /app;
- # 정확한 일치 -> 깨끗한 URL로 처리 -> 폴더 -> 찾을 수 없음
+ # 정확히 일치하는 파일 -> 정제된 URL로 역방향 매핑 -> 폴더 -> 파일 없음
try_files $uri $uri.html $uri/ =404;
# 존재하지 않는 페이지
error_page 404 /404.html;
- # index.html이 없는 폴더는 이 설정에서 403을 발생시킴
+ # index.html이 없는 폴더는 이 설정에서 403 오류를 발생시킴
error_page 403 /404.html;
# 캐싱 헤더 조정
- # assets 폴더의 파일은 해시 파일 이름을 가짐
+ # assets 폴더의 파일들은 해시된 파일명 사용
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
@@ -328,10 +327,10 @@ server {
}
```
-이 구성은 빌드된 VitePress 사이트가 서버상의 `/app` 디렉토리에 위치한다고 가정합니다. 사이트 파일이 다른 곳에 위치한 경우 `root` 지시문을 그에 맞게 조정하세요.
+이 구성은 빌드된 VitePress 사이트가 서버의 `/app` 디렉토리에 위치한다고 가정합니다. 사이트 파일이 다른 곳에 위치한 경우 `root` 지시문을 적절하게 조정하세요.
::: warning index.html을 기본값으로 설정하지 마세요.
-try_files 해결은 다른 Vue 애플리케이션처럼 index.html로 기본 설정되어서는 안 됩니다. 이것은 유효하지 않은 페이지 상태로 이어질 것입니다.
+try_files는 다른 Vue 애플리케이션처럼 index.html을 기본값으로 할 수 없습니다. 이는 페이지 상태가 유효하지 않게 만듭니다.
:::
-추가 정보는 [공식 nginx 문서](https://nginx.org/en/docs/), 이슈 [#2837](https://github.com/vuejs/vitepress/discussions/2837), [#3235](https://github.com/vuejs/vitepress/issues/3235) 그리고 Mehdi Merah의 [블로그 포스트](https://blog.mehdi.cc/articles/vitepress-cleanurls-on-nginx-environment#readings)에서 찾을 수 있습니다.
+추가 정보는 [공식 nginx 문서](https://nginx.org/en/docs/), 이슈 [#2837](https://github.com/vuejs/vitepress/discussions/2837), [#3235](https://github.com/vuejs/vitepress/issues/3235) 및 Mehdi Merah의 [블로그 포스트](https://blog.mehdi.cc/articles/vitepress-cleanurls-on-nginx-environment#readings)에서 확인할 수 있습니다.
diff --git a/docs/ko/guide/extending-default-theme.md b/docs/ko/guide/extending-default-theme.md
index be254f38c016..a6a8d380bf51 100644
--- a/docs/ko/guide/extending-default-theme.md
+++ b/docs/ko/guide/extending-default-theme.md
@@ -4,23 +4,23 @@ outline: deep
# 기본 테마 확장하기 {#extending-the-default-theme}
-VitePress의 기본 테마는 문서화에 최적화되어 있으며, 커스터마이징이 가능합니다. [기본 테마 구성 개요](../reference/default-theme-config)를 참조하여 가능한 옵션의 전체 목록을 확인하세요.
+VitePress의 기본 테마는 문서화에 최적화되어 있으며, 커스텀할 수 있습니다. 포괄적인 옵션 목록은 [기본 테마 구성](../reference/default-theme-config)을 참고하세요.
-그러나 설정만으로는 충분하지 않은 경우가 여러 번 있을 수 있습니다. 예를 들면:
+그러나 구성만으로는 충분하지 않을 수 있습니다. 예를 들어:
-1. CSS 스타일링을 조정해야 할 때;
-2. 전역 컴포넌트 등록과 같이 Vue 앱 인스턴스를 수정해야 할 때;
-3. 레이아웃 슬롯을 통해 테마에 사용자 정의 컨텐츠를 삽입해야 할 때.
+1. CSS 스타일링을 조정해야 하는 경우.
+2. 전역 컴포넌트를 등록하기 위해 Vue 애플리케이션 인스턴스를 수정해야 하는 경우.
+3. 레이아웃 슬롯을 통해 테마에 커스텀 컨텐츠를 삽입해야 하는 경우.
-이러한 고급 커스터마이징은 기본 테마를 "확장하는" 사용자 지정 테마를 사용해야 합니다.
+이러한 고급 커스터마이징은 기본 테마를 "확장"하는 커스텀 테마 사용이 필요 합니다.
::: tip
-진행하기 전에, 사용자 지정 테마가 어떻게 작동하는지 이해하기 위해 [사용자 지정 테마 사용하기](./custom-theme)를 먼저 읽어보세요.
+진행하기 전에, 커스텀 테마가 어떻게 작동하는지 이해하려면 먼저 [커스텀 테마 사용하기](./custom-theme)를 읽어보세요.
:::
## CSS 커스터마이징하기 {#customizing-css}
-기본 테마의 CSS는 루트 레벨 CSS 변수를 오버라이딩하여 커스터마이즈 할 수 있습니다:
+기본 테마의 CSS는 루트 레벨의 CSS 변수를 재정의하여 커스터마이징 할 수 있습니다:
```js
// .vitepress/theme/index.js
@@ -38,13 +38,13 @@ export default DefaultTheme
}
```
-오버라이딩할 수 있는 [기본 테마 CSS 변수](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css)를 확인하세요.
+재정의할 수 있는 기본 테마 CSS 변수는 [여기](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css)를 참고하세요.
## 다른 폰트 사용하기 {#using-different-fonts}
-VitePress는 기본 폰트로 [Inter](https://rsms.me/inter/)를 사용하며, 빌드 출력물에 폰트를 포함합니다. 또한, 이 폰트는 프로덕션 환경에서 자동으로 프리로드됩니다. 하지만, 다른 메인 폰트를 사용하고 싶은 경우에는 바람직하지 않을 수 있습니다.
+VitePress는 기본 폰트로 [Inter](https://rsms.me/inter/)를 사용하며, 빌드 결과물에 폰트를 포함시킵니다. 폰트는 프로덕션 환경에서 자동으로 미리 로드되지만, 다른 메인 폰트를 사용하고자 할 경우 이는 바람직하지 않을 수 있습니다.
-빌드 출력물에서 Inter를 포함하지 않으려면, 대신 `vitepress/theme-without-fonts`에서 테마를 임포트하세요:
+빌드 결과물에 Inter를 포함시키지 않으려면, `vitepress/theme-without-fonts`에서 테마를 "import" 합니다:
```js
// .vitepress/theme/index.js
@@ -63,10 +63,10 @@ export default DefaultTheme
```
::: warning
-[팀 페이지](../reference/default-theme-team-page)와 같은 선택적 컴포넌트를 사용하는 경우, 이들도 `vitepress/theme-without-fonts`에서 가져와야 합니다!
+선택적 컴포넌트인 [팀 페이지](../reference/default-theme-team-page) 등을 사용하는 경우, 반드시 이들도 `vitepress/theme-without-fonts`에서 "import" 해야 합니다!
:::
-폰트가 `@font-face`를 통해 참조된 로컬 파일이라면, 자산으로 처리되어 해시된 파일명과 함께 `.vitepress/dist/assets` 아래에 포함될 것입니다. 이 파일을 프리로드하려면, [transformHead](../reference/site-config#transformhead) 빌드 훅을 사용하세요:
+폰트가 `@font-face`를 통해 참조된 로컬 파일인 경우, 에셋으로 처리되어 해시된 파일 이름으로 `.vitepress/dist/assets`에 포함됩니다. 이 파일을 미리 로드하려면 [transformHead](../reference/site-config#transformhead) 빌드 훅을 사용해야 합니다:
```js
// .vitepress/config.js
@@ -102,7 +102,7 @@ import DefaultTheme from 'vitepress/theme'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
- // 사용자 지정 전역 컴포넌트를 등록하세요
+ // 커스텀 전역 컴포넌트 등록
app.component('MyGlobalComponent' /* ... */)
}
}
@@ -117,17 +117,17 @@ import DefaultTheme from 'vitepress/theme'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
- // 사용자 지정 전역 컴포넌트를 등록하세요
+ // 커스텀 전역 컴포넌트 등록
app.component('MyGlobalComponent' /* ... */)
}
} satisfies Theme
```
-Vite를 사용하기 때문에, Vite의 [글로브 임포트 기능](https://vitejs.dev/ko/guide/features.html#glob-import)을 활용하여 컴포넌트 디렉터리를 자동으로 등록할 수도 있습니다.
+Vite를 사용하므로, Vite의 [glob import 기능](https://vitejs.dev/guide/features.html#glob-import)을 활용하여 컴포넌트 디렉터리를 자동으로 등록할 수 있습니다.
## 레이아웃 슬롯 {#layout-slots}
-기본 테마의 `` 컴포넌트는 페이지의 특정 위치에 컨텐츠를 삽입할 수 있도록 몇 개의 슬롯을 제공합니다. 아웃라인 앞에 컴포넌트를 삽입하는 예시입니다:
+기본 테마의 `` 컴포넌트는 페이지의 특정 위치에 컨텐츠를 삽입할 수 있는 몇 가지 슬롯을 가지고 있습니다. 다음은 아웃라인 앞에 컴포넌트를 삽입하는 예제입니다:
```js
// .vitepress/theme/index.js
@@ -137,7 +137,7 @@ import MyLayout from './MyLayout.vue'
export default {
extends: DefaultTheme,
// 슬롯을 삽입하는 래퍼 컴포넌트로
- // Layout을 오버라이드합니다
+ // Layout을 재정의합니다
Layout: MyLayout
}
```
@@ -153,13 +153,13 @@ const { Layout } = DefaultTheme
- 나만의 사용자 사이드바 상단 컨텐츠
+ My custom sidebar top content
```
-렌더 함수를 사용하는 것도 가능합니다.
+또는 렌더 함수를 사용할 수도 있습니다.
```js
// .vitepress/theme/index.js
@@ -177,9 +177,9 @@ export default {
}
```
-기본 테마 레이아웃에서 사용할 수 있는 전체 슬롯 목록:
+기본 테마 레이아웃에서 사용할 수 있는 슬롯의 전체 목록:
-- 프론트매터를 통해 `layout: 'doc'` (기본값)이 활성화될 때:
+- 전문(front-matter)으로 `layout: 'doc'` (기본값)이 활성화된 경우:
- `doc-top`
- `doc-bottom`
- `doc-footer-before`
@@ -193,7 +193,7 @@ export default {
- `aside-outline-after`
- `aside-ads-before`
- `aside-ads-after`
-- 프론트매터를 통해 `layout: 'home'`이 활성화될 때:
+- 전문으로 `layout: 'home'`이 활성화된 경우:
- `home-hero-before`
- `home-hero-info-before`
- `home-hero-info`
@@ -203,10 +203,10 @@ export default {
- `home-hero-after`
- `home-features-before`
- `home-features-after`
-- 프론트매터를 통해 `layout: 'page'`가 활성화될 때:
+- 전문으로 `layout: 'page'`이 활성화된 경우:
- `page-top`
- `page-bottom`
-- 찾을 수 없는 (404) 페이지에서:
+- 페이지를 찾을 수 없음(404)일 때:
- `not-found`
- 항상:
- `layout-top`
@@ -218,11 +218,11 @@ export default {
- `nav-screen-content-before`
- `nav-screen-content-after`
-## 뷰 전환 API 사용하기 {#using-view-transitions-api}
+## 뷰 트랜지션 API 사용하기 {#using-view-transitions-api}
-### 외형 토글 시 {#on-appearance-toggle}
+### 외형 토글 {#on-appearance-toggle}
-기본 테마를 확장하여 색상 모드가 토글될 때 사용자 정의 전환을 제공할 수 있습니다. 예시:
+기본 테마를 확장하여 컬러 모드가 전환될 때 커스텀 트랜지션 효과를 제공할 수 있습니다. 예제:
```vue
@@ -299,24 +299,24 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
```
-결과 (**경고!**: 눈부심, 갑작스러운 움직임, 밝은 빛):
+결과 (**광과민성 주의!**: 색상 깜빡임, 갑작스러운 움직임, 밝은 빛):
데모
-![외형 토글 전환 데모](/appearance-toggle-transition.webp)
+![외형 토글 트랜지션 데모](/appearance-toggle-transition.webp)
-뷰 전환에 대한 자세한 정보는 [Chrome 문서](https://developer.chrome.com/docs/web-platform/view-transitions/)를 참고하세요.
+뷰 트랜지션에 대한 자세한 정보는 [크롬 문서](https://developer.chrome.com/docs/web-platform/view-transitions/)를 참고하세요.
### 라우트 변경 시 {#on-route-change}
곧 제공될 예정입니다.
-## 내부 컴포넌트 오버라이딩하기 {#overriding-internal-components}
+## 내부 컴포넌트 재정의하기 {#overriding-internal-components}
-Vite의 [별칭](https://vitejs.dev/config/shared-options.html#resolve-alias)을 사용하여 기본 테마 컴포넌트를 사용자 지정 컴포넌트로 대체할 수 있습니다:
+Vite의 [별칭](https://vitejs.dev/config/shared-options.html#resolve-alias)을 사용하여 기본 테마 컴포넌트를 커스텀 컴포넌트로 대체할 수 있습니다:
```ts
import { fileURLToPath, URL } from 'node:url'
@@ -338,4 +338,4 @@ export default defineConfig({
})
```
-컴포넌트의 정확한 이름을 알고 싶다면 [저희 소스 코드](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components)를 참조하세요. 컴포넌트가 내부적으로 사용되기 때문에, 소규모 릴리스 사이에 이름이 업데이트될 수 있습니다.
+컴포넌트의 정확한 이름을 알고 싶다면 [Vitepress 소스 코드](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components)를 참고하세요. 컴포넌트는 내부적으로 사용되기 때문에, 마이너 릴리즈 사이에 이름이 변경될 가능성이 있습니다.
diff --git a/docs/ko/guide/frontmatter.md b/docs/ko/guide/frontmatter.md
index 26c0ee534be9..09b1a2cdf6e1 100644
--- a/docs/ko/guide/frontmatter.md
+++ b/docs/ko/guide/frontmatter.md
@@ -2,7 +2,7 @@
## 사용법 {#usage}
-VitePress는 모든 Markdown 파일에서 YAML 전문(frontmatter)을 지원하며, 이를 [gray-matter](https://github.com/jonschlinkert/gray-matter)로 분석합니다. 전문은 Markdown 파일의 맨 위에 위치해야 합니다(`
-# 안녕하세요
+# Hello
```
-`
-## Markdown 콘텐츠
+## 마크다운 컨텐츠
현재 카운트: {{ count }}
@@ -67,11 +67,11 @@ const count = ref(0)
```
-::: warning Markdown에서 `
```
-## Teleports 사용하기 {#using-teleports}
+## 텔레포트 사용하기 {#using-teleports}
-현재 VitePress는 본문으로만 teleport에 대한 SSG 지원을 가지고 있습니다. 다른 대상을 위해서는, 내장된 `` 컴포넌트 내에 감싸거나 텔레포트 마크업을 최종 페이지 HTML의 올바른 위치에 주입할 수 있습니다 [`postRender` 훅](../reference/site-config#postrender)을 통해.
+VitePress는 현재 body로 텔레포트를 사용하는 SSG만 지원합니다. 다른 대상에 대해 텔레포트를 사용하려면 내장된 `` 컴포넌트로 감싸거나 [`postRender` 훅](../reference/site-config#postrender)을 통해 최종 페이지 HTML의 올바른 위치에 텔레포트 마크업을 삽입할 수 있습니다.
diff --git a/docs/ko/guide/what-is-vitepress.md b/docs/ko/guide/what-is-vitepress.md
index cf5aefa8eafa..9ad43c4512d5 100644
--- a/docs/ko/guide/what-is-vitepress.md
+++ b/docs/ko/guide/what-is-vitepress.md
@@ -1,10 +1,10 @@
# VitePress란 무엇인가? {#what-is-vitepress}
-VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 간단히 말해, VitePress는 [Markdown](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다.
+VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다.
@@ -12,46 +12,46 @@ VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해
- **문서화**
- VitePress는 기술 문서를 위해 설계된 기본 테마와 함께 제공됩니다. 이 테마는 바로 지금 읽고 있는 이 페이지뿐만 아니라 [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) 그리고 [기타 많은](https://www.vuetelescope.com/explore?framework.slug=vitepress) 문서화에 힘을 실어줍니다.
+ VitePress는 기술 문서를 위해 설계된 기본 테마가 함께 제공됩니다. 지금 읽고 있는 이 페이지와 [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) 및 [다양한 프로젝트](https://www.vuetelescope.com/explore?framework.slug=vitepress) 문서는 모두 이 테마를 기반으로 합니다.
- [공식 Vue.js 문서](https://vuejs.org/)도 VitePress 기반으로 되어 있지만, 여러 번역 간에 공유되는 커스텀 테마를 사용합니다.
+ [Vue.js 공식 문서](https://vuejs.org/)도 VitePress 기반으로 되어 있으며, 여러 번역본에 걸쳐 공유되는 커스텀 테마를 사용합니다.
- **블로그, 포트폴리오 및 마케팅 사이트**
- VitePress는 표준 Vite + Vue 애플리케이션의 개발자 경험과 함께 [완전히 맞춤화된 테마](./custom-theme)를 지원합니다. Vite 기반이기 때문에 풍부한 생태계에서 Vite 플러그인을 직접 활용할 수 있습니다. 또한, VitePress는 [데이터 불러오기](./data-loading) (로컬 또는 원격) 및 [동적으로 경로 생성하기](./routing#dynamic-routes)를 위한 유연한 API를 제공합니다. 빌드 시점에 데이터를 결정할 수 있다면 거의 모든 것을 구축할 수 있습니다.
+ VitePress는 표준 Vite + Vue 애플리케이션의 개발자 경험을 가진 [커스텀 테마](./custom-theme)를 지원합니다. Vite 기반이기 때문에 Vite 생태계의 풍부한 플러그인을 직접 활용할 수 있습니다. 또한, VitePress는 [데이터 로딩](./data-loading) (로컬 또는 원격) 및 [동적 라우트 생성](./routing#dynamic-routes)을 위한 유연한 API를 제공합니다. 빌드 시점에 데이터를 결정할 수 있다면 거의 모든 것을 구축할 수 있습니다.
- 공식 [Vue.js 블로그](https://blog.vuejs.org/)는 로컬 콘텐츠를 기반으로 색인 페이지를 생성하는 간단한 블로그입니다.
+ 공식 [Vue.js 블로그](https://blog.vuejs.org/)는 로컬 콘텐츠 기반의 인덱스 페이지를 생성하는 간단한 블로그입니다.
## 개발자 경험 {#developer-experience}
-VitePress는 Markdown 컨텐츠를 다룰 때 훌륭한 개발자 경험(DX)을 제공하고자 합니다.
+VitePress는 마크다운 컨텐츠를 다룰 때 훌륭한 개발자 경험(DX)을 제공하고자 합니다.
-- **[Vite 구동:](https://vitejs.dev/)** 즉각적인 서버 시작이 가능하며, 페이지 새로고침 없이 항상 (<100ms) 즉시 수정 사항이 반영됩니다.
+- **[Vite로 작동](https://vitejs.dev/)**: 즉각적인 서버 시작 가능, 페이지 새로고침 없이 즉시(<100ms) 수정 사항 반영.
-- **[내장 Markdown 확장 기능:](./markdown)** Frontmatter, 테이블, 구문 하이라이팅… 필요한 것이라면 무엇이든 있습니다. 특히, VitePress는 코드 블록과 작업할 때 많은 고급 기능을 제공하여 기술적 문서에 이상적입니다.
+- **[내장된 마크다운 확장 기능](./markdown)**: 서문, 표, 구문 강조 등 무엇이든 가능. 특히 VitePress는 코드 블록 작업을 위한 고급 기능을 많이 제공하여 기술적 문서에 이상적.
-- **[Vue를 향상된 Markdown:](./using-vue)** 각 Markdown 페이지는 HTML과 100% 문법 호환성을 가진 Vue 템플릿 덕분에 Vue [단일 파일 컴포넌트](https://vuejs.org/guide/scaling-up/sfc.html)입니다. Vue 템플릿 기능이나 가져온 Vue 컴포넌트를 사용하여 정적 콘텐츠에 상호작용성을 삽입할 수 있습니다.
+- **[Vue로 향상된 마크다운](./using-vue)**: 각 마크다운 페이지는 HTML과 100% 문법 호환성을 가진 Vue [단일 파일 컴포넌트](https://vuejs.org/guide/scaling-up/sfc.html)입니다. Vue 템플릿 기능이나 컴포넌트를 사용하여 정적 콘텐츠에 상호작용 기능을 포함할 수 있습니다.
## 성능 {#performance}
-전통적인 SSG들과 달리 각 탐색이 전체 페이지 새로고침을 초래하는 것이 아니라, VitePress로 생성된 웹사이트는 초기 방문 시 정적 HTML을 제공하지만, 사이트 내 이후 탐색에 대해서는 [싱글 페이지 애플리케이션](https://en.wikipedia.org/wiki/Single-page_application) (SPA)이 됩니다. 우리의 견해에 따르면, 이 모델은 성능에 있어 최적의 균형을 제공합니다:
+전통적인 SSG들과 달리, VitePress로 생성된 웹사이트는 초기 방문 시 정적 HTML을 제공하지만, 이후 사이트 내 탐색에 대해서는 [단일 페이지 애플리케이션](https://en.wikipedia.org/wiki/Single-page_application) (SPA)이 됩니다. 이 모델은 성능에 대한 최적의 균형을 제공합니다:
- **빠른 초기 로딩**
- 어떤 페이지에 대한 초기 방문은 빠른 로딩 속도와 최적의 SEO를 위해 정적으로 사전 렌더링된 HTML이 제공됩니다. 그런 다음 페이지는 Vue SPA로 페이지를 변환하는 JavaScript 번들을 로드합니다("hydration"). SPA hydration이 느리다는 일반적인 가정과 달리, 이 과정은 실제로 Vue 3의 순수 성능과 컴파일러 최적화 덕분에 매우 빠릅니다. [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)에서 일반적인 VitePress 사이트는 저사양 모바일 장치에서도 느린 네트워크에서 거의 완벽한 성능 점수를 달성합니다.
+ 초기 페이지 방문은 사전 렌더링된 HTML을 제공하여 빠른 로딩 속도와 최적의 SEO를 제공합니다. 그 후 페이지를 Vue SPA로 전환하는 JavaScript 번들이 로드됩니다(이것을 "하이드레이션"이라고 함). 일반적으로 SPA 하이드레이션이 느리다고 생각할 수 있지만, Vue 3의 성능과 컴파일러 최적화 덕분에 이 과정은 매우 빠릅니다. [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)에서 일반적인 VitePress 사이트는 네트워크 속도가 느린 저가형 모바일 기기에서도 거의 완벽한 성능 점수를 얻습니다.
-- **빠른 후속 로드 탐색**
+- **빠른 포스트 로드 탐색**
- 더 중요한 것은 초기 로드 **이후** 사용자 경험이 개선된다는 것입니다. 사이트 내의 이후 탐색에서는 전체 페이지 새로고침이 더 이상 발생하지 않습니다. 대신, 들어오는 페이지의 콘텐츠가 가져와져 동적으로 업데이트됩니다. VitePress는 또한 뷰포트 내 링크에 대한 페이지 청크를 자동으로 사전 로드합니다. 대부분의 경우, 이후 로드 탐색은 즉각적으로 느껴질 것입니다.
+ 더 중요한 것은 SPA 모델이 처음 로드된 후 더 나은 UX를 제공한다는 것입니다. 이후 사이트 내에서 탐색을 해도 전체 페이지가 다시 로드되는 현상이 더 이상 발생하지 않습니다. 대신 페이지의 콘텐츠를 불러와 동적으로 업데이트 합니다. 또한 VitePress는 뷰포트 내에 있는 링크의 페이지 청크를 자동으로 미리 가져옵니다. 이렇게 하면 대부분의 경우 유저는 이미 로드된 페이지에서 탐색할 때 새 페이지가 즉시 로드됩니다.
-- **패널티 없는 상호작용성**
+- **페널티 없는 상호작용**
- 정적 Markdown 내에 내장된 동적 Vue 파트를 hydrate할 수 있도록 각 Markdown 페이지는 Vue 컴포넌트로 처리되고 JavaScript로 컴파일됩니다. 이것은 비효율적으로 들릴 수 있지만, Vue 컴파일러는 정적 부분과 동적 부분을 분리하여 hydration 비용과 페이로드 크기를 최소화하는 데 충분히 똑똑합니다. 초기 페이지 로드에 대해서, 정적 부분은 JavaScript 페이로드에서 자동으로 제거되고 hydration 동안 건너뛰어집니다.
+ 정적 마크다운 내에 내장된 동적 Vue 부분을 하이드레이션 할 수 있도록 각 마크다운 페이지는 Vue 컴포넌트로 처리되고 JavaScript로 컴파일됩니다. 이는 비효율적으로 보일 수 있지만, Vue 컴파일러는 정적 부분과 동적 부분을 분리하여 하이드레이션 비용과 페이로드 크기를 최소화합니다. 초기 페이지 로드 시, 정적 부분은 자동으로 JavaScript 페이로드에서 제거되고 하이드레이션 중 건너뜁니다.
## VuePress는 어떤가요? {#what-about-vuepress}
-VitePress는 VuePress의 영적 후계자입니다. 원래 VuePress는 Vue 2와 webpack에 기반을 두고 있었습니다. Vue 3와 Vite를 기반으로 한 VitePress는 훨씬 더 나은 DX, 더 나은 프로덕션 성능, 더 완성된 기본 테마, 그리고 더욱 유연한 커스터마이징 API를 제공합니다.
+VitePress는 VuePress의 후속 버전 입니다. 원래 VuePress는 Vue 2와 webpack을 기반으로 했습니다. Vue 3와 Vite를 기반으로 한 VitePress는 훨씬 더 나은 DX, 더 나은 프로덕션 성능, 더 다듬어진 기본 테마, 더 유연한 커스터마이징 API를 제공합니다.
-VitePress와 VuePress 사이의 API 차이는 주로 테마와 커스터마이징에 있습니다. 기본 테마를 사용하는 VuePress 1을 사용하는 경우, VitePress로 마이그레이션하는 것이 비교적 간단할 수 있습니다.
+VitePress와 VuePress의 API 차이는 주로 테마와 커스터마이징에 있습니다. 기본 테마를 사용하는 VuePress 1을 사용 중이라면 VitePress로의 마이그레이션은 비교적 간단할 것입니다.
-VuePress 2에도 투자된 노력이 있으며, 이것도 Vue 3와 Vite를 지원하고 VuePress 1과 더 호환됩니다. 그러나 동시에 두 개의 SSG를 병행하여 유지하는 것은 지속 가능하지 않으므로, Vue 팀은 장기적으로 주요 권장 SSG로 VitePress에 집중하기로 결정했습니다.
+VuePress 2도 Vue 3와 Vite를 지원하며 VuePress 1과의 호환성을 높이기 위해 많은 노력이 투자되었습니다. 그러나 두 SSG를 병렬로 유지하는 것은 지속 가능하지 않으므로 Vue 팀은 장기적인 관점에서 주요 권장 SSG인 VitePress에 집중하기로 결정했습니다.
diff --git a/docs/ko/index.md b/docs/ko/index.md
index 327f4ff1b35c..50e56e4c3c11 100644
--- a/docs/ko/index.md
+++ b/docs/ko/index.md
@@ -2,12 +2,12 @@
layout: home
title: VitePress
-titleTemplate: Vite & Vue로 구동되는 정적 사이트 생성기
+titleTemplate: Vite & Vue 기반 정적 사이트 생성기
hero:
name: VitePress
- text: Vite & Vue로 구동되는 정적 사이트 생성기
- tagline: 마크다운으로 멋진 문서를 몇 분 안에
+ text: Vite & Vue 기반 정적 사이트 생성기
+ tagline: 단 몇 분 만에 마크다운을 우아한 문서로 변환
actions:
- theme: brand
text: VitePress란 무엇인가?
@@ -24,17 +24,17 @@ hero:
features:
- icon: 📝
- title: 콘텐츠에 집중하세요
- details: 단지 마크다운으로 아름다운 문서 사이트를 쉽게 만들 수 있습니다.
+ title: 콘텐츠에 집중
+ details: 마크다운으로만 아름다운 문서 사이트를 쉽게 만들기.
- icon:
- title: Vite DX를 즐기세요
- details: 즉각적인 서버 시작, 번개 같은 핫 업데이트, 및 Vite 생태계 플러그인을 활용하세요.
+ title: Vite DX(개발자 경험) 즐겨보기
+ details: 즉각적인 서버 시작, 매우 빠른 업데이트, Vite 생태계 플러그인을 활용.
- icon:
- title: Vue로 커스터마이징하세요
- details: 마크다운에서 직접 Vue 구문과 컴포넌트를 사용하거나 Vue로 커스텀 테마를 만들어보세요.
+ title: Vue로 커스터마이징
+ details: Vue 문법과 컴포넌트를 마크다운에서 직접 사용하거나 Vue로 커스텀 테마를 구축.
- icon: 🚀
- title: 빠른 사이트 출시
- details: 정적 HTML로 빠른 초기 로드와 클라이언트 측 라우팅으로 빠른 포스트 로드 내비게이션을 제공합니다.
+ title: 웹사이트를 빠르게 제공
+ details: 정적 HTML로 빠른 초기 로딩, 클라이언트 측 라우팅을 통한 빠른 탐색.
---