Update ko (#53)

* fix: change redirection link (#2615) * fix(composables): useFetch() playground example (#2659) * docs: add explanation for scoped slots with render functions (#2670) * add more details for watcher flush timing * style: update event-handling.md avoid horizontal scrolling (#2678)
vuejs-translations · Jan 29, 2024 · e529cb6 · e529cb6 · vercel · Jan 29, 2024
1 parent eae0ce5
commit e529cb6
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 10 deletions.
diff --git a/src/about/team/members-core.json b/src/about/team/members-core.json
@@ -320,7 +320,7 @@
       },
       {
         "label": "vuequery",
-        "url": "https://github.com/vuequery"
+        "url": "https://github.com/phanan/vuequery"
       },
       {
         "label": "vue-google-signin-button",

diff --git a/src/guide/essentials/event-handling.md b/src/guide/essentials/event-handling.md
@@ -256,8 +256,9 @@ methods: {
 `.capture`, `.once` 및 `.passive` 수식어는 [네이티브 `addEventListener` 메서드의 옵션](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)을 반영합니다:
 
 ```vue-html
-<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
-<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, 여기에서 먼저 핸들러가 실행됩니다. -->
+<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용           -->
+<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, -->
+<!-- 여기에서 먼저 핸들러가 실행됩니다.                -->
 <div @click.capture="doThis">...</div>
 
 <!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->

diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md
@@ -351,14 +351,17 @@ watchEffect(async () => {
 
 반응형 상태를 변경하면 Vue 컴포넌트 업데이트와 사용자가 만든 감시자 콜백이 모두 실행됩니다.
 
-기본적으로 개발자가 생성한 감시자 콜백은 Vue 컴포넌트가 **업데이트되기 전**에 실행됩니다.
-따라서 감시자 콜백 내에서 DOM에 접근하면 DOM이 Vue에 의해 업데이트되기 전의 상태입니다.
+컴포넌트 업데이트와 유사하게, 사용자가 만든 감시자(watcher) 콜백은 중복 호출을 방지하기 위해 일괄 처리됩니다. 예를 들어, 감시하고 있는 배열에 동기적으로 천 개의 항목을 푸시할 때 감시자가 천 번 실행되는 것을 원하지 않을 것입니다.
 
-Vue에 의해 업데이트된 후 의 DOM을 감시자 콜백에서 접근하려면, `flush: 'post'` 옵션을 지정해야 합니다:
+기본적으로, 감시자의 콜백은 부모 컴포넌트 업데이트가 있을 경우 **이후에** 호출되고, 소유 컴포넌트의 DOM 업데이트 **이전에** 호출됩니다. 이는 감시자 콜백 내에서 소유 컴포넌트의 DOM에 접근하려고 할 때, DOM이 업데이트 전 상태에 있을 것임을 의미합니다.
+
+### 후처리 감시자 {#post-watchers}
+
+Vue가 업데이트한 후에 감시자 콜백에서 소유 컴포넌트의 DOM에 접근하고자 한다면, `flush: 'post'` 옵션을 지정해야 합니다:
 
 <div class="options-api">
 
-```js
+```js{6}
 export default {
   // ...
   watch: {
@@ -374,7 +377,7 @@ export default {
 
 <div class="composition-api">
 
-```js
+```js{2,6}
 watch(source, callback, {
   flush: 'post'
 })
@@ -452,9 +455,57 @@ count.value++
 
 </div>
 
+### 동기적 감시자 {#sync-watchers}
+
+Vue에서 동기적으로 실행되는 감시자(watcher)를 만드는 것도 가능합니다. 이 감시자는 Vue가 관리하는 업데이트 이전에 동기적으로 발동됩니다:
+
+<div class="options-api">
+
+```js{6}
+export default {
+  // ...
+  watch: {
+    key: {
+      handler() {},
+      flush: 'sync'
+    }
+  }
+}
+```
+
+</div>
+
+<div class="composition-api">
+
+```js{2,6}
+watch(source, callback, {
+  flush: 'sync'
+})
+
+watchEffect(callback, {
+  flush: 'sync'
+})
+```
+
+동기적 `watchEffect()`는 또한 `watchSyncEffect()`라는 편리한 별칭도 가지고 있습니다:
+
+```js
+import { watchSyncEffect } from 'vue'
+
+watchSyncEffect(() => {
+  /* 반응형 데이터 변경 시 동기적으로 실행됨 */
+})
+```
+
+</div>
+
+:::warning 주의해서 사용하세요
+동기적 감시자는 배치 처리가 없으며, 반응형 변경이 감지될 때마다 트리거됩니다. 간단한 boolean 값들을 감시하는 데 사용하는 것은 괜찮지만, 예를 들어 배열과 같이 동기적으로 여러 번 변경될 수 있는 데이터 소스에는 사용을 피해야 합니다.
+:::
+
 <div class="options-api">
 
-## `this.$watch()` \*
+## `this.$watch()` \* #{#this-watch}
 
 [`$watch()` 인스턴스 메서드](/api/component-instance.html#watch)를 사용하여 감시자를 선언적으로 생성할 수도 있습니다.
 

diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
@@ -578,6 +578,41 @@ JSX 동등 코드:
 
 슬롯을 함수로 전달하면 자식 컴포넌트에서 지연 호출될 수 있습니다. 이를 통해 슬롯의 종속성은 부모가 아닌 자식에 의해 추적되며, 더 정확하고 효율적인 업데이트가 이루어집니다.
 
+### 범위 지정 슬롯 {#scoped-slots}
+
+부모 컴포넌트에서 범위 지정 슬롯을 렌더링하려면, 자식 컴포넌트에 슬롯이 전달됩니다. 이제 슬롯이 `text`라는 매개변수를 가지고 있음에 주목하세요. 이 슬롯은 자식 컴포넌트에서 호출되며 자식 컴포넌트의 데이터가 부모 컴포넌트로 전달됩니다.
+
+```js
+// 부모 컴포넌트
+export default {
+  setup() {
+    return () => h(MyComp, null, {
+      default: ({ text }) => h('p', text)
+    })
+  }
+}
+```
+
+슬롯이 속성(props)으로 취급되지 않도록 `null`을 전달하는 것을 잊지 마세요.
+
+```js
+// 자식 컴포넌트
+export default {
+  setup(props, { slots }) {
+    const text = ref('hi')
+    return () => h('div', null, slots.default({ text: text.value }))
+  }
+}
+```
+
+JSX와 동등:
+
+```jsx
+<MyComponent>{{
+  default: ({ text }) => <p>{ text }</p>
+}}</MyComponent>
+```
+
 ### 내장 컴포넌트 {#built-in-components}
 
 `<KeepAlive>`, `<Transition>`, `<TransitionGroup>`, `<Teleport>`, `<Suspense>`과 같은 [내장 컴포넌트](/api/built-in-components)는 렌더 함수에서 사용하기 위해 가져와야 합니다:

diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md
@@ -260,7 +260,7 @@ export function useFetch(url) {
 
 이 버전의 `useFetch()`는 이제 정적 URL 문자열, ref, getter를 받아들이므로 훨씬 더 유연합니다. watch 효과는 즉시 실행되며, `toValue(url)` 중에 접근한 모든 의존성을 추적합니다. 추적된 의존성이 없는 경우 (예: url이 이미 문자열인 경우) 효과는 한 번만 실행됩니다; 그렇지 않으면 추적된 의존성이 변경될 때마다 다시 실행됩니다.
 
-다음은 인공적인 지연과 데모 목적으로 무작위 오류가 있는 [useFetch()의 업데이트 된 버전](https://play.vuejs.org/#eNp9Vdtu40YM/RVWL1ZQr5RF0JfAMXpLgRZtd5Fu90kvY4mKJ5FnhLnYMQz/+5IcSZF3g30IbPNyyHPIYU7ZL31f7CNmt9nK1073ATyG2K8ro3e9dQFO4LBdQm13fQzYwBlaZ3ewoKTFLCh6/ANDvZ38RTmaiidPkZWprfEBNsrj/66DO1hsQ+j9bVk+eWv6TtW4tV2DrgjHXte2wYKKlsE21pcEkNJ1Q5nUUb54v7gajVHwxhbz/Aru1lOhHymn2KsuIsWPGSdoVFBLQOeso57vJgI5gc0CHQZ3JHfCPFUGJjimQH1dGt6T5VyZVZnUJB3pR8Ad8QtIvwD+tqqB3gqXWzasNjEEa2D/rrXurso0aAM/VRn8XHe6fmYLk9ZVtj6dQMP5vCpTiqBXYdXoPWXrlkKFEEUyMEH36w+29z/AvfBEIhVNQIfNLRCWBBc79F49ouDy4CVx6GlqQXQg3Af+nNWn0JLKp2+pD+w8pmZYY8r5nT6gI9pcdtU7ZB7sSyXp95sYa1ZKm8eiKEb/qpykzJbZbMFofy/39aDIcd+2WIclBPtZ5nO5u5XBF0lpo6mDJrYXO5CGnbZAmk17Z2LH+zF60gJ95eK/WQO58kdTz1cIoCwphZ4a+EBsYIM0e4SWqwvlFMV1p91i+GROc/vWPoe23R4hbFEeRwrlLrbOGht9dwRvQYeFh+BU/UwPW3lQE0CDPZqG9uUIm+MFFyE4sifspOzdqPHwfF674eczcBZk5YJuda1VR0U6dQTqVpmGxpJWl+ULAOqgdICgd2jjUJTNBBANa30FB911/DyjM8KTrANP3SZmim38QIbSlsLcQfukS4oVlA1nM5DI8E77gUAYb4AngqkjmRCTFLZ8KAT9YlApkrJoMa0ZFTtDzTJCjsNqfTtJHCL54yxHCEaGXx0sOTKVeUPPykzrPKmX6g1IBg/wkZ4B6ZDnw6IsyflE051vKC3npwHgYnPp3rWQ/6PCtkiDI+8aroubGS0uJsAjeabPb/oyhEvm3I+cp3zxkBZBfi2uXlMHWZZwc30tVhbnTBcgeJpQqx9FaLoBgl5l/J9Ad+g+9KyDrzK6dsNIM9V19vCX2IKLuBzt9Rbr5zfsT/6FbVX2kd+r22OVTb6g3COG5L7/7198oe+Tc2eb2FH0d5wPLFLkHlPYr9E01PYsTrr9Uy4bnYVP/v4loPEjKW5U5JD4KqO79tt3qL+2e1PcSB6reP4CbzCltA==)입니다.
+다음은 인공적인 지연과 데모 목적으로 무작위 오류가 있는 [useFetch()의 업데이트 된 버전](https://play.vuejs.org/#eNp9Vdtu20YQ/ZUpUUA0qpAOjL4YktCbC7Rom8BN8sSHrMihtfZql9iLZEHgv2dml6SpxMiDIWkuZ+acmR2fs1+7rjgEzG6zlaut7Dw49KHbVFruO2M9nMFiu4Ta7LvgsYEeWmv2sKCkxSwoOPwTfb2b/EU5mopHR5GVro12HrbC4UerYA2Lnfeduy3LR2d0p0SNO6MatIU/dbI2DRZUtPSmMa4kgJQuG8qkjvLF28XVaAwRb2wxz69gvZkK/UQ5xUGogBQ/ZpyhEV4sAa01lnpeTwRyApsFWvT2RO6Eea40THBMgfq6NLwlS1/pVZnUJB3ph8c98fNIvwD+MaKBzkQut2xYbYP3RsPhTWvsusokSA0/Vxn8UitZP7GFSX/+8Sz7z1W2OZ9BQt+vypQXS1R+1cgDQciW4iMrimR0wu8270znfoC7SBaJWdAeLTa3QFgxuNijc+IBIy5PPyYOjU19RDEI954/Z/UptKTy6VvqA5XD1AwLTTl/0Aco4s5lV51F5sG+VJJ+v4qxYbmkfiiKYvSvyknPbJnNtoyW+HJpj4Icd22LtV+CN5/ikC4XuNL4HFPaoGsvie3FIqSJp1WIzabl00HxkoyetEVfufhv1kAu3EnX8z0CKEtKofcGzhMb2CItAELL1SPlFMV1pwVj+GROc/vWPoc26oDgdxhfSArlLnbWaBOcOoEzIP3CgbeifqLXLRyICaDBDnVD+3KC7emCSyQ4sifspOx61Hh4Qy/d8BsaOEdkYb1sZS2FoiJKnIC6FbqhsaTVZfk8gDgK6cHLPZowFGUzAQTNWl/BUSrFbzRYHXmSdeAp28RMsI0fyFDaUJg9Spd0SbERZcvZDBRleCPdQMCPh8ARwdRRnBCTjGz5WkT0i0GlSMqixTR6VKyHmmWEHIfV+naSOETyRx8vEYwMv7pa8dJU+hU9Kz2t86ReqjcgaTzCe3oGpEOeD4uyJOcjTXe+obScHwaAi82lo9dC/q/wuyINjrwbuC5uZrS4WAQeyTN9ftOXIVwy537iecoX92kR4q/F1UvqIMsSbq6vo5XF6ekCeEcTauVDFJpuQESvMv53IBXadx3r4KqMrt0w0kwoZY5/R5u3AZejvd5h/fSK/dE9s63K3vN7tQesssnnhX1An9x3//+Hz/R9cu5NExRFf8d5zyIF7jGF/RZ0Q23P4mK3f8XLRmfhg7t79qjdSIobjXLE+Cqju/b7d6i/tHtT3MQ8VrH/Ahstp5A=)입니다.
 
 ## 관례와 모범 사례 {#conventions-and-best-practices}