Update ko (#57)

* docs: improve sentence clarity in description.md (#2690)

* docs: fix grammar typo of step 2 (#2689)

* 프락시 → 프록시

* 줄바꿈 취소

* docs: update Angular Signals reactivity comparison (#2702)

* docs: add once option on watcher (#2698)

* Update props.md (#2697)

* 교정: 이팩트 → 이펙트

src/api/component-instance.md

@@ -9,7 +9,7 @@
 ## $data {#data}
 
 [`data`](./options-state.html#data) 옵션에서 반환된 객체로 컴포넌트에 의해 반응형이 됩니다.
-컴포넌트 인스턴스는 데이터 객체의 속성 접근을 프락시합니다.
+컴포넌트 인스턴스는 데이터 객체의 속성 접근을 프록시합니다.
 예를들면,
 컴포넌트 인스턴스는 데이터 객체의 속성 `this.$data.a`를 `this.a`와 같이 바로 접근할 수 있도록 합니다.
 
@@ -37,7 +37,7 @@
 - **세부 사항**:
 
   [`props`](./options-state.html#props) 옵션을 통해 선언된 props만 포함됩니다.
-  컴포넌트 인스턴스는 props 객체의 속성 접근을 프락시합니다.
+  컴포넌트 인스턴스는 props 객체의 속성 접근을 프록시합니다.
 
 ## $el {#el}
 

src/api/options-state.md

@@ -17,11 +17,11 @@
 
 - **세부 사항**:
 
-  이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다. 인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다. 컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프락시하므로 `this.$data.a`는 `this.a`와 동일합니다.
+  이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다. 인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다. 컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프록시하므로 `this.$data.a`는 `this.a`와 동일합니다.
 
   모든 최상위 데이터 속성은 반환된 데이터 객체에 포함되어야 합니다. `this.$data`에 새 속성을 추가하는 것이 가능하지만 **권장되지는 않습니다**. 원하는 속성 값을 아직 사용할 수 없는 경우, `undefined` 또는 `null`과 같은 빈 값을 사용하여 Vue가 속성이 존재함을 알 수 있도록 해야 합니다.
 
-  `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로, 컴포넌트 인스턴스에서 **프락시되지 않습니다**. 이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다.
+  `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로, 컴포넌트 인스턴스에서 **프록시되지 않습니다**. 이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다.
 
   브라우저 API 객체나 프로토타입 속성과 같은 고유한 상태를 저장한 객체를 반환하는 것은 **권장하지 않습니다**. 이상적으로 반환된 객체는 컴포넌트의 상태만 나타내는 일반 객체여야 합니다.
 

src/api/reactivity-advanced.md

@@ -227,7 +227,7 @@
 
 ## toRaw() {#toraw}
 
-Vue에서 만든 프락시의 원시 원본 객체를 반환합니다.
+Vue에서 만든 프록시의 원시 원본 객체를 반환합니다.
 
 - **타입**:
 
@@ -237,9 +237,9 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다.
 
 - **세부 사항**:
 
-  `toRaw()`는 [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly)로 생성된 프락시에서 원본 객체를 반환합니다.
+  `toRaw()`는 [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly)로 생성된 프록시에서 원본 객체를 반환합니다.
 
-  이것은 일시적으로 프락시의 접근/추적 오버헤드를 발생시키는 읽기/쓰기와 관련된 트리거 없이 사용하기 위한 용도입니다.
+  이것은 일시적으로 프록시의 접근/추적 오버헤드를 발생시키는 읽기/쓰기와 관련된 트리거 없이 사용하기 위한 용도입니다.
   원본 객체의 영구 참조를 유지하는 것은 **권장되지 않습니다**.
   주의해서 사용해야 합니다.
 
@@ -254,7 +254,7 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다.
 
 ## markRaw() {#markraw}
 
-객체가 프락시로 변환되지 않도록 마크(mark)합니다.
+객체가 프록시로 변환되지 않도록 마크(mark)합니다.
 객체 자체를 반환합니다.
 
 - **타입**:
@@ -277,21 +277,21 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다.
   :::warning 주의해서 사용
   `markRaw()`나 `shallowReactive()` 같이 얕은 API를 사용하면,
   선택적으로 기본적인 내부 깊숙이까지의 "반응형"/"읽기 전용" 변환을 옵트아웃(opt-out)하여,
-  상태 그래프(선언/정의/사용하는 곳)에 프락시 되지 않은 원시 객체를 포함할 수 있습니다.
+  상태 그래프(선언/정의/사용하는 곳)에 프록시 되지 않은 원시 객체를 포함할 수 있습니다.
   이것들은 다양한 이유로 사용될 수 있습니다:
 
   - 일부 값들은 함부로 반응형으로 만들면 안되는데,
     그 예로 복잡한 타사의 클래스 인스턴스나 Vue 컴포넌트 객체가 있습니다.
 
-  - 프락시 변경을 건너뛰면,
+  - 프록시 변경을 건너뛰면,
     변경해서는 안되는 데이터 소스를 포함하고 있는 커다란 리스트를 렌더링할 때,
     성능이 향상될 수 있습니다.
 
   원시(raw) 옵트아웃은 루트 레벨에만 있기 때문에 고급으로 간주되므로,
   마크되지 않은 중첩된 원시 객체를 반응형 객체로 설정한 다음 다시 접근을 시도하면,
-  프락시 버전의 객체로 접근하게 됩니다.
+  프록시 버전의 객체로 접근하게 됩니다.
   이것은 동일한 객체에 참조했다고 예상했으나,
-  원시 버전과 프락시 버전을 혼용하여 사용하는 "**잘못된 ID 참조**(identity hazards)"로 이어질 수 있습니다.
+  원시 버전과 프록시 버전을 혼용하여 사용하는 "**잘못된 ID 참조**(identity hazards)"로 이어질 수 있습니다.
 
   ```js
   const foo = markRaw({

src/api/reactivity-core.md

@@ -116,7 +116,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 ## reactive() {#reactive}
 
-객체의 반응형 프락시(proxy)를 반환합니다.
+객체의 반응형 프록시(proxy)를 반환합니다.
 
 - **타입**:
 
@@ -132,7 +132,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
   내부 깊은 곳까지의 변환은 피하고 루트 수준에서만 반응형을 유지하려면, [shallowReactive()](./reactivity-advanced#shallowreactive)를 사용해야 합니다.
 
-  반환된 객체와 중첩된 객체는 [프락시(Proxy)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)로 래핑되므로, 원본 객체와 **동일하지 않습니다**. 그러므로 반응형 프락시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다.
+  반환된 객체와 중첩된 객체는 [프록시(Proxy)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)로 래핑되므로, 원본 객체와 **동일하지 않습니다**. 그러므로 반응형 프록시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다.
 
 - **예제**
 
@@ -193,7 +193,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 ## readonly() {#readonly}
 
-객체(반응형 또는 일반) 또는 [ref](#ref)를 가져와서 원본에 대한 읽기 전용 프락시를 반환합니다.
+객체(반응형 또는 일반) 또는 [ref](#ref)를 가져와서 원본에 대한 읽기 전용 프록시를 반환합니다.
 
 - **타입**:
 
@@ -205,7 +205,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 - **세부 사항**:
 
-  읽기 전용 프락시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다. 또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다.
+  읽기 전용 프록시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다. 또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다.
 
   내부 깊은 곳까지의 변환을 피하려면, [shallowReadonly()](./reactivity-advanced#shallowreadonly)를 사용해야 합니다.
 

src/api/reactivity-utilities.md

@@ -244,7 +244,7 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal
 
 ## isProxy() {#isproxy}
 
-객체가 [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](./reactivity-advanced.html#shallowreactive) 또는 [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly)에 의해 생성된 프락시인지 확인합니다.
+객체가 [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](./reactivity-advanced.html#shallowreactive) 또는 [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly)에 의해 생성된 프록시인지 확인합니다.
 
 - **타입**:
 
@@ -254,7 +254,7 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal
 
 ## isReactive() {#isreactive}
 
-객체가 [`reactive()`](./reactivity-core.html#reactive) 또는 [`shallowReactive()`](./reactivity-advanced.html#shallowreactive)에 의해 생성된 프락시인지 확인합니다.
+객체가 [`reactive()`](./reactivity-core.html#reactive) 또는 [`shallowReactive()`](./reactivity-advanced.html#shallowreactive)에 의해 생성된 프록시인지 확인합니다.
 
 - **타입**:
 

src/api/sfc-script-setup.md

@@ -4,7 +4,7 @@
 
 - 더 적은 상용구로 더 간결한 코드
 - 순수 TypeScript를 사용하여 props 및 내보낼(emit) 이벤트를 선언하는 기능
-- 더 나은 런타임 성능(템플릿은 중간 프락시 없이 동일한 범위의 렌더 함수로 컴파일됨)
+- 더 나은 런타임 성능(템플릿은 중간 프록시 없이 동일한 범위의 렌더 함수로 컴파일됨)
 - 더 나은 IDE 타입 추론 성능(언어 서버가 코드에서 타입을 추출하는 작업 감소)
 
 ## 기본 문법 {#basic-syntax}

src/glossary/index.md

@@ -254,15 +254,15 @@ Vue에서는 "프롭(prop)"이라는 용어를 세 가지 주요 상황에서 
 자세한 내용은 다음을 참조하세요:
 - [가이드 - provide / inject](/guide/components/provide-inject.html)
 
-## 반응형 이팩트 (Reactive Effect) {#reactive-effect}
+## 반응형 이펙트 (Reactive Effect) {#reactive-effect}
 
-반응형 이팩트는 Vue의 반응성 시스템의 일부입니다. 이는 함수의 종속성(dependency)을 추적하고, 해당 종속성의 값이 변경될 때마다 해당 함수를 다시 실행하는 과정을 의미합니다.
+반응형 이펙트는 Vue의 반응성 시스템의 일부입니다. 이는 함수의 종속성(dependency)을 추적하고, 해당 종속성의 값이 변경될 때마다 해당 함수를 다시 실행하는 과정을 의미합니다.
 
-`watchEffect()`는 반응형 이팩트를 직접적으로 생성하는 가장 간단한 방법입니다. Vue의 다양한 다른 부분들도 내부적으로 이팩트를 사용합니다. 예를 들어, 컴포넌트 렌더링 업데이트, `computed()`와 `watch()` 등이 있습니다.
+`watchEffect()`는 반응형 이펙트를 직접적으로 생성하는 가장 간단한 방법입니다. Vue의 다양한 다른 부분들도 내부적으로 이펙트를 사용합니다. 예를 들어, 컴포넌트 렌더링 업데이트, `computed()`와 `watch()` 등이 있습니다.
 
-Vue는 반응형 종속성을 반응형 이팩트 내부에서만 추적할 수 있습니다. 만약 속성의 값을 반응형 이팩트 외부에서 읽는다면, 해당 속성이 이후에 변경되어도 Vue는 무엇을 해야 할지 모를 것입니다. 이런 의미에서 속성은 '반응성'을 '잃게' 됩니다.
+Vue는 반응형 종속성을 반응형 이펙트 내부에서만 추적할 수 있습니다. 만약 속성의 값을 반응형 이펙트 외부에서 읽는다면, 해당 속성이 이후에 변경되어도 Vue는 무엇을 해야 할지 모를 것입니다. 이런 의미에서 속성은 '반응성'을 '잃게' 됩니다.
 
-이 용어는 '부작용(side effect)'에서 유래되었습니다. 이팩트 함수를 호출하는 것은 속성 값이 변경되는 것의 부작용입니다.
+이 용어는 '부작용(side effect)'에서 유래되었습니다. 이펙트 함수를 호출하는 것은 속성 값이 변경되는 것의 부작용입니다.
 
 자세한 내용은 다음을 참조하세요:
 - [가이드 - 깊이 있는 반응성](/guide/extras/reactivity-in-depth.html)

src/guide/best-practices/performance.md

@@ -187,7 +187,7 @@ const computedObj = computed((oldValue) => {
 
 ### 큰 불변 구조에 대한 반응성 오버헤드 감소 {#reduce-reactivity-overhead-for-large-immutable-structures}
 
-Vue의 반응형 시스템은 기본적으로 깊습니다. 이러면 상태 관리가 직관적이지만, 데이터 크기가 클 경우 특정 수준의 오버헤드가 발생하는데, 이것은 모든 속성 접근이 의존성 추적을 수행하는 프락시 트랩을 트리거하기 때문입니다. 이것은 일반적으로 깊이 중첩된 객체의 큰 배열을 처리할 때, 단일 렌더가 100,000개 이상의 속성에 접근하는 경우 눈에 띄게 나타나므로, 매우 특정한 사용 사례에만 영향을 미칩니다.
+Vue의 반응형 시스템은 기본적으로 깊습니다. 이러면 상태 관리가 직관적이지만, 데이터 크기가 클 경우 특정 수준의 오버헤드가 발생하는데, 이것은 모든 속성 접근이 의존성 추적을 수행하는 프록시 트랩을 트리거하기 때문입니다. 이것은 일반적으로 깊이 중첩된 객체의 큰 배열을 처리할 때, 단일 렌더가 100,000개 이상의 속성에 접근하는 경우 눈에 띄게 나타나므로, 매우 특정한 사용 사례에만 영향을 미칩니다.
 
 Vue는 [`shallowRef()`](/api/reactivity-advanced.html#shallowref) 및 [`shallowReactive()`](/api/reactivity-advanced.html#shallowreactive)를 사용하여, 깊은 반응형을 opt-out하는 탈출구를 제공합니다. 얕은 API는 루트 수준에서만 반응하는 상태를 생성하고, 모든 중첩된 객체를 그대로 노출합니다. 이렇게 하면 중첩된 속성에 빠르게 접근할 수 있으며, 모든 중첩된 객체는 변경할 수 없는 것처럼 처리해야 하고, 루트 상태를 교체해야만 업데이트가 트리거될 수 있습니다:
 

src/guide/components/props.md

@@ -519,6 +519,7 @@ props는 컴포넌트 **인스턴스가 생성되기 전**에 유효성 검사
 - `Date`
 - `Function`
 - `Symbol`
+- `Error`
 
 또한 `type`은 사용자 정의 클래스 또는 생성자 함수일 수도 있으며, `instanceof`를 사용하여 검사를 실시합니다. 예를 들어, 다음 클래스가 주어졌을 때:
 

src/guide/essentials/reactivity-fundamentals.md

@@ -17,7 +17,7 @@ outline: deep
 옵션 API에서는 `data` 옵션을 사용하여 컴포넌트의 반응형 상태를 선언합니다.
 옵션 값은 객체를 반환하는 함수여야 합니다.
 Vue는 새 컴포넌트 인스턴스를 만들 때 함수를 호출하고, 반환된 객체를 반응형 시스템에 래핑합니다.
-이 객체 내 모든 속성은 해당 컴포넌트 인스턴스(메서드 및 생명 주기 훅에서 `this`)에서 최상위에 프락시(proxy)되어 노출됩니다.
+이 객체 내 모든 속성은 해당 컴포넌트 인스턴스(메서드 및 생명 주기 훅에서 `this`)에서 최상위에 프록시(proxy)되어 노출됩니다.
 
 ```js{2-6}
 export default {
@@ -71,7 +71,7 @@ export default {
 }
 ```
 
-`newObject` 객체를 `this.someObject`에 할당 후 접근할 경우, 이 값은 원본을 반응형으로 재정의한 프락시 객체입니다.
+`newObject` 객체를 `this.someObject`에 할당 후 접근할 경우, 이 값은 원본을 반응형으로 재정의한 프록시 객체입니다.
 **Vue 2와 달리 원본 `newObject` 객체는 그대로 유지되며, 반응형으로 변하지 않습니다.
 항상 `this`를 통해 반응형 상태의 속성에 접근해야 합니다.**
 
@@ -410,7 +410,7 @@ const state = reactive({ count: 0 })
 
 ### 반응형 재정의 vs. 원본 \*\* {#reactive-proxy-vs-original-1}
 
-`reactive()`의 반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)(Proxy)라는 점을 유의하는 것이 중요합니다.
+`reactive()`의 반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)(Proxy)라는 점을 유의하는 것이 중요합니다.
 
 ```js
 const raw = {}
@@ -420,22 +420,22 @@ const proxy = reactive(raw)
 console.log(proxy === raw) // false
 ```
 
-프락시만 반응형입니다.
+프록시만 반응형입니다.
 원본 객체를 변경해도 업데이트가 트리거되지 않습니다.
-따라서 객체를 Vue의 반응형 시스템으로 작업할 때 가장 좋은 방법은 **상태를 재정의한 프락시만 사용**하는 것입니다.
+따라서 객체를 Vue의 반응형 시스템으로 작업할 때 가장 좋은 방법은 **상태를 재정의한 프록시만 사용**하는 것입니다.
 
-프락시에 대한 일관된 접근을 보장하기 위해, 원본 객체를 `reactive()` 한 프락시와 프락시를 `reactive()` 한 프락시는 동일한 프락시를 반환하도록 동작합니다.
+프록시에 대한 일관된 접근을 보장하기 위해, 원본 객체를 `reactive()` 한 프록시와 프록시를 `reactive()` 한 프록시는 동일한 프록시를 반환하도록 동작합니다.
 
 ```js
-// 객체를 reactive() 한 반환 값과 프락시는 동일합니다.
+// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.
 console.log(reactive(raw) === proxy) // true
 
-// 프락시를 reactive()한 반환 값과 프락시는 동일합니다.
+// 프록시를 reactive()한 반환 값과 프록시는 동일합니다.
 console.log(reactive(proxy) === proxy) // true
 ```
 
 이 규칙은 중첩된 객체에도 적용됩니다.
-내부 깊숙이까지 반응형이므로 반응형 객체 내부의 중첩된 객체도 프락시입니다:
+내부 깊숙이까지 반응형이므로 반응형 객체 내부의 중첩된 객체도 프록시입니다:
 
 ```js
 const proxy = reactive({})

src/guide/essentials/watchers.md

@@ -285,6 +285,40 @@ watch(
 
 </div>
 
+## 일회성 감시자 <sup class="vt-badge" data-text="3.4+" /> {#once-watchers}
+
+감시하는 소스가 변경될 때마다 감시자의 콜백이 실행됩니다. 소스가 변경될 때 콜백이 한 번만 트리거되길 원한다면, `once: true` 옵션을 사용해야 합니다.
+
+<div class="options-api">
+
+```js
+export default {
+  watch: {
+    source: {
+      handler(newValue, oldValue) {
+        // `source`가 변경될 때, 한 번만 트리거됨
+      },
+      once: true
+    }
+  }
+}
+```
+
+</div>
+
+<div class="composition-api">
+
+```js
+watch(
+  source,
+  (newValue, oldValue) => {
+    // `source`가 변경될 때, 한 번만 트리거됨
+  },
+  { once: true }
+)
+```
+
+</div>
 
 <div class="composition-api">
 

src/guide/extras/composition-api-faq.md

@@ -117,7 +117,7 @@ Vue CLI의 GUI에서 폴더 탐색기 컴포넌트를 예로 들어 보겠습니
 
 컴포지션 API와 `<script setup>`으로 작성된 코드는 옵션 API에 비해 더 효율적이고 축소하기 쉽습니다.
 이는 `<script setup>` 컴포넌트의 템플릿이 `<script setup>` 코드의 동일한 범위에 인라인된 함수로 컴파일되기 때문입니다.
-`this`의 속성 접근과 달리 컴파일된 템플릿 코드는 인스턴스 프락시 없이 `<script setup>` 내부에 선언된 변수에 직접 접근할 수 있습니다.
+`this`의 속성 접근과 달리 컴파일된 템플릿 코드는 인스턴스 프록시 없이 `<script setup>` 내부에 선언된 변수에 직접 접근할 수 있습니다.
 이것은 모든 변수 이름을 안전하게 단축할 수 있기 때문에 더 나은 축소로 이어집니다.
 
 ## 옵션 API와의 관계 {#relationship-with-options-api}