초벌번역

Author: narusas

ko-KR/src/guide/reusability/plugins.md

@@ -55,6 +55,13 @@ export default {
 우리는 앱 전체에서 사용할 수 있는 키를 번역하는 기능을 만들고자 하므로 `app.config.globalProperties`를 사용하여 이를 노출할 것입니다.
 이 함수는 점으로 구분된 `key` 문자열을 수신하며, 커스텀 옵션에서 번역된 문자열을 찾는 데 사용할 것입니다.
 
+```vue-html
+<h1>{{ $translate('greetings.hello') }}</h1>
+```
+
+이 함수는 모든 템플릿에서 전역적으로 사용할 수 있어야 하므로 플러그인의 `app.config.globalProperties`에 이 함수를 첨부하여 그렇게 만들겠습니다:
+
+
 ```js{4-11}
 // plugins/i18n.js
 export default {
@@ -71,7 +78,9 @@ export default {
 }
 ```
 
-플러그인은 사용자가 플러그인을 사용할 때 옵션을 통해 번역된 키가 포함된 객체를 전달할 것으로 예상하므로 다음과 같이 사용해야 합니다:
+`$translate` 함수는 `greetings.hello`와 같은 문자열을 받아 사용자가 제공한 구성을 살펴본 후 번역된 값을 반환합니다.
+
+번역된 키가 포함된 객체는 설치 중에 `app.use()`에 대한 추가 매개 변수를 통해 플러그인에 전달되어야 합니다:
 
 ```js
 import i18nPlugin from './plugins/i18n'
@@ -83,8 +92,7 @@ app.use(i18nPlugin, {
 })
 ```
 
-우리의 `$translate` 함수는 `greetings.hello`와 같은 문자열을 사용하여 사용자가 제공한 구성을 살펴보고 번역된 값을 반환합니다.
-이 경우에는 `Bonjour!`입니다.
+이제 초기 표현식 `$translate('greetings.hello')`는 런타임에 `Bonjour!`로 대체됩니다.
 
 ```vue-html
 <h1>{{ $translate('greetings.hello') }}</h1>

ko-KR/src/guide/scaling-up/TestingApiSwitcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 const activeId = ref('vtu-api')
 
 const testingLangs = [
@@ -14,9 +14,8 @@ const testingLangs = [
   {
     label: 'Testing Library',
     className: 'testing-library-api'
-  },
+  }
 ]
-
 </script>
 
 <template>
@@ -31,7 +30,7 @@ const testingLangs = [
       >{{ lang.label }}</div>
     </div>
     <div class="code-example">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>
@@ -44,7 +43,7 @@ const testingLangs = [
   flex-direction: column;
 }
 
-.code-example :slotted([class*=language]) {
+.code-example :slotted([class*='language']) {
   margin-top: 0;
   border-top-left-radius: 0;
 }
@@ -57,19 +56,15 @@ const testingLangs = [
 .tab {
   color: white;
   background: #292d3ef0;
-  border-bottom-color: rgba(255,255,255,0.3);
+  border-bottom-color: rgba(255, 255, 255, 0.3);
   padding: 6px 24px;
   border-width: 2px;
   border-style: solid;
   border-top: transparent;
   border-right: transparent;
   border-left: transparent;
   cursor: pointer;
-  transition: border, background-color .2s;
-    transition-property: border, background-color;
-    transition-duration: 0.2s, 0.2s;
-    transition-timing-function: ease, ease;
-    transition-delay: 0s, 0s;
+  transition: border 0.2s, background-color 0.2s;
 }
 
 .tab.active {
@@ -102,7 +97,7 @@ const testingLangs = [
 }
 
 :global(.dark .testing-code-examples .tab:not(.active)) {
-  border-bottom: 2px solid rgba(255,255,255,.2);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
   background: #2f2f2f;
   color: inherit;
 }
@@ -112,7 +107,7 @@ const testingLangs = [
 }
 
 /* Show/Hide logic for codeblocks */
-:slotted([class$="api"]) {
+:slotted([class$='api']) {
   display: none;
 }
 
@@ -121,5 +116,4 @@ const testingLangs = [
 .prefers-vtu-api :slotted(.vtu-api) {
   display: block;
 }
-
 </style>

ko-KR/src/guide/scaling-up/routing.md

@@ -1,4 +1,11 @@
 # 라우팅 {#routing}
+## 클라이언트 측 라우팅과 서버 측 라우팅 비교 {#client-side-vs-server-side-routing}
+
+서버 측에서의 라우팅은 서버가 사용자가 방문한 URL 경로를 기반으로 응답을 전송하는 것을 의미합니다. 기존 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 HTML 응답을 수신하고 새 HTML로 전체 페이지를 다시 로드합니다.
+
+그러나 [싱글 페이지 애플리케이션](https://developer.mozilla.org/en-US/docs/Glossary/SPA)(SPA)에서는 클라이언트 측 자바스크립트가 탐색을 가로채고 새 데이터를 동적으로 가져와 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할 수 있습니다. 이는 일반적으로 사용자가 오랜 시간 동안 많은 상호 작용을 수행해야 하는 실제 "애플리케이션"과 유사한 사용 사례에서 보다 빠른 사용자 경험을 제공합니다.
+
+이러한 SPA에서 '라우팅'은 브라우저의 클라이언트 측에서 수행됩니다. 클라이언트 측 라우터는 [히스토리 API](https://developer.mozilla.org/en-US/docs/Web/API/History) 또는 [`hashchange` 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event)와 같은 브라우저 API를 사용하여 애플리케이션의 렌더링된 View를 관리할 책임이 있습니다.
 
 ## 공식 라우터 {#official-router}
 

ko-KR/src/guide/scaling-up/sfc.md

@@ -5,6 +5,9 @@
 Vue 싱글 파일 컴포넌트(Single-File Components: **SFC**, 일명 `*.vue` 파일)는 컴포넌트의 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식입니다.
 다음은 SFC 파일의 예입니다:
 
+
+<div class="options-api">
+
 ```vue
 <script>
 export default {
@@ -27,6 +30,31 @@ export default {
 }
 </style>
 ```
+``
+
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const greeting = ref('Hello World!')
+</script>
+
+<template>
+  <p class="greeting">{{ greeting }}</p>
+</template>
+
+<style>
+.greeting {
+  color: red;
+  font-weight: bold;
+}
+</style>
+```
+
+</div>
 
 보시다시피 Vue SFC는 HTML, CSS 및 JavaScript 이 3개를 하나로 자연스럽게 합친 것입니다.
 `<template>`, `<script>` 및 `<style>` 블록은 하나의 파일에서 컴포넌트의 뷰, 로직 및 스타일을 캡슐화하고 배치합니다.
@@ -38,7 +66,7 @@ SFC 사용을 위해서는 빌드 방식을 따라야 하지만 다음과 같은
 
 - 친숙한 HTML, CSS 및 JavaScript 문법을 사용하여 모듈화된 컴포넌트 작성
 - [본질적으로 사용 목적에 따라 구성됨](#why-sfc)
-- 사전 컴파일된 템플릿
+- 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿
 - [컴포넌트 범위 CSS](/api/sfc-css-features)
 - [컴포지션 API로 작업할 때 더욱 인체공학적인 문법](/api/sfc-script-setup)
 - 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 더욱 더최적화

ko-KR/src/guide/scaling-up/ssr.md

@@ -287,7 +287,7 @@ server.get('/', (req, res) => {
 ### Vite SSR {#vite-ssr}
 
 Vite는 내장된 [Vue 서버 사이드 렌더링 지원](https://vitejs.dev/guide/ssr.html)을 제공하지만 의도적으로 저수준입니다.
-Vite를 직접 사용하고 싶다면 [vite-plugin-ssr](https://vite-plugin-ssr.com/)을 확인하십시오.
+Vite를 직접 사용하고 싶다면 [vite-plugin-ssr](https://github.com/vitejs/vite-plugin-vue/tree/main/playground/ssr-vue)을 확인하십시오.
 커뮤니티 플러그인은 많은 어려운 세부 사항을 추상화해 줍니다.
 
 [여기](https://github.com/vitejs/vite/tree/main/playground/ssr-vue)에서 수동 설정을 사용하는 Vue + Vite SSR 프로젝트의 예를 찾을 수도 있습니다.
@@ -378,9 +378,9 @@ Pinia와 같은 상태 관리 라이브러리는 이를 염두에 두고 설계
 
 ### 하이드레이션 불일치(Hydration Mismatch) {#hydration-mismatch}
 
-미리 렌더링된 HTML의 DOM 구조가 클라이언트 측 앱의 예상 출력과 일치하지 않으면 하이드레이션 불일치 에러가 발생합니다.
-대부분의 경우 이는 HTML 문자열에서 잘못된 구조를 수정하려는 브라우저의 기본 HTML 구문 분석 동작으로 인해 발생합니다.
-예를 들어 일반적인 문제는 [`<div>`를 `<p>`](https://stackoverflow.com/questions/8397852/why-cant-the-p-tag-contain-a-div-tag-inside-it) 안에 넣을 수 없다는 것입니다:
+미리 렌더링된 HTML의 DOM 구조가 클라이언트 측 앱의 예상 출력과 일치하지 않으면 하이드레이션 불일치 오류가 발생합니다. 하이드레이션 불일치는 다음과 같은 원인으로 인해 가장 일반적으로 발생합니다:
+
+1. 템플릿에 잘못된 HTML 중첩 구조가 포함되어 있고 브라우저의 기본 HTML 구문 분석 동작에 의해 렌더링된 HTML이 "수정"된 경우입니다. 예를 들어, [`<div>`를 `<p>` 안에 넣을 수 없다](https://stackoverflow.com/questions/8397852/why-cant-the-p-tag-contain-a-div-tag-inside-it) 는 것이 일반적인 문제입니다. 
 
 ```html
 <p><div>hi</div></p>
@@ -394,9 +394,15 @@ Pinia와 같은 상태 관리 라이브러리는 이를 염두에 두고 설계
 <p></p>
 ```
 
-Vue는 하이드레이션 불일치가 발생하면 클라이언트 측 상태와 일치하도록 미리 렌더링된 DOM을 자동으로 복구하고 조정하려고 시도합니다.
-이로 인해 잘못된 노드가 삭제되고 새 노드가 마운트되어 렌더링 성능이 약간 저하되지만 대부분의 경우 앱은 예상대로 계속 작동해야 합니다.
-즉, 개발 중에 하이드레이션 불일치를 제거하는 것이 가장 좋습니다.
+2. 렌더링 중에 사용되는 데이터에는 무작위로 생성된 값이 포함됩니다. 동일한 애플리케이션이 서버에서 한 번, 클라이언트에서 한 번 두 번 실행되므로 두 실행 간에 무작위 값이 동일하다고 보장할 수 없습니다. 무작위 값으로 인한 불일치를 방지하는 방법에는 두 가지가 있습니다:
+
+   1. `v-if` + `onMounted`를 사용하여 무작위 값에 의존하는 부분을 클라이언트에서만 렌더링합니다. 프레임워크에 이 작업을 더 쉽게 할 수 있는 기능이 내장되어 있을 수도 있습니다(예: VitePress의 `<ClientOnly>` 컴포넌트).
+
+   2. 시드 생성을 지원하는 난수 생성기 라이브러리를 사용하고, 서버 실행과 클라이언트 실행이 동일한 시드를 사용하도록 보장합니다(예: 시드를 직렬화된 상태로 포함하고 클라이언트에서 검색하는 방식).
+
+3. 서버와 클라이언트가 서로 다른 시간대에 있는 경우. 타임스탬프를 사용자의 현지 시간으로 변환해야 하는 경우가 있습니다. 그러나 서버 실행 중 시간대와 클라이언트 실행 중 시간대가 항상 같은 것은 아니며, 서버 실행 중 사용자의 시간대를 안정적으로 알 수 없을 수도 있습니다. 이러한 경우 현지 시간 변환은 클라이언트 전용 작업으로 수행해야 합니다.
+
+Vue에서 하이드레이션 불일치가 발생하면 클라이언트 측 상태와 일치하도록 사전 렌더링된 DOM을 자동으로 복구하고 조정하려고 시도합니다. 이로 인해 잘못된 노드가 삭제되고 새 노드가 마운트되어 렌더링 성능이 약간 저하될 수 있지만 대부분의 경우 앱은 예상대로 계속 작동합니다. 그렇긴 하지만 개발 중에 하이드레이션 불일치를 제거하는 것이 가장 좋습니다.
 
 ### 커스텀 디렉티브 {#custom-directives}
 

ko-KR/src/guide/scaling-up/testing.md

@@ -135,12 +135,6 @@ Vue 앱에 특별한 함수의 한 범주인 [컴포저블](/guide/reusability/c
   [Vitest](https://vitest.dev/)는 이러한 목적을 위해 특별히 설계된 단위 테스트 프레임워크로 Vue/Vite 팀이 만들고 유지 관리합니다.
   최소한의 노력으로 Vite 기반 프로젝트와 통합되며, 매우 빠릅니다.
 
-:::warning 현재 개발 중
-Vitest는 비교적 새롭고 여전히 빠른 개발을 진행 중입니다. 아직 안정적인 것으로 간주되지는 않지만 팀은 프로덕션 준비 상태로 만들기 위해 열심히 노력하고 있습니다.
-Vitest는 비교적 새로운 것이고 여전히 빠르게 발전하고 있습니다.
-아직 안정적이지 않다고 여겨지지만, 프로덕션 준비 상태로 만들기 위해 열심히 노력하고 있습니다.
-:::
-
 ### 다른 선택지 {#other-options}
 
 - [Peeky](https://peeky.dev/)는 최고의 Vite 통합 기능을 갖춘 또 다른 빠른 단위 테스트 러너입니다.
@@ -185,14 +179,12 @@ Vue 앱의 대부분은 컴포넌트 테스트로 다루어야 하며, 각 Vue 
 <div class="testing-library-api">
 
 ```js
-render(Stepper, {
+const { getByText } = render(Stepper, {
   props: {
     max: 1
   }
 })
 
-const { getByText } = render(Component)
-
 getByText('0') // "0"이 컴포넌트 내에 있어야 함
 
 const button = getByText('increment')

ko-KR/src/guide/scaling-up/tooling.md

@@ -28,7 +28,7 @@ Vite + Vue를 시작하려면 다음을 실행하기만 하면 됩니다:
 이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 [create-vue](https://github.com/vuejs/create-vue)를 설치하고 실행합니다.
 
 - Vite에 대한 자세한 내용은 [Vite 문서](https://vitejs.dev)를 확인하세요.
-- Vite 프로젝트에서 Vue 관련 동작을 구성하려면(예: Vue 컴파일러에 옵션 전달) [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme) 문서를 확인하세요.
+- Vite 프로젝트에서 Vue 관련 동작을 구성하려면(예: Vue 컴파일러에 옵션 전달) [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme) 문서를 확인하세요.
 
 위에서 언급한 두 온라인 연습장는 Vite 프로젝트 파일로 다운로드를 지원합니다.
 
@@ -100,7 +100,7 @@ Vue 브라우저 개발자 도구 확장 프로그램을 사용하면, Vue 앱
 
 - [Volar](https://github.com/johnsoncodehk/volar)는 템플릿 표현식 및 교차 컴포넌트 props 유효성 검사를 포함하여 `<script lang="ts">` 블록을 사용하여 SFC에 대한 유형 검사를 제공합니다.
 
-- 명령줄에서 동일한 유형 검사를 수행하거나 SFC용 `d.ts` 파일을 생성하려면 [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)를 사용합니다.
+- 명령줄에서 동일한 유형 검사를 수행하거나 SFC용 `d.ts` 파일을 생성하려면 [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/vue-language-tools/vue-tsc)를 사용합니다.
 
 ## 테스팅 {#testing}
 
@@ -145,7 +145,7 @@ Vue 팀은 SFC별 린팅 규칙을 지원하는 [ESLint](https://eslint.org/) 
 
 - Vite를 사용하는 경우,
   일치하는 커스텀 블록을 실행 가능한 JavaScript로 변환하려면,
-  커스텀 Vite 플러그인을 사용해야 합니다. [예제](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks)
+  커스텀 Vite 플러그인을 사용해야 합니다. [예제](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks)
 
 - Vue CLI 또는 일반 웹팩을 사용하는 경우,
   일치하는 블록을 변환하도록 웹팩 로더를 구성해야 합니다. [예제](https://vue-loader.vuejs.org/guide/custom-blocks.html)
@@ -167,7 +167,7 @@ Vue 팀은 SFC별 린팅 규칙을 지원하는 [ESLint](https://eslint.org/) 
 
 ### `@vitejs/plugin-vue` {#vitejs-plugin-vue}
 
-- [Docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue)
+- [Docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)
 
 Vite에서 Vue SFC 지원을 제공하는 공식 플러그인입니다.