Update ko (#78)

* docs: omitting parent components for nested routes (vuejs#2127)

* docs: explain per-route guards on nested routes (vuejs#2130)

* "경로"를 "라우트"로 단어 일괄 변경

Author: niceplugin

docs/.vitepress/config/ko.ts

@@ -82,23 +82,23 @@ export const koConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/guide/',
             },
             {
-              text: '동적 경로 매칭',
+              text: '동적 라우트 매칭',
               link: '/guide/essentials/dynamic-matching.html',
             },
             {
-              text: "경로 매칭 문법",
+              text: "라우트 매칭 문법",
               link: '/guide/essentials/route-matching-syntax.html',
             },
             {
-              text: '중첩된 경로',
+              text: '중첩된 라우트',
               link: '/guide/essentials/nested-routes.html',
             },
             {
               text: '프로그래밍 방식 탐색',
               link: '/guide/essentials/navigation.html',
             },
             {
-              text: '이름이 있는 경로',
+              text: '이름이 있는 라우트',
               link: '/guide/essentials/named-routes.html',
             },
             {
@@ -110,7 +110,7 @@ export const koConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/guide/essentials/redirect-and-alias.html',
             },
             {
-              text: '경로 컴포넌트에 props 전달하기',
+              text: '라우트 컴포넌트에 props 전달하기',
               link: '/guide/essentials/passing-props.html',
             },
             {
@@ -128,7 +128,7 @@ export const koConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/guide/advanced/navigation-guards.html',
             },
             {
-              text: '경로 메타 필드',
+              text: '라우트 메타 필드',
               link: '/guide/advanced/meta.html',
             },
             {
@@ -152,7 +152,7 @@ export const koConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/guide/advanced/scroll-behavior.html',
             },
             {
-              text: '경로 지연 로딩',
+              text: '라우트 지연 로딩',
               link: '/guide/advanced/lazy-loading.html',
             },
             {

docs/.vitepress/theme/index.ts

@@ -9,7 +9,7 @@ import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 
 const theme: Theme = {
-  ...DefaultTheme,
+  extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),

docs/guide/advanced/composition-api.md

@@ -7,7 +7,7 @@ title="Learn how to use Vue Router with the composition API"
 
 Vue 3에서는 `setup`과 [컴포지션 API](https://vuejs.kr/guide/extras/composition-api-faq.html)가 도입되었습니다. 따라서 컴포넌트 내부의 탐색 가드와 `this`에서 라우터에 접근하는 기존 방식을 대체할 수 있는 몇 가지 새로운 함수를 사용할 수 있습니다.
 
-## `setup` 내부에서 라우터 및 현재 경로에 접근하기 %{#accessing-the-router-and-current-route-inside-setup}%
+## `setup` 내부에서 라우터 및 현재 라우트에 접근하기 %{#accessing-the-router-and-current-route-inside-setup}%
 
 `setup` 내부에서는 `this`에 접근할 수 없기 때문에, `this.$router` 또는 `this.$route`에 접근할 수 없습니다. 접근하기 위해서는 `useRouter` 또는 `useRoute` 함수를 사용해야 합니다.
 
@@ -88,7 +88,7 @@ export default {
 }
 ```
 
-컴포지션 API 가드는 `<router-view>`로 렌더링된 모든 컴포넌트에서도 사용할 수 있으므로, 경로 컴포넌트 내에서만 사용해야 하는 것은 아닙니다.
+컴포지션 API 가드는 `<router-view>`로 렌더링된 모든 컴포넌트에서도 사용할 수 있으므로, 라우트 컴포넌트 내에서만 사용해야 하는 것은 아닙니다.
 
 ## `useLink`
 
@@ -109,7 +109,7 @@ export default {
 
   setup(props) {
     const {
-      // 허용된 경로(route) 객체
+      // 허용된 라우트(route) 객체
       route,
       // 링크에서 사용할 href
       href,

docs/guide/advanced/data-fetching.md

@@ -1,10 +1,10 @@
 # 데이터 가져오기 %{#data-fetching}%
 
-경로가 활성화될 때, 서버에서 데이터를 가져와야 하는 경우가 있습니다. 예를 들어 사용자 프로필을 렌더링하기 전에 서버에서 사용자 데이터를 가져와야 합니다. 이것을 구현하는 데는 두 가지 방법이 있습니다:
+라우트가 활성화될 때, 서버에서 데이터를 가져와야 하는 경우가 있습니다. 예를 들어 사용자 프로필을 렌더링하기 전에 서버에서 사용자 데이터를 가져와야 합니다. 이것을 구현하는 데는 두 가지 방법이 있습니다:
 
 - **탐색 후 가져오기**: 먼저 탐색을 수행하고 진입한 곳의 컴포넌트 수명 주기 훅에서 데이터를 가져옵니다. 데이터를 가져오는 동안 로딩 상태를 표시하는 것이 좋습니다.
 
-- **탐색 전 가져오기**: 경로 진입 전 데이터를 가져오고, 이후 탐색을 수행합니다.
+- **탐색 전 가져오기**: 라우트 진입 전 데이터를 가져오고, 이후 탐색을 수행합니다.
 
 기술적으로 둘 다 유효하므로, 목표로 하는 UX에 따라 선택하면 됩니다.
 
@@ -70,7 +70,7 @@ export default {
 
 ## 탐색 전 가져오기 %{#fetching-before-navigation}%
 
-이 접근 방식은 실제로 새 경로로 이동하기 전에 데이터를 가져옵니다. 경로 컴포넌트의 `beforeRouteEnter` 가드에서 데이터 가져오기를 수행하며,
+이 접근 방식은 실제로 새 라우트로 이동하기 전에 데이터를 가져옵니다. 라우트 컴포넌트의 `beforeRouteEnter` 가드에서 데이터 가져오기를 수행하며,
 가져오기가 완료되었을 때만 `next`를 호출합니다. `next`에 전달된 콜백은 **컴포넌트가 마운트된 후 호출**됩니다:
 
 ```js
@@ -87,7 +87,7 @@ export default {
       next(vm => vm.setData(err, post))
     })
   },
-  // 변경된 경로에서 컴포넌트를 재사용하는 경우,
+  // 변경된 라우트에서 컴포넌트를 재사용하는 경우,
   // 로직에 약간의 차이가 있음.
   async beforeRouteUpdate(to, from) {
     this.post = null

docs/guide/advanced/dynamic-routing.md

@@ -7,11 +7,11 @@ title="Learn how to add routes at runtime"
 
 라우터에 라우트를 추가하는 것은 일반적으로 `routes` 옵션을 통해 이루어지지만, 애플리케이션이 이미 실행 중인 상황에서 라우트를 추가하거나 제거할 수도 있습니다. [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html)와 같은 확장 가능한 인터페이스를 가진 애플리케이션은 이를 통해 애플리케이션을 성장시킬 수 있습니다.
 
-## 경로 추가하기 %{#adding-routes}%
+## 라우트 추가하기 %{#adding-routes}%
 
-동적 라우팅은 주로 `router.addRoute()`와 `router.removeRoute()` 두 개의 함수로 구현됩니다. 이것들은 새 경로만 등록하므로, 새로 추가된 경로가 현재 위치와 일치하는 경우, 새 경로를 표시하려면 `router.push()` 또는 `router.replace()`를 사용하여 **수동으로 탐색**해야 합니다.
+동적 라우팅은 주로 `router.addRoute()`와 `router.removeRoute()` 두 개의 함수로 구현됩니다. 이것들은 새 라우트만 등록하므로, 새로 추가된 라우트가 현재 위치와 일치하는 경우, 새 라우트를 표시하려면 `router.push()` 또는 `router.replace()`를 사용하여 **수동으로 탐색**해야 합니다.
 
-다음은 라우터에 하나의 단일 경로만 있다고 가정해 봅시다:
+다음은 라우터에 하나의 단일 라우트만 있다고 가정해 봅시다:
 
 ```js
 const router = createRouter({
@@ -20,7 +20,7 @@ const router = createRouter({
 })
 ```
 
-모든 페이지 `/about`, `/store`, `/3-tricks-to-improve-your-routing-code`가 결국 `Article` 컴포넌트를 렌더링합니다. 우리가 `/about`에 있고 새 경로를 추가하는 경우:
+모든 페이지 `/about`, `/store`, `/3-tricks-to-improve-your-routing-code`가 결국 `Article` 컴포넌트를 렌더링합니다. 우리가 `/about`에 있고 새 라우트를 추가하는 경우:
 
 ```js
 router.addRoute({ path: '/about', component: About })
@@ -34,11 +34,11 @@ router.addRoute({ path: '/about', component: About })
 router.replace(router.currentRoute.value.fullPath)
 ```
 
-새 경로가 표시될 때까지 기다려야 하는 경우, `await router.replace()`할 수 있음을 기억합시다.
+새 라우트가 표시될 때까지 기다려야 하는 경우, `await router.replace()`할 수 있음을 기억합시다.
 
-## 네비게이션 가드 내부에서 경로 추가하기 %{#adding-routes-inside-navigation-guards}%
+## 네비게이션 가드 내부에서 라우트 추가하기 %{#adding-routes-inside-navigation-guards}%
 
-네비게이션 가드 내부에서 경로를 추가하거나 제거하기로 결정했다면, `router.replace()`를 호출하지 말고 새 위치를 반환하는 리디렉션을 트리거해야 합니다:
+네비게이션 가드 내부에서 라우트를 추가하거나 제거하기로 결정했다면, `router.replace()`를 호출하지 말고 새 위치를 반환하는 리디렉션을 트리거해야 합니다:
 
 ```js
 router.beforeEach(to => {
@@ -50,46 +50,46 @@ router.beforeEach(to => {
 })
 ```
 
-위의 예는 두 가지를 가정합니다: 첫 번째로 새로 추가된 경로 레코드는 `to` 경로와 일치하지만, 실제로 접근하려는 위치가 새로 추가된 경로 위치와 다름. 두 번째로 `hasNecessaryRoute()`는 무한 리디렉션을 방지하기 위해, 새 경로 추가 후에는 `false` 반환.
+위의 예는 두 가지를 가정합니다: 첫 번째로 새로 추가된 라우트 레코드는 `to` 라우트와 일치하지만, 실제로 접근하려는 위치가 새로 추가된 라우트 위치와 다름. 두 번째로 `hasNecessaryRoute()`는 무한 리디렉션을 방지하기 위해, 새 라우트 추가 후에는 `false` 반환.
 
 탐색을 대체하는 방식으로 리디렉션 하는 것으로, 앞서 설명한 `router.replace()` 예제와 같은 동작입니다. 실제 시나리오에서는 네비게이션 가드 외부에서 뷰 컴포넌트가 마운트되면, 이러한 동작을 처리해야 할 수도 있습니다.
 
-## 경로 제거하기 %{#removing-routes}%
+## 라우트 제거하기 %{#removing-routes}%
 
-존재하는 경로를 제거하는 몇 가지 방법이 있습니다:
+존재하는 라우트를 제거하는 몇 가지 방법이 있습니다:
 
-- 같은 `name`을 가지는 경로를 추가합니다. `name`이 중복될 경우, 기존 경로를 제거한 후에 경로를 추가합니다.
+- 같은 `name`을 가지는 라우트를 추가합니다. `name`이 중복될 경우, 기존 라우트를 제거한 후에 라우트를 추가합니다.
 
   ```js
   router.addRoute({ path: '/about', name: 'about', component: About })
-  // 이전에 추가된 경로를 제거합니다.
-  // 이는 그들이 동일한 이름을 가지고 있으며, 모든 경로에서 이름이 고유하기 때문입니다.
+  // 이전에 추가된 라우트를 제거합니다.
+  // 이는 그들이 동일한 이름을 가지고 있으며, 모든 라우트에서 이름이 고유하기 때문입니다.
   router.addRoute({ path: '/other', name: 'about', component: Other })
   ```
 
 - `router.addRoute()`가 반환한 콜백을 호출:
 
   ```js
   const removeRoute = router.addRoute(routeRecord)
-  removeRoute() // 경로가 존재하는 경우 제거함.
+  removeRoute() // 라우트가 존재하는 경우 제거함.
   ```
 
-  `name`이 없는 경로일 경우에 유용합니다.
-- `router.removeRoute()`에 `name` 문자열을 인자로 전달해 경로를 제거합니다.
+  `name`이 없는 라우트일 경우에 유용합니다.
+- `router.removeRoute()`에 `name` 문자열을 인자로 전달해 라우트를 제거합니다.
 
   ```js
   router.addRoute({ path: '/about', name: 'about', component: About })
-  // 경로를 제거함.
+  // 라우트를 제거함.
   router.removeRoute('about')
   ```
 
-  경로의 `name`에 `Symbol`을 사용하면, 경로간 `name`의 충돌을 피할 수 있습니다.
+  라우트의 `name`에 `Symbol`을 사용하면, 라우트간 `name`의 충돌을 피할 수 있습니다.
 
-경로가 제거되면 **모든 별칭과 자식**도 함께 제거됩니다.
+라우트가 제거되면 **모든 별칭과 자식**도 함께 제거됩니다.
 
-## 중첩 경로 추가하기 %{#adding-nested-routes}%
+## 중첩 라우트 추가하기 %{#adding-nested-routes}%
 
-중첩된 경로를 기존 경로에 추가하려면, 경로의 `name`을 첫 번째 파라미터로 `router.addRoute()`에 전달할 수 있습니다. 그러면 경로가 `children`을 통해 추가된 것처럼 간편하게 추가됩니다:
+중첩된 라우트를 기존 라우트에 추가하려면, 라우트의 `name`을 첫 번째 파라미터로 `router.addRoute()`에 전달할 수 있습니다. 그러면 라우트가 `children`을 통해 추가된 것처럼 간편하게 추가됩니다:
 
 ```js
 router.addRoute({ name: 'admin', path: '/admin', component: Admin })
@@ -107,9 +107,9 @@ router.addRoute({
 })
 ```
 
-## 존재하는 경로 찾기 %{#looking-at-existing-routes}%
+## 존재하는 라우트 찾기 %{#looking-at-existing-routes}%
 
-Vue Router는 존재하는 경로를 찾아볼 수 있도록, 두 개의 함수를 제공합니다:
+Vue Router는 존재하는 라우트를 찾아볼 수 있도록, 두 개의 함수를 제공합니다:
 
-- [`router.hasRoute()`](/api/interfaces/Router.md#hasRoute): 경로 이름을 인자로 전달하여 경로가 존재하는지 확인.
-- [`router.getRoutes()`](/api/interfaces/Router.md#getRoutes): 모든 경로 레코드를 배열로 반환.
+- [`router.hasRoute()`](/api/interfaces/Router.md#hasRoute): 라우트 이름을 인자로 전달하여 라우트가 존재하는지 확인.
+- [`router.getRoutes()`](/api/interfaces/Router.md#getRoutes): 모든 라우트 레코드를 배열로 반환.

docs/guide/advanced/lazy-loading.md

@@ -1,11 +1,11 @@
-# 경로 지연 로딩 %{#lazy-loading-routes}%
+# 라우트 지연 로딩 %{#lazy-loading-routes}%
 
 <VueSchoolLink
 href="https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only"
 title="Learn about lazy loading routes"
 />
 
-번들러를 사용하여 앱을 빌드할 때 JavaScript 번들이 상당히 커질 수 있으며 페이지 로드 시간에 영향을 줍니다. 각 경로의 컴포넌트를 별도의 청크로 분할하고, 해당 경로를 방문할 때만 로드할 수 있다면 더 효율적일 것입니다.
+번들러를 사용하여 앱을 빌드할 때 JavaScript 번들이 상당히 커질 수 있으며 페이지 로드 시간에 영향을 줍니다. 각 라우트의 컴포넌트를 별도의 청크로 분할하고, 해당 라우트를 방문할 때만 로드할 수 있다면 더 효율적일 것입니다.
 
 Vue Router는 기본적으로 [동적 가져오기](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)를 지원하므로, 정적 가져오기를 동적 가져오기로 바꿀 수 있습니다.
 
@@ -19,7 +19,7 @@ const router = createRouter({
   // ...
   routes: [
     { path: '/users/:id', component: UserDetails }
-    // 또는 경로를 정의할 때, 아래와 같이 직접 사용할 수 있음 
+    // 또는 라우트를 정의할 때, 아래와 같이 직접 사용할 수 있음 
     { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
   ],
 })
@@ -34,10 +34,10 @@ const UserDetails = () =>
   })
 ```
 
-일반적으로 모든 경로는 **항상 동적 가져오기**를 사용하는 것이 좋습니다.
+일반적으로 모든 라우트는 **항상 동적 가져오기**를 사용하는 것이 좋습니다.
 
 ::: tip
-경로에 [비동기 컴포넌트](https://vuejs.kr/guide/components/async.html)를 **사용하지 마십시오**. 비동기 컴포넌트는 여전히 경로 컴포넌트 내에서 사용할 수 있지만, 경로 컴포넌트 자체는 동적 가져오기에 불과합니다.
+라우트에 [비동기 컴포넌트](https://vuejs.kr/guide/components/async.html)를 **사용하지 마십시오**. 비동기 컴포넌트는 여전히 라우트 컴포넌트 내에서 사용할 수 있지만, 라우트 컴포넌트 자체는 동적 가져오기에 불과합니다.
 :::
 
 webpack과 같은 번들러를 사용하는 경우, 자동으로 [코드 분할](https://webpack.js.org/guides/code-splitting/)이 됩니다.
@@ -48,7 +48,7 @@ Babel을 사용하는 경우, Babel이 문법을 제대로 파싱할 수 있도
 
 ### Webpack 사용 시 %{#with-webpack}%
 
-때로는 동일한 경로 내부에 중첩된 모든 컴포넌트를 하나의 비동기 청크로 그룹화할 수 있습니다. 이를 구현하려면 특수 주석 문법으로 청크 이름을 제공하여 [명명된 청크](https://webpack.js.org/guides/code-splitting/#dynamic-imports)를 사용해야 합니다(webpack > 2.4 필요):
+때로는 동일한 라우트 내부에 중첩된 모든 컴포넌트를 하나의 비동기 청크로 그룹화할 수 있습니다. 이를 구현하려면 특수 주석 문법으로 청크 이름을 제공하여 [명명된 청크](https://webpack.js.org/guides/code-splitting/#dynamic-imports)를 사용해야 합니다(webpack > 2.4 필요):
 
 ```js
 const UserDetails = () =>