Update ko (#72)

* docs: typo (vuejs#2043)

* docs: update links to the core Vue docs (vuejs#2055)

* docs: add a guide to the RouterView slot (vuejs#2049)

* docs: use vue-html for template examples (vuejs#2056)

* chore: update sponsors

docs/.vitepress/config/ko.ts

@@ -139,6 +139,10 @@ export const koConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: '컴포지션 API',
               link: '/guide/advanced/composition-api.html',
             },
+            {
+              text: 'RouterView 슬롯',
+              link: '/guide/advanced/router-view-slot.html',
+            },
             {
               text: '트랜지션',
               link: '/guide/advanced/transitions.html',

docs/.vitepress/theme/components/sponsors.json

@@ -3,16 +3,16 @@
   "gold": [],
   "silver": [
     {
-      "href": "https://www.vuemastery.com/",
       "alt": "VueMastery",
-      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg",
-      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png"
+      "href": "https://www.vuemastery.com/",
+      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png",
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg"
     },
     {
+      "alt": "Prefect",
       "href": "https://www.prefect.io/",
-      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg",
       "imgSrcDark": "https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg",
-      "alt": "Prefect"
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg"
     }
   ],
   "bronze": [
@@ -29,10 +29,16 @@
       "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4"
     },
     {
-      "href": "https://nuxtlabs.com",
-      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/nuxt-light.svg",
-      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/nuxt-dark.svg",
-      "alt": "Nuxt Labs"
+      "alt": "Storyblok",
+      "href": "https://storyblok.com",
+      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/storyblok.png",
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/storyblok.png"
+    },
+    {
+      "alt": "Nuxt UI Pro Templates",
+      "href": "https://ui.nuxt.com/pro",
+      "imgSrcDark": "https://avatars.githubusercontent.com/u/81570812?v=4",
+      "imgSrcLight": "https://avatars.githubusercontent.com/u/81570812?v=4"
     }
   ]
 }

docs/guide/advanced/composition-api.md

@@ -5,7 +5,7 @@ href="https://vueschool.io/lessons/router-and-the-composition-api"
 title="Learn how to use Vue Router with the composition API"
 />
 
-Vue 3에서는 `setup`과 [컴포지션 API](https://vuejs.kr/guide/introduction.html#composition-api)가 도입되었습니다. 따라서 컴포넌트 내부의 탐색 가드와 `this`에서 라우터에 접근하는 기존 방식을 대체할 수 있는 몇 가지 새로운 함수를 사용할 수 있습니다.
+Vue 3에서는 `setup`과 [컴포지션 API](https://vuejs.kr/guide/extras/composition-api-faq.html)가 도입되었습니다. 따라서 컴포넌트 내부의 탐색 가드와 `this`에서 라우터에 접근하는 기존 방식을 대체할 수 있는 몇 가지 새로운 함수를 사용할 수 있습니다.
 
 ## `setup` 내부에서 라우터 및 현재 경로에 접근하기 %{#accessing-the-router-and-current-route-inside-setup}%
 

docs/guide/advanced/navigation-guards.md

@@ -264,7 +264,7 @@ beforeRouteLeave (to, from) {
 
 ### 컴포지션 API 사용 %{#using-the-composition-api}%
 
-[컴포지션 API 및 `setup` 함수](https://vuejs.kr/api/composition-api-setup.html#setup)를 사용하여 컴포넌트를 작성하는 경우, `onBeforeRouteUpdate` 및 `onBeforeRouteLeave` 가드를 추가할 수 있습니다. 참고: [가이드 - 컴포지션 API](composition-api.md#navigation-guards)
+[컴포지션 API 및 `setup` 함수](https://vuejs.kr/api/composition-api-setup.html)를 사용하여 컴포넌트를 작성하는 경우, `onBeforeRouteUpdate` 및 `onBeforeRouteLeave` 가드를 추가할 수 있습니다. 참고: [가이드 - 컴포지션 API](composition-api.md#navigation-guards)
 
 ## 전체적인 탐색 흐름 %{#the-full-navigation-resolution-flow}%
 

docs/guide/advanced/router-view-slot.md

@@ -0,0 +1,73 @@
+# RouterView 슬롯 %{#RouterView-slot}%
+
+RouterView 컴포넌트는 라우트 컴포넌트를 렌더링하는 데 사용할 수 있는 슬롯을 노출합니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <component :is="Component" />
+</router-view>
+```
+
+위의 코드는 슬롯 없이 `<router-view />`를 사용하는 것과 동일하지만, 슬롯은 다른 기능과 함께 작업할 때 추가적인 유연성을 제공합니다.
+
+## KeepAlive 및 Transition %{#KeepAlive-Transition}%
+
+[KeepAlive](https://vuejs.kr/guide/built-ins/keep-alive.html) 컴포넌트와 작업할 때 일반적으로 라우트 컴포넌트를 유지하려고 할 것이지만 RouterView 자체를 유지하려고 하지는 않을 것입니다. 이를 위해 KeepAlive를 슬롯 내에 넣으면 이를 달성할 수 있습니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <keep-alive>
+    <component :is="Component" />
+  </keep-alive>
+</router-view>
+```
+
+마찬가지로 슬롯을 사용하면 라우트 컴포넌트 간에 전환을 위해 [Transition](https://vuejs.kr/guide/built-ins/transition.html) 컴포넌트를 사용할 수 있습니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <transition>
+    <component :is="Component" />
+  </transition>
+</router-view>
+```
+
+또한 Transition 내에서 KeepAlive를 사용할 수 있습니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <transition>
+    <keep-alive>
+      <component :is="Component" />
+    </keep-alive>
+  </transition>
+</router-view>
+```
+
+Transition 컴포넌트와 함께 RouterView를 사용하는 자세한 정보는 [Transitions](./transitions) 가이드를 참조하세요.
+
+## Props 및 슬롯 전달 %{#Passing-props-and-slots}%
+
+슬롯을 사용하여 라우트 컴포넌트에 props 또는 슬롯을 전달할 수 있습니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <component :is="Component" some-prop="a value">
+    <p>Some slotted content</p>
+  </component>
+</router-view>
+```
+
+실제로 이것은 **모든 라우트 컴포넌트가 동일한 props와 슬롯을 사용해야 하는 경우가 아니라면 사용하고 싶지 않은 것이 대부분입니다.** 다른 방법으로 props를 전달하는 방법은 [라우트 컴포넌트에 Props 전달](../essentials/passing-props)를 참조하세요.
+
+## 템플릿 참조 %{#Template-refs}%
+
+슬롯을 사용하면 템플릿 참조를 라우트 컴포넌트에 직접 넣을 수 있습니다.
+
+```vue-html
+<router-view v-slot="{ Component }">
+  <component :is="Component" ref="mainContent" />
+</router-view>
+```
+
+만약 ref를 `<router-view>`에 넣는다면 ref는 라우트 컴포넌트 대신 RouterView 인스턴스로 채워질 것입니다.

docs/guide/advanced/transitions.md

@@ -1,13 +1,13 @@
-# 트랜지션 %{#transitions}%
+# 트랜지션 %{#Transitions}%
 
 <VueSchoolLink
 href="https://vueschool.io/lessons/route-transitions"
 title="Learn about route transitions"
 />
 
-경로 컴포넌트에서 트랜지션을 사용하고 탐색에 애니메이션을 적용하려면, v-slot API를 사용해야 합니다:
+라우트 컴포넌트에 트랜지션을 사용하고 탐색에 애니메이션을 적용하려면, [`<RouterView>` 슬롯](./router-view-slot)을 사용해야 합니다.
 
-```html
+```vue-html
 <router-view v-slot="{ Component }">
   <transition name="fade">
     <component :is="Component" />
@@ -17,7 +17,7 @@ title="Learn about route transitions"
 
 모든 트랜지션 API 작동은 [이곳](https://vuejs.kr/guide/built-ins/transition.html)에서 설명하는 것과 같습니다.
 
-## 라우트 별 트랜지션 %{#per-route-transition}%
+## 라우트 별 트랜지션 %{#Per-Route-Transition}%
 
 위 예제는 모든 경로에 동일한 트랜지션을 적용합니다. 각 경로의 컴포넌트가 서로 다른 트랜지션을 갖도록 하려면, [메타 필드](meta.md)와 `<transition>`의 `name`을 동적으로 조합해 사용하면 됩니다:
 
@@ -36,7 +36,7 @@ const routes = [
 ]
 ```
 
-```html
+```vue-html
 <router-view v-slot="{ Component, route }">
   <!-- 커스텀 트랜지션 또는 `fade`를 사용 -->
   <transition :name="route.meta.transition || 'fade'">
@@ -45,11 +45,11 @@ const routes = [
 </router-view>
 ```
 
-## 경로 기반 동적 트랜지션 %{#route-based-dynamic-transition}%
+## 경로 기반 동적 트랜지션 %{#Route-Based-Dynamic-Transition}%
 
 대상 경로와 현재 경로 간의 관계를 기반으로, 사용할 트랜지션을 동적으로 설정할 수도 있습니다. 이전 예제 코드와 매우 유사합니다:
 
-```html
+```vue-html
 <!-- 동적인 트랜지션의 name 사용 -->
 <router-view v-slot="{ Component, route }">
   <transition :name="route.meta.transition">
@@ -68,11 +68,11 @@ router.afterEach((to, from) => {
 })
 ```
 
-## 재사용된 뷰에서 강제로 트랜지션 %{#forcing-a-transition-between-reused-views}%
+## 재사용된 뷰에서 강제로 트랜지션 %{#Forcing-a-transition-between-reused-views}%
 
 Vue는 동일한 컴포넌트를 자동으로 재사용하여 트랜지션이 작동하지 않을 수 있습니다. 다행히도 [`key`](https://vuejs.kr/api/built-in-special-attributes.html#key) 속성을 추가해 강제로 트랜지션을 트리거 하는 것이 가능합니다. 이렇게 하면 경로를 유지하면서 파라미터 변경에 의한 트랜지션을 구현할 수 있습니다:
 
-```vue
+```vue-html
 <router-view v-slot="{ Component, route }">
   <transition name="fade">
     <component :is="Component" :key="route.path" />

docs/guide/essentials/named-routes.md

@@ -1,4 +1,4 @@
-# 이름이 있는 경로 %{#named-routes}%
+# 이름이 있는 경로 %{#Named-Routes}%
 
 <VueSchoolLink
 href="https://vueschool.io/lessons/named-routes"
@@ -24,7 +24,7 @@ const routes = [
 
 `<router-link>` 컴포넌트의 `to`에 객체를 전달해 이름이 있는 경로에 연결할 수 있습니다.
 
-```html
+```vue-html
 <router-link :to="{ name: 'user', params: { username: 'erina' }}">
   유저 링크!
 </router-link>

docs/guide/essentials/named-views.md

@@ -1,4 +1,4 @@
-# 이름이 있는 뷰 %{#named-views}%
+# 이름이 있는 뷰 %{#Named-Views}%
 
 <VueSchoolLink
 href="https://vueschool.io/lessons/vue-router-4-named-views"
@@ -7,7 +7,7 @@ title="Learn how to use named views"
 
 때로는 여러 뷰(view)를 중첩하지 않고, 동시에 표시해야 합니다(예: 사이드바와 메인 뷰가 있는 레이아웃). 이럴 때는 이름이 있는 뷰를 사용하면 유용합니다. "결과를 노출할 수단"(이하 아울렛)으로 하나의 뷰를 사용하는 것보다, 여러 개의 아울렛 뷰 각각에 이름을 지정해 사용하는 것입니다. 이름이 지정되지 않은 `<router-view>`는 기본 값으로 `default`라는 이름을 가집니다.
 
-```html
+```vue-html
 <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
 <router-view class="view main-content"></router-view>
 <router-view class="view right-sidebar" name="RightSidebar"></router-view>
@@ -37,7 +37,7 @@ const router = createRouter({
 
 참고: [예제](https://codesandbox.io/s/named-views-vue-router-4-examples-rd20l)
 
-## 중첩된 이름이 있는 뷰 %{#nested-named-views}%
+## 중첩된 이름이 있는 뷰 %{#Nested-Named-Views}%
 
 중첩된 뷰와 명명된 뷰를 사용하여 복잡한 레이아웃을 만들 수 있습니다. 이 때 중첩된 `router-view`에 이름도 지정해야 합니다. 유저 세팅 패널을 예로 들어 보겠습니다:
 
@@ -61,7 +61,7 @@ const router = createRouter({
 
 위 레이아웃의 `<UserSettings />` 컴포넌트 템플릿은 다음과 같습니다:
 
-```html
+```vue-html
 <!-- UserSettings.vue -->
 <div>
   <h1>사용자 설정</h1>

docs/guide/essentials/passing-props.md

@@ -1,4 +1,4 @@
-# 경로 컴포넌트에 props 전달하기 %{#passing-props-to-route-components}%
+# 경로 컴포넌트에 props 전달하기 %{#Passing-Props-to-Route-Components}%
 
 <VueSchoolLink
 href="https://vueschool.io/lessons/route-props"
@@ -29,11 +29,11 @@ const routes = [{ path: '/user/:id', component: User, props: true }]
 
 이렇게 하면 어디에서나 컴포넌트를 더 쉽게 재사용하고 테스트할 수 있습니다.
 
-## 불리언 모드 %{#boolean-mode}%
+## 불리언 모드 %{#Boolean-mode}%
 
 경로의 `props`가 `true`로 설정되면, `route.params`가 컴포넌트의 props로 설정됩니다.
 
-## 이름이 있는 뷰 %{#named-views}%
+## 이름이 있는 뷰 %{#Named-views}%
 
 이름이 있는 뷰가 있는 경로의 경우, 이름이 있는 뷰 각각에 `props` 옵션을 정의해야 합니다:
 
@@ -47,7 +47,7 @@ const routes = [
 ]
 ```
 
-## 객체 모드 %{#object-mode}%
+## 객체 모드 %{#Object-mode}%
 
 `props`가 객체인 경우, 이는 그대로 컴포넌트의 props로 설정됩니다. Props가 정적일 때 유용합니다.
 
@@ -61,7 +61,7 @@ const routes = [
 ]
 ```
 
-## 함수 모드 %{#function-mode}%
+## 함수 모드 %{#Function-mode}%
 
 Props를 반환하는 함수를 만들 수 있습니다. 이를 통해 파라미터를 다른 유형으로 캐스팅하고, 정적 값을 경로 기반의 값과 결합하는 등의 작업을 수행할 수 있습니다.
 
@@ -79,17 +79,17 @@ const routes = [
 
 경로가 변경될 때만 `props`를 정의하는 함수가 평가되므로, 상태가 변경될 때도 반응하는 `props`를 전달하려면, 함수 내부에 상태를 사용하는 대신, 래퍼 컴포넌트를 사용해 계산된 속성(`computed`)을 `props`로 전달해야 합니다.
 
-## RouterView에서 직접 %{#via-routerview}%
+## RouterView에서 직접 %{#Via-RouterView}%
 
-`<RouterView>`를 통해 직접 props를 전달할 수도 있습니다:
+또한 [`<RouterView>` 슬롯](../advanced/router-view-slot)을 통해 어떤 props도 전달할 수 있습니다:
 
 ```vue-html
 <RouterView v-slot="{ Component }">
   <component
     :is="Component"
     view-prop="value"
    />
-</RouterView
+</RouterView>
 ```
 
 ::: 경고