From 8d0f4d8be16235e6b207f38da37743f1129d790e Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 22:30:38 +0900
Subject: [PATCH 1/8] docs: improve sentence clarity in description.md (#2690)

---
 src/tutorial/src/step-2/description.md | 37 ++++++++------------------
 1 file changed, 11 insertions(+), 26 deletions(-)

diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md
index 13efe4b4..a124c679 100644
--- a/src/tutorial/src/step-2/description.md
+++ b/src/tutorial/src/step-2/description.md
@@ -2,20 +2,15 @@
 
 <div class="sfc">
 
-편집기에 보이는 것은 Vue SFC(Single File Component)입니다.
-SFC는 HTML, CSS, JavaScript를 캡슐화한 코드 블록으로 재사용 가능한 `.vue` 파일입니다.
+편집기에 보이는 것은 Vue SFC(Single File Component)입니다. SFC는 HTML, CSS, JavaScript를 캡슐화한 코드 블록으로 재사용 가능한 `.vue` 파일입니다.
 
 </div>
 
-Vue의 핵심 기능은 **선언적 렌더링**입니다.
-HTML을 확장하는 템플릿 문법을 사용하여 JavaScript 상태를 기반으로 HTML이 어떻게 보이는지 설명할 수 있습니다.
-상태가 변경되면 HTML이 자동으로 업데이트됩니다.
+Vue의 핵심 기능은 **선언적 렌더링**입니다: HTML을 확장하는 템플릿 구문을 사용하여, JavaScript 상태에 기반해 HTML이 어떻게 보여야 할지를 기술할 수 있습니다. 상태가 변경될 때, HTML은 자동으로 업데이트됩니다.
 
 <div class="composition-api">
 
-변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다.
-Vue의 `reactive()` API를 사용하여 반응형 상태를 선언할 수 있습니다.
-`reactive()`로 생성된 객체는 일반 객체처럼 작동하는 JavaScript [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)입니다:
+변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다. Vue의 `reactive()` API를 사용하여 반응형 상태를 선언할 수 있습니다. `reactive()`로 생성된 객체는 일반 객체처럼 작동하는 JavaScript [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)입니다:
 
 ```js
 import { reactive } from 'vue'
@@ -28,9 +23,7 @@ console.log(counter.count) // 0
 counter.count++
 ```
 
-`reactive()`는 객체(배열, `Map`, `Set`과 같은 빌트인 타입 포함)에서만 작동합니다.
-반면에 `ref()`는 모든 타입의 값을 사용할 수 있으며,
-`.value` 속성으로 내부 값을 노출하는 객체를 생성합니다.
+`reactive()`는 객체(배열, `Map`, `Set`과 같은 빌트인 타입 포함)에서만 작동합니다. 반면에 `ref()`는 모든 타입의 값을 사용할 수 있으며, `.value` 속성으로 내부 값을 노출하는 객체를 생성합니다.
 
 ```js
 import { ref } from 'vue'
@@ -45,15 +38,13 @@ message.value = '메세지 변경됨'
 
 <div class="sfc">
 
-컴포넌트의 `<script setup>` 블록에 선언된 반응형 상태는 템플릿에서 직접 사용할 수 있습니다.
-이것은 이중 중괄호 문법을 사용하여 `counter` 객체와 `message` ref의 값을 동적으로 텍스트로 렌더링하는 방법입니다.
+컴포넌트의 `<script setup>` 블록에 선언된 반응형 상태는 템플릿에서 직접 사용할 수 있습니다. 이것은 이중 중괄호 문법을 사용하여 `counter` 객체와 `message` ref의 값을 동적으로 텍스트로 렌더링하는 방법입니다.
 
 </div>
 
 <div class="html">
 
-`createApp()`에 전달되는 객체는 Vue 컴포넌트입니다.
-컴포넌트의 상태는 `setup()` 함수 내에서 선언되어야 하며, 객체를 사용하여 반환되어야 합니다:
+`createApp()`에 전달되는 객체는 Vue 컴포넌트입니다. 컴포넌트의 상태는 `setup()` 함수 내에서 선언되어야 하며, 객체를 사용하여 반환되어야 합니다:
 
 ```js{2,5}
 setup() {
@@ -66,8 +57,7 @@ setup() {
 }
 ```
 
-반환된 객체의 속성은 템플릿에서 사용할 수 있습니다.
-이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적 텍스트로 렌더링하는 방법입니다:
+반환된 객체의 속성은 템플릿에서 사용할 수 있습니다. 이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적 텍스트로 렌더링하는 방법입니다:
 
 </div>
 
@@ -76,16 +66,13 @@ setup() {
 <p>숫자 세기: {{ counter.count }}</p>
 ```
 
-템플릿에서 `message` ref에 접근할 때, `.value`를 사용할 필요가 없습니다!
-보다 간결한 사용을 위해 자동으로 언래핑됩니다.
+템플릿에서 `message` ref에 접근할 때, `.value`를 사용할 필요가 없습니다! 보다 간결한 사용을 위해 자동으로 언래핑됩니다.
 
 </div>
 
 <div class="options-api">
 
-변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다.
-Vue에서 반응형 상태는 컴포넌트에 유지됩니다.
-<span class="html">예제 코드에서 `createApp()`에 전달되는 객체는 컴포넌트입니다.</span>
+변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다. Vue에서 반응형 상태는 컴포넌트에 유지됩니다. <span class="html">예제 코드에서 `createApp()`에 전달되는 객체는 컴포넌트입니다.</span>
 
 컴포넌트에서 객체를 반환해야하는 함수 `data` 옵션을 사용하여 반응형 상태를 선언할 수 있습니다:
 
@@ -116,8 +103,7 @@ createApp({
 
 </div>
 
-템플릿에서 `message` 속성을 사용할 수 있습니다.
-이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적으로 텍스트로 렌더링하는 방법입니다:
+템플릿에서 `message` 속성을 사용할 수 있습니다. 이것은 이중 중괄호 문법을 사용하여 `message` 값을 동적으로 텍스트로 렌더링하는 방법입니다:
 
 ```vue-html
 <h1>{{ message }}</h1>
@@ -125,8 +111,7 @@ createApp({
 
 </div>
 
-이중 중괄호 내부의 내용은 식별자나 경로에만 국한되지 않습니다.
-유효한 JavaScript 표현식을 사용할 수도 있습니다:
+이중 중괄호 내부의 내용은 식별자나 경로에만 국한되지 않습니다. 유효한 JavaScript 표현식을 사용할 수도 있습니다:
 
 ```vue-html
 <h1>{{ message.split('').reverse().join('') }}</h1>

From c93954c3d90a52798537a2016052da27390e38a2 Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 22:33:29 +0900
Subject: [PATCH 2/8] docs: fix grammar typo of step 2 (#2689)

---
 src/tutorial/src/step-2/description.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md
index a124c679..2d162e67 100644
--- a/src/tutorial/src/step-2/description.md
+++ b/src/tutorial/src/step-2/description.md
@@ -10,7 +10,7 @@ Vue의 핵심 기능은 **선언적 렌더링**입니다: HTML을 확장하는 
 
 <div class="composition-api">
 
-변경 시, 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다. Vue의 `reactive()` API를 사용하여 반응형 상태를 선언할 수 있습니다. `reactive()`로 생성된 객체는 일반 객체처럼 작동하는 JavaScript [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)입니다:
+변경될 때 업데이트를 트리거할 수 있는 상태는 **반응형**으로 간주됩니다. Vue의 `reactive()` API를 사용하여 반응형 상태를 선언할 수 있습니다. `reactive()`로 생성된 객체들은 일반 객체처럼 작동하는 JavaScript [프록시(Proxies)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)입니다:
 
 ```js
 import { reactive } from 'vue'

From 6d2a41020a5bc9c3ce3ca0a9c3fbdb376647e12e Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 22:35:00 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=ED=94=84=EB=9D=BD=EC=8B=9C=20=E2=86=92=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9D=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/component-instance.md                  |  4 ++--
 src/api/options-state.md                       |  4 ++--
 src/api/reactivity-advanced.md                 | 16 ++++++++--------
 src/api/reactivity-core.md                     |  8 ++++----
 src/api/reactivity-utilities.md                |  4 ++--
 src/api/sfc-script-setup.md                    |  2 +-
 src/guide/best-practices/performance.md        |  2 +-
 .../essentials/reactivity-fundamentals.md      | 18 +++++++++---------
 src/guide/extras/composition-api-faq.md        |  2 +-
 src/guide/extras/reactivity-in-depth.md        | 10 +++++-----
 src/guide/scaling-up/tooling.md                |  2 +-
 11 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/api/component-instance.md b/src/api/component-instance.md
index 5878e668..eef7d20c 100644
--- a/src/api/component-instance.md
+++ b/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}
 
diff --git a/src/api/options-state.md b/src/api/options-state.md
index f995293c..e608943e 100644
--- a/src/api/options-state.md
+++ b/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 객체나 프로토타입 속성과 같은 고유한 상태를 저장한 객체를 반환하는 것은 **권장하지 않습니다**. 이상적으로 반환된 객체는 컴포넌트의 상태만 나타내는 일반 객체여야 합니다.
 
diff --git a/src/api/reactivity-advanced.md b/src/api/reactivity-advanced.md
index ac360137..597e3049 100644
--- a/src/api/reactivity-advanced.md
+++ b/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({
diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md
index 2f797050..cdb73d5f 100644
--- a/src/api/reactivity-core.md
+++ b/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)를 사용해야 합니다.
 
diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md
index d93fb559..240678bd 100644
--- a/src/api/reactivity-utilities.md
+++ b/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)에 의해 생성된 프록시인지 확인합니다.
 
 - **타입**:
 
diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index bade1127..f3e5a4ef 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -4,7 +4,7 @@
 
 - 더 적은 상용구로 더 간결한 코드
 - 순수 TypeScript를 사용하여 props 및 내보낼(emit) 이벤트를 선언하는 기능
-- 더 나은 런타임 성능(템플릿은 중간 프락시 없이 동일한 범위의 렌더 함수로 컴파일됨)
+- 더 나은 런타임 성능(템플릿은 중간 프록시 없이 동일한 범위의 렌더 함수로 컴파일됨)
 - 더 나은 IDE 타입 추론 성능(언어 서버가 코드에서 타입을 추출하는 작업 감소)
 
 ## 기본 문법 {#basic-syntax}
diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md
index da656230..8d3a7bed 100644
--- a/src/guide/best-practices/performance.md
+++ b/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는 루트 수준에서만 반응하는 상태를 생성하고, 모든 중첩된 객체를 그대로 노출합니다. 이렇게 하면 중첩된 속성에 빠르게 접근할 수 있으며, 모든 중첩된 객체는 변경할 수 없는 것처럼 처리해야 하고, 루트 상태를 교체해야만 업데이트가 트리거될 수 있습니다:
 
diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md
index c067111f..1c946386 100644
--- a/src/guide/essentials/reactivity-fundamentals.md
+++ b/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({})
diff --git a/src/guide/extras/composition-api-faq.md b/src/guide/extras/composition-api-faq.md
index ae70fe57..07f77b89 100644
--- a/src/guide/extras/composition-api-faq.md
+++ b/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}
diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 102da88e..43b4182c 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -76,9 +76,9 @@ whenDepsChange(update)
 
 예제에서처럼 로컬 변수의 읽기 및 쓰기를 추적할 수는 없습니다. 바닐라 자바스크립트에는 이를 수행할 수 있는 메커니즘이 없기 때문입니다. 하지만 우리가 할 수 있는 것은 **객체 속성**의 읽기 및 쓰기를 가로채는 것입니다.
 
-JavaScript에서 속성 접근을 가로채는 방법에는 [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) 및 [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)의 두 가지가 있습니다.
+JavaScript에서 속성 접근을 가로채는 방법에는 [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) 및 [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)의 두 가지가 있습니다.
 Vue 2는 브라우저 지원 제한으로 인해 단독으로 getter/setter를 사용했습니다.
-Vue 3에서 프락시는 반응형 객체에 사용되며 getter/setter는 참조에 사용됩니다.
+Vue 3에서 프록시는 반응형 객체에 사용되며 getter/setter는 참조에 사용됩니다.
 다음은 작동 방식을 보여주는 유사 코드입니다:
 
 ```js{4,9,17,22}
@@ -118,7 +118,7 @@ function ref(value) {
 
 - 반응형 객체의 속성을 로컬 변수에 할당하거나 해체할 때, 해당 변수에 접근하거나 할당하는 것은 비반응형(non-reactive)입니다. 이는 소스 객체의 get/set 프록시 트랩을 더 이상 트리거하지 않기 때문입니다. 이러한 "끊김(disconnect)"은 변수 바인딩에만 영향을 미칩니다. 변수가 객체와 같은 원시 타입이 아닌 값을 가리키는 경우, 해당 객체를 수정하는 것은 여전히 반응형으로 동작합니다.
 
-- `reactive()`에서 반환된 프락시는 원본과 동일하게 동작하지만 `===` 연산자를 사용하여 원본과 비교하면 다른 ID를 갖습니다.
+- `reactive()`에서 반환된 프록시는 원본과 동일하게 동작하지만 `===` 연산자를 사용하여 원본과 비교하면 다른 ID를 갖습니다.
 
 `track()` 내부에서 현재 실행 중인 이팩트가 있는지 확인합니다.
 존재하는 경우, 추적 중인 속성에 대한 구독자 이팩트(Set에 저장됨)를 조회하고 이팩트를 Set에 추가합니다.
@@ -374,8 +374,8 @@ watchEffect(callback, {
 
 ## 외부 상태 시스템과의 통합 {#integration-with-external-state-systems}
 
-Vue의 반응형 시스템은 일반 JavaScript 객체를 반응형 프락시로 깊이 변환하여 작동합니다.
-깊은 변환은 외부 상태 관리 시스템과 통합할 때 필요하지 않거나 때때로 원하지 않을 수 있습니다(예: 외부 솔루션도 프락시를 사용하는 경우).
+Vue의 반응형 시스템은 일반 JavaScript 객체를 반응형 프록시로 깊이 변환하여 작동합니다.
+깊은 변환은 외부 상태 관리 시스템과 통합할 때 필요하지 않거나 때때로 원하지 않을 수 있습니다(예: 외부 솔루션도 프록시를 사용하는 경우).
 
 Vue의 반응형 시스템을 외부 상태 관리 솔루션과 통합하는 일반적인 아이디어는 외부 상태를 [`shallowRef`](/api/reactivity-advanced.html#shallowref)에 유지하는 것입니다.
 얕은 참조는 `.value` 속성에 접근할 때만 반응합니다.
diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md
index 0194490a..fef3b37c 100644
--- a/src/guide/scaling-up/tooling.md
+++ b/src/guide/scaling-up/tooling.md
@@ -166,7 +166,7 @@ Vue 팀은 SFC별 린팅 규칙을 지원하는 [ESLint](https://eslint.org/) 
 
 - [Docs](https://github.com/vuejs/core/tree/main/packages/compiler-sfc)
 
-이 패키지는 Vue 핵심 모노레포의 일부이며 항상 기본 `vue` 패키지와 동일한 버전으로 게시됩니다. 기본 `vue` 패키지의 의존성으로 포함되며 `vue/compiler-sfc` 아래에 프락시되므로 개별적으로 설치할 필요가 없습니다.
+이 패키지는 Vue 핵심 모노레포의 일부이며 항상 기본 `vue` 패키지와 동일한 버전으로 게시됩니다. 기본 `vue` 패키지의 의존성으로 포함되며 `vue/compiler-sfc` 아래에 프록시되므로 개별적으로 설치할 필요가 없습니다.
 
 패키지 자체는 Vue SFC 처리를 위한 저수준 유틸리티를 제공하며, 커스텀 툴에서 Vue SFC를 지원해야 하는 툴 개발자를 위한 것입니다.
 

From 473e4b99163143443d9acb0727d0d0baf7ba5c73 Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 22:42:33 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=B7=A8?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/guide/extras/reactivity-in-depth.md | 94 +++++++------------------
 1 file changed, 25 insertions(+), 69 deletions(-)

diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 43b4182c..7e40c578 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -16,11 +16,9 @@ Vue의 가장 독특한 기능 중 하나는 눈에 거슬리지 않는 반응
 
 <SpreadSheet />
 
-여기서 A2 셀은 `= A0 + A1`의 수식을 통해 정의되므로(A2를 클릭하여 수식을 보거나 편집할 수 있음) 스프레드시트는 우리에게 3을 제공합니다.
-그리고 A0 또는 A1을 업데이트하면, A2도 자동으로 업데이트됨을 알 수 있습니다.
+여기서 A2 셀은 `= A0 + A1`의 수식을 통해 정의되므로(A2를 클릭하여 수식을 보거나 편집할 수 있음) 스프레드시트는 우리에게 3을 제공합니다. 그리고 A0 또는 A1을 업데이트하면, A2도 자동으로 업데이트됨을 알 수 있습니다.
 
-JavaScript는 일반적으로 이렇게 작동하지 않습니다.
-JavaScript에서 비슷한 것을 작성한다면:
+JavaScript는 일반적으로 이렇게 작동하지 않습니다. JavaScript에서 비슷한 것을 작성한다면:
 
 ```js
 let A0 = 1
@@ -35,8 +33,7 @@ console.log(A2) // 여전히 3
 
 `A0`을 변경한다고 `A2`가 자동으로 변경되지 않습니다.
 
-그러면 JavaScript에서 이것을 어떻게 해야 할까요?
-먼저 `A2`를 업데이트하는 코드를 다시 실행하기 위해 다음과 같이 함수로 래핑합니다:
+그러면 JavaScript에서 이것을 어떻게 해야 할까요? 먼저 `A2`를 업데이트하는 코드를 다시 실행하기 위해 다음과 같이 함수로 래핑합니다:
 
 ```js
 let A2
@@ -50,8 +47,7 @@ function update() {
 
 - `update()` 함수는 프로그램의 상태를 수정하기 때문에 "**사이드 이팩트**" 줄여서 "**이팩트**"를 생성합니다.
 
-- `A0` 및 `A1`은 해당 값이 이팩트를 수행하는 데 사용되므로 이팩트의 "**의존성**"(dependency)으로 간주됩니다.
-  그 이팩트는 의존성에 대한 "**구독자**"(subscriber)라고 합니다.
+- `A0` 및 `A1`은 해당 값이 이팩트를 수행하는 데 사용되므로 이팩트의 "**의존성**"(dependency)으로 간주됩니다. 그 이팩트는 의존성에 대한 "**구독자**"(subscriber)라고 합니다.
 
 우리에게 필요한 것은 `A0` 또는 `A1`(**의존성**)이 변경될 때마다 `update()`(**이팩트**)를 호출할 수 있는 함수입니다:
 
@@ -61,25 +57,17 @@ whenDepsChange(update)
 
 이 `whenDepsChange()` 함수에는 다음과 같은 작업이 있습니다:
 
-1. 변수가 읽힐 때를 추적합니다.
-   예를 들어 `A0 + A1` 표현식을 평가할 때 `A0`과 `A1`이 모두 읽힙니다.
+1. 변수가 읽힐 때를 추적합니다. 예를 들어 `A0 + A1` 표현식을 평가할 때 `A0`과 `A1`이 모두 읽힙니다.
 
-2. 현재 실행 중인 이팩트가 있을 때 변수를 읽으면,
-   해당 이팩트를 해당 변수의 구독자로 만듭니다.
-   예를 들어 `A0`과 `A1`은 `update()`가 실행될 때 읽히기 때문에 `update()`는 첫 번째 호출 이후에 `A0`과 `A1`의 구독자가 됩니다.
+2. 현재 실행 중인 이팩트가 있을 때 변수를 읽으면, 해당 이팩트를 해당 변수의 구독자로 만듭니다. 예를 들어 `A0`과 `A1`은 `update()`가 실행될 때 읽히기 때문에 `update()`는 첫 번째 호출 이후에 `A0`과 `A1`의 구독자가 됩니다.
 
-3. 변수가 언제 변이되는지 감지합니다.
-   예를 들어 `A0`에 새 값이 할당되면,
-   모든 구독자 이팩트에 다시 실행하도록 알립니다.
+3. 변수가 언제 변이되는지 감지합니다. 예를 들어 `A0`에 새 값이 할당되면, 모든 구독자 이팩트에 다시 실행하도록 알립니다.
 
 ## Vue에서 반응형 작동 방식 {#how-reactivity-works-in-vue}
 
 예제에서처럼 로컬 변수의 읽기 및 쓰기를 추적할 수는 없습니다. 바닐라 자바스크립트에는 이를 수행할 수 있는 메커니즘이 없기 때문입니다. 하지만 우리가 할 수 있는 것은 **객체 속성**의 읽기 및 쓰기를 가로채는 것입니다.
 
-JavaScript에서 속성 접근을 가로채는 방법에는 [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) 및 [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)의 두 가지가 있습니다.
-Vue 2는 브라우저 지원 제한으로 인해 단독으로 getter/setter를 사용했습니다.
-Vue 3에서 프록시는 반응형 객체에 사용되며 getter/setter는 참조에 사용됩니다.
-다음은 작동 방식을 보여주는 유사 코드입니다:
+JavaScript에서 속성 접근을 가로채는 방법에는 [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) 및 [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)의 두 가지가 있습니다. Vue 2는 브라우저 지원 제한으로 인해 단독으로 getter/setter를 사용했습니다. Vue 3에서 프록시는 반응형 객체에 사용되며 getter/setter는 참조에 사용됩니다. 다음은 작동 방식을 보여주는 유사 코드입니다:
 
 ```js{4,9,17,22}
 function reactive(obj) {
@@ -120,8 +108,7 @@ function ref(value) {
 
 - `reactive()`에서 반환된 프록시는 원본과 동일하게 동작하지만 `===` 연산자를 사용하여 원본과 비교하면 다른 ID를 갖습니다.
 
-`track()` 내부에서 현재 실행 중인 이팩트가 있는지 확인합니다.
-존재하는 경우, 추적 중인 속성에 대한 구독자 이팩트(Set에 저장됨)를 조회하고 이팩트를 Set에 추가합니다.
+`track()` 내부에서 현재 실행 중인 이팩트가 있는지 확인합니다. 존재하는 경우, 추적 중인 속성에 대한 구독자 이팩트(Set에 저장됨)를 조회하고 이팩트를 Set에 추가합니다.
 
 ```js
 // 이팩트가 실행되기 직전에 설정됩니다.
@@ -136,13 +123,9 @@ function track(target, key) {
 }
 ```
 
-이팩트 구독은 전역 `WeakMap<target, Map<key, Set<effect>>>` 데이터 구조에 저장됩니다.
-속성에 대한 구독 이팩트 Set이 발견되지 않은 경우(처음 추적 시) 생성됩니다.
-이것이 `getSubscribersForProperty()` 함수가 하는 일입니다.
-간단하게 하기 위해 자세한 내용은 건너뛰겠습니다.
+이팩트 구독은 전역 `WeakMap<target, Map<key, Set<effect>>>` 데이터 구조에 저장됩니다. 속성에 대한 구독 이팩트 Set이 발견되지 않은 경우(처음 추적 시) 생성됩니다. 이것이 `getSubscribersForProperty()` 함수가 하는 일입니다. 간단하게 하기 위해 자세한 내용은 건너뛰겠습니다.
 
-`trigger()` 내부에서 속성에 대한 구독자 이팩트를 다시 조회합니다.
-그러나 이번에는 우리가 그것들을 대신 호출합니다:
+`trigger()` 내부에서 속성에 대한 구독자 이팩트를 다시 조회합니다. 그러나 이번에는 우리가 그것들을 대신 호출합니다:
 
 ```js
 function trigger(target, key) {
@@ -164,15 +147,11 @@ function whenDepsChange(update) {
 }
 ```
 
-실제 업데이트를 실행하기 전에 자신을 현재 활성 이팩트로 설정하는 이팩트에 로우(raw) `업데이트` 함수를 래핑합니다.
-이것은 현재 활성 이팩트를 찾기 위해 업데이트 동안 `track()` 호출을 활성화합니다.
+실제 업데이트를 실행하기 전에 자신을 현재 활성 이팩트로 설정하는 이팩트에 로우(raw) `업데이트` 함수를 래핑합니다. 이것은 현재 활성 이팩트를 찾기 위해 업데이트 동안 `track()` 호출을 활성화합니다.
 
-이 시점에서 의존성을 자동으로 추적하고 의존성이 변경될 때마다 다시 실행하는 이팩트를 만들었습니다.
-우리는 이것을 **반응 이팩트**(Reactive Effect)라고 부릅니다.
+이 시점에서 의존성을 자동으로 추적하고 의존성이 변경될 때마다 다시 실행하는 이팩트를 만들었습니다. 우리는 이것을 **반응 이팩트**(Reactive Effect)라고 부릅니다.
 
-Vue는 반응 이팩트를 생성할 수 있는 [`watchEffect()`](/api/reactivity-core.html#watcheffect) API를 제공합니다.
-사실, 예제의 `whenDepsChange()`와 매우 유사하게 작동한다는 것을 눈치채셨을 것입니다.
-이제 실제 Vue API를 사용하여 원래 예제를 다시 작업할 수 있습니다:
+Vue는 반응 이팩트를 생성할 수 있는 [`watchEffect()`](/api/reactivity-core.html#watcheffect) API를 제공합니다. 사실, 예제의 `whenDepsChange()`와 매우 유사하게 작동한다는 것을 눈치채셨을 것입니다. 이제 실제 Vue API를 사용하여 원래 예제를 다시 작업할 수 있습니다:
 
 ```js
 import { ref, watchEffect } from 'vue'
@@ -190,8 +169,7 @@ watchEffect(() => {
 A0.value = 2
 ```
 
-반응 이팩트를 사용하여 ref를 변경하는 것이 가장 흥미로운 사용 사례는 아닙니다.
-계산된 속성을 사용하면 더 선언적입니다:
+반응 이팩트를 사용하여 ref를 변경하는 것이 가장 흥미로운 사용 사례는 아닙니다. 계산된 속성을 사용하면 더 선언적입니다:
 
 ```js
 import { ref, computed } from 'vue'
@@ -205,9 +183,7 @@ A0.value = 2
 
 내부적으로 `computed`는 무효화 및 재계산을 반응 이팩트를 사용하여 관리합니다.
 
-그렇다면 일반적이고 유용한 반응 이팩트의 예는 무엇일까요?
-DOM을 업데이트 하는 것입니다!
-다음과 같이 간단한 "반응형 렌더링"을 구현할 수 있습니다:
+그렇다면 일반적이고 유용한 반응 이팩트의 예는 무엇일까요? DOM을 업데이트 하는 것입니다! 다음과 같이 간단한 "반응형 렌더링"을 구현할 수 있습니다:
 
 ```js
 import { ref, watchEffect } from 'vue'
@@ -222,17 +198,11 @@ watchEffect(() => {
 count.value++
 ```
 
-사실 이것은 Vue 컴포넌트가 상태와 DOM을 동기화 상태로 유지하는 방법과 매우 유사합니다.
-각 컴포넌트 인스턴스는 DOM을 렌더링하고 업데이트하는 반응 이팩트를 생성합니다.
-물론 Vue 컴포넌트는 `innerHTML`보다 훨씬 더 효율적인 방법으로 DOM을 업데이트합니다.
-이것은 [렌더링 메커니즘](./rendering-mechanism)에서 논의됩니다.
+사실 이것은 Vue 컴포넌트가 상태와 DOM을 동기화 상태로 유지하는 방법과 매우 유사합니다. 각 컴포넌트 인스턴스는 DOM을 렌더링하고 업데이트하는 반응 이팩트를 생성합니다. 물론 Vue 컴포넌트는 `innerHTML`보다 훨씬 더 효율적인 방법으로 DOM을 업데이트합니다. 이것은 [렌더링 메커니즘](./rendering-mechanism)에서 논의됩니다.
 
 <div class="options-api">
 
-`ref()`, `computed()` 및 `watchEffect()` API는 모두 컴포지션 API의 일부입니다.
-지금까지 Vue에서 옵션 API만 사용했다면, 컴포지션 API가 Vue의 반응형 시스템 작동 방식에 더 가깝다는 것을 알 수 있습니다.
-사실, Vue 3에서 옵션 API는 컴포지션 API 위에 구현됩니다.
-컴포넌트 인스턴스(`this`)에 대한 모든 속성 접근은 반응형 추적을 위해 getter/setter를 트리거하고 `watch` 및 `computed`와 같은 옵션은 내부적으로 해당 컴포지션 API를 호출합니다.
+`ref()`, `computed()` 및 `watchEffect()` API는 모두 컴포지션 API의 일부입니다. 지금까지 Vue에서 옵션 API만 사용했다면, 컴포지션 API가 Vue의 반응형 시스템 작동 방식에 더 가깝다는 것을 알 수 있습니다. 사실, Vue 3에서 옵션 API는 컴포지션 API 위에 구현됩니다. 컴포넌트 인스턴스(`this`)에 대한 모든 속성 접근은 반응형 추적을 위해 getter/setter를 트리거하고 `watch` 및 `computed`와 같은 옵션은 내부적으로 해당 컴포지션 API를 호출합니다.
 
 </div>
 
@@ -250,9 +220,7 @@ Vue의 반응성 시스템이 종속성을 자동으로 추적하는 것은 훌
 
 ### 컴포넌트 디버깅 훅 {#component-debugging-hooks}
 
-컴포넌트의 렌더링 중에 사용되는 의존성과 <span class="options-api">`renderTracked`</span><span class="composition-api">`onRenderTracked`</span> 및 <span class="options-api">`renderTriggered`</span><span class="composition-api">`onRenderTriggered`</span> 생명 주기 훅을 사용하여 업데이트를 트리거하는 의존성을 디버그할 수 있습니다.
-두 훅 모두 해당 의존성에 대한 정보가 포함된 디버거 이벤트를 수신합니다.
-의존성을 대화식으로 검사하기 위해 콜백에 `debugger` 문을 배치하는 것이 좋습니다:
+컴포넌트의 렌더링 중에 사용되는 의존성과 <span class="options-api">`renderTracked`</span><span class="composition-api">`onRenderTracked`</span> 및 <span class="options-api">`renderTriggered`</span><span class="composition-api">`onRenderTriggered`</span> 생명 주기 훅을 사용하여 업데이트를 트리거하는 의존성을 디버그할 수 있습니다. 두 훅 모두 해당 의존성에 대한 정보가 포함된 디버거 이벤트를 수신합니다. 의존성을 대화식으로 검사하기 위해 콜백에 `debugger` 문을 배치하는 것이 좋습니다:
 
 <div class="composition-api">
 
@@ -374,25 +342,15 @@ watchEffect(callback, {
 
 ## 외부 상태 시스템과의 통합 {#integration-with-external-state-systems}
 
-Vue의 반응형 시스템은 일반 JavaScript 객체를 반응형 프록시로 깊이 변환하여 작동합니다.
-깊은 변환은 외부 상태 관리 시스템과 통합할 때 필요하지 않거나 때때로 원하지 않을 수 있습니다(예: 외부 솔루션도 프록시를 사용하는 경우).
+Vue의 반응형 시스템은 일반 JavaScript 객체를 반응형 프록시로 깊이 변환하여 작동합니다. 깊은 변환은 외부 상태 관리 시스템과 통합할 때 필요하지 않거나 때때로 원하지 않을 수 있습니다(예: 외부 솔루션도 프록시를 사용하는 경우).
 
-Vue의 반응형 시스템을 외부 상태 관리 솔루션과 통합하는 일반적인 아이디어는 외부 상태를 [`shallowRef`](/api/reactivity-advanced.html#shallowref)에 유지하는 것입니다.
-얕은 참조는 `.value` 속성에 접근할 때만 반응합니다.
-내부 값은 그대로 유지됩니다.
-외부 상태가 변경되면 ref 값을 교체하여 업데이트를 트리거합니다.
+Vue의 반응형 시스템을 외부 상태 관리 솔루션과 통합하는 일반적인 아이디어는 외부 상태를 [`shallowRef`](/api/reactivity-advanced.html#shallowref)에 유지하는 것입니다. 얕은 참조는 `.value` 속성에 접근할 때만 반응합니다. 내부 값은 그대로 유지됩니다. 외부 상태가 변경되면 ref 값을 교체하여 업데이트를 트리거합니다.
 
 ### 불변 데이터 {#immutable-data}
 
-실행 취소/다시 실행 기능을 구현하는 경우, 사용자가 편집할 때마다 앱 상태의 스냅샷을 찍고 싶을 것입니다.
-그러나 Vue의 변경 가능한 반응형 시스템은 상태 트리가 큰 경우 적합하지 않습니다.
-모든 업데이트에서 전체 상태 객체를 직렬화하는 것은 CPU 및 메모리 비용 측면에서 비용이 많이 들 수 있기 때문입니다.
+실행 취소/다시 실행 기능을 구현하는 경우, 사용자가 편집할 때마다 앱 상태의 스냅샷을 찍고 싶을 것입니다. 그러나 Vue의 변경 가능한 반응형 시스템은 상태 트리가 큰 경우 적합하지 않습니다. 모든 업데이트에서 전체 상태 객체를 직렬화하는 것은 CPU 및 메모리 비용 측면에서 비용이 많이 들 수 있기 때문입니다.
 
-[불변 데이터 구조](https://en.wikipedia.org/wiki/Persistent_data_structure)는 상태 객체를 변경하지 않음으로써 이 문제를 해결합니다.
-대신 이전 객체와 동일하고 변경되지 않은 부분을 공유하는 새 객체를 생성합니다.
-JavaScript에서 변경할 수 없는 데이터를 사용하는 방법에는 여러 가지가 있지만,
-Vue와 함께 [Immer](https://immerjs.github.io/immer/)를 사용하는 것이 좋습니다.
-왜냐하면 보다 인체 공학적이고 변경 가능한 문법을 유지하면서 변경할 수 없는 데이터를 사용할 수 있기 때문입니다.
+[불변 데이터 구조](https://en.wikipedia.org/wiki/Persistent_data_structure)는 상태 객체를 변경하지 않음으로써 이 문제를 해결합니다. 대신 이전 객체와 동일하고 변경되지 않은 부분을 공유하는 새 객체를 생성합니다. JavaScript에서 변경할 수 없는 데이터를 사용하는 방법에는 여러 가지가 있지만, Vue와 함께 [Immer](https://immerjs.github.io/immer/)를 사용하는 것이 좋습니다. 왜냐하면 보다 인체 공학적이고 변경 가능한 문법을 유지하면서 변경할 수 없는 데이터를 사용할 수 있기 때문입니다.
 
 간단한 컴포넌트를 통해 Immer를 Vue와 통합할 수 있습니다:
 
@@ -414,11 +372,9 @@ export function useImmer(baseState) {
 
 ### 상태 머신 (State Machine) {#state-machines}
 
-[상태 머신](https://en.wikipedia.org/wiki/Finite-state_machine)은 앱이 어떤 상태에 있을 수 있는 모든 가능한 상태와 한 상태에서 다른 상태로 전환할 수 있는 모든 가능한 방법을 설명하기 위한 모델입니다.
-단순한 컴포넌트에는 과도할 수 있지만, 복잡한 상태 흐름을 보다 강력하고 관리하기 쉽게 만드는 데 도움이 될 수 있습니다.
+[상태 머신](https://en.wikipedia.org/wiki/Finite-state_machine)은 앱이 어떤 상태에 있을 수 있는 모든 가능한 상태와 한 상태에서 다른 상태로 전환할 수 있는 모든 가능한 방법을 설명하기 위한 모델입니다. 단순한 컴포넌트에는 과도할 수 있지만, 복잡한 상태 흐름을 보다 강력하고 관리하기 쉽게 만드는 데 도움이 될 수 있습니다.
 
-JavaScript에서 가장 널리 사용되는 상태 머신 구현 중 하나는 [XState](https://xstate.js.org/)입니다.
-다음은 이를 통합하는 컴포저블입니다:
+JavaScript에서 가장 널리 사용되는 상태 머신 구현 중 하나는 [XState](https://xstate.js.org/)입니다. 다음은 이를 통합하는 컴포저블입니다:
 
 ```js
 import { createMachine, interpret } from 'xstate'

From bd69d68bdc27edd2d0bbbac65b0bb9ad3f661e28 Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 22:57:16 +0900
Subject: [PATCH 5/8] docs: update Angular Signals reactivity comparison
 (#2702)

---
 src/guide/extras/reactivity-in-depth.md | 88 ++++++++++++++++++++++++-
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 7e40c578..5d586f9c 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -396,5 +396,89 @@ export function useMachine(options) {
 
 ### RxJS {#rxjs}
 
-[RxJS](https://rxjs.dev/)는 비동기 이벤트 스트림 작업을 위한 라이브러리입니다.
-[VueUse](https://vueuse.org/) 라이브러리는 RxJS 스트림을 Vue의 반응형 시스템과 연결하기 위한 [`@vueuse/rxjs`](https://vueuse.org/rxjs/readme) 추가 기능을 제공합니다.
+[RxJS](https://rxjs.dev/)는 비동기 이벤트 스트림을 다루기 위한 라이브러리입니다. [VueUse](https://vueuse.org/) 라이브러리는 Vue의 반응성 시스템과 RxJS 스트림을 연결하기 위한 [`@vueuse/rxjs`](https://vueuse.org/rxjs/readme.html) 애드온을 제공합니다.
+
+## 신호 연결 {#connection-to-signals}
+
+Vue의 Composition API에서 refs와 유사한 반응성 기본 요소를 "신호(signals)"라는 용어로 소개한 다른 프레임워크가 꽤 있습니다:
+
+- [Solid 신호](https://www.solidjs.com/docs/latest/api#createsignal)
+- [Angular 신호](https://angular.io/guide/signals)
+- [Preact 신호](https://preactjs.com/guide/v10/signals/)
+- [Qwik 신호](https://qwik.builder.io/docs/components/state/#usesignal)
+
+기본적으로, 신호는 Vue refs와 같은 종류의 반응성 기본 요소입니다. 접근 시 주입(provide) 추적 및 변화(mutation) 시 사이드 이펙트 트리거링을 제공하는 값 컨테이너입니다. 이 반응성 기본 요소 기반 패러다임은 프론트엔드 세계에서 특히 새로운 개념이 아닙니다: [Knockout 관찰가능 객체](https://knockoutjs.com/documentation/observables.html)와 [Meteor Tracker](https://docs.meteor.com/api/tracker.html)와 같은 구현으로 10년 이상 전으로 거슬러 올라갑니다. Vue Options API와 React 상태 관리 라이브러리 [MobX](https://mobx.js.org/)도 같은 원칙에 기반하지만, 기본 요소를 객체 속성 뒤에 숨깁니다.
+
+신호가 신호로 분류되기 위한 필수적 특성은 아니지만, 오늘날 이 개념은 종종 세밀한 구독을 통해 업데이트가 수행되는 렌더링 모델과 함께 논의됩니다. 가상 DOM의 사용으로 인해 Vue는 현재 [컴파일러를 통해 비슷한 최적화를 달성하는 데 의존합니다](/guide/extras/rendering-mechanism#compiler-informed-virtual-dom). 그러나 우리는 가상 DOM에 의존하지 않고 Vue의 내장 반응성 시스템을 더 활용하는 새로운 Solid 영감의 컴파일 전략(Vapor Mode)도 탐색하고 있습니다.
+
+### API 디자인의 절충 {#api-design-trade-offs}
+
+Preact와 Qwik의 신호 디자인은 Vue의 [shallowRef](/api/reactivity-advanced#shallowref)와 매우 유사합니다: 모두 `.value` 속성을 통해 변경 가능한 인터페이스를 제공합니다. 우리는 Solid와 Angular 신호에 대한 논의에 초점을 맞출 것입니다.
+
+#### Solid 신호 {#solid-signals}
+
+Solid의 `createSignal()` API 디자인은 읽기 / 쓰기 분리를 강조합니다. 신호는 읽기 전용 getter와 별도의 setter로 노출됩니다:
+
+```js
+const [count, setCount] = createSignal(0)
+
+count() // 값에 접근
+setCount(1) // 값 업데이트
+```
+
+`count` 신호가 setter 없이 전달될 수 있다는 점을 주목하세요. 이는 setter가 명시적으로 노출되지 않는 한 상태가 결코 변경될 수 없다는 것을 보장합니다. 이 안전 보장이 더 장황한 구문을 정당화하는지 여부는 프로젝트의 요구 사항과 개인의 취향에 따라 다를 수 있지만, 이 API 스타일을 선호하는 경우 Vue에서 쉽게 복제할 수 있습니다:
+
+```js
+import { shallowRef, triggerRef } from 'vue'
+
+export function createSignal(value, options) {
+  const r = shallowRef(value)
+  const get = () => r.value
+  const set = (v) => {
+    r.value = typeof v === 'function' ? v(r.value) : v
+    if (options?.equals === false) triggerRef(r)
+  }
+  return [get, set]
+}
+```
+
+[온라인 연습장으로 실행하기](https://play.vuejs.org/#eNpdUk1TgzAQ/Ss7uQAjgr12oNXxH+ix9IAYaDQkMV/qMPx3N6G0Uy9Msu/tvn2PTORJqcI7SrakMp1myoKh1qldI9iopLYwQadpa+krG0TLYYZeyxGSojSSs/d7E8vFh0ka0YhOCmPh0EknbB4mPYfTEeqbIelD1oiqXPRQCS+WjoojAW8A1Wmzm1A39KYZzHNVYiUib85aKeCx46z7rBuySqQe6h14uINN1pDIBWACVUcqbGwtl17EqvIiR3LyzwcmcXFuTi3n8vuF9jlYzYaBajxfMsDcomv6E/m9E51luN2NV99yR3OQKkAmgykss+SkMZerxMLEZFZ4oBYJGAA600VEryAaD6CPaJwJKwnr9ldR2WMedV1Dsi6WwB58emZlsAV/zqmH9LzfvqBfruUmNvZ4QN7VearjenP4aHwmWsABt4x/+tiImcx/z27Jqw==)
+
+#### Angular 신호 {#angular-signals}
+
+Angular는 더티 체크(dirty-checking)를 포기하고 자체 반응성 기본 요소의 구현을 도입함으로써 일부 근본적인 변화를 겪고 있습니다. Angular 신호 API는 다음과 같습니다:
+
+```js
+const count = signal(0)
+
+count() // 값에 접근
+count.set(1) // 새로운 값 설정
+count.update((v) => v + 1) // 이전 값에 기반한 업데이트
+```
+
+다시 한번, 우리는 Vue에서 API를 쉽게 복제할 수 있습니다:
+
+```js
+import { shallowRef } from 'vue'
+
+export function signal(initialValue) {
+  const r = shallowRef(initialValue)
+  const s = () => r.value
+  s.set = (value) => {
+    r.value = value
+  }
+  s.update = (updater) => {
+    r.value = updater(r.value)
+  }
+  return s
+}
+```
+
+[온라인 연습장으로 실행하기](https://play.vuejs.org/#eNp9Ul1v0zAU/SuWX9ZCSRh7m9IKGHuAB0AD8WQJZclt6s2xLX+ESlH+O9d2krbr1Df7nnPu17k9/aR11nmgt7SwleHaEQvO6w2TvNXKONITyxtZihWpVKu9g5oMZGtUS66yvJSNF6V5lyjZk71ikslKSeuQ7qUj61G+eL+cgFr5RwGITAkXiyVZb5IAn2/IB+QWeeoHO8GPg1aL0gH+CCl215u7mJ3bW9L3s3IYihyxifMlFRpJqewL1qN3TknysRK8el4zGjNlXtdYa9GFrjryllwvGY18QrisDLQgXZTnSX8pF64zzD7pDWDghbbI5/Hoip7tFL05eLErhVD/HmB75Edpyd8zc9DUaAbso3TrZeU4tjfawSV3vBR/SuFhSfrQUXLHBMvmKqe8A8siK7lmsi5gAbJhWARiIGD9hM7BIfHSgjGaHljzlDyGF2MEPQs6g5dpcAIm8Xs+2XxODTgUn0xVYdJ5RxPhKOd4gdMsA/rgLEq3vEEHlEQPYrbgaqu5APNDh6KWUTyuZC2jcWvfYswZD6spXu2gen4l/mT3Icboz3AWpgNGZ8yVBttM8P2v77DH9wy2qvYC2RfAB7BK+NBjon32ssa2j3ix26/xsrhsftv7vQNpp6FCo4E5RD6jeE93F0Y/tHuT3URd2OLwHyXleRY=)
+
+Vue refs와 비교할 때, Solid와 Angular의 getter 기반 API 스타일은 Vue 컴포넌트에서 사용될 때 몇 가지 흥미로운 절충을 제공합니다:
+
+- `()`는 `.value`보다 약간 덜 장황하지만, 값을 업데이트하는 것은 더 장황합니다.
+- ref-언래핑이 없습니다: 값을 접근할 때 항상 `()`이 필요합니다. 이는 모든 곳에서 값 접근을 일관되게 합니다. 이는 또한 원시 신호를 컴포넌트 props로 내려보낼 수 있음을 의미합니다.
+
+이러한 API 스타일이 여러분에게 맞는지는 어느 정도 주관적입니다. 우리의 목표는 이러한 다른 API 디자인 간의 근본적 유사성과 절충을 보여주는 것입니다. 또한 Vue가 유연하다는 것을 보여주고 싶습니다: 실제로 기존 API에 완전히 묶여 있지 않습니다. 필요한 경우, 더 구체적인 요구 사항에 맞게 자체 반응성 기본 요소 API를 만들 수 있습니다.

From e9e751791b44399ea026d741a35a3e93ef59b80a Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 23:00:04 +0900
Subject: [PATCH 6/8] docs: add once option on watcher (#2698)

---
 src/guide/essentials/watchers.md | 34 ++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md
index b6f040bb..697c78a0 100644
--- a/src/guide/essentials/watchers.md
+++ b/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">
 

From 508ed7695fbba5e4731e980e0ccb77d2d21ba29e Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 23:00:38 +0900
Subject: [PATCH 7/8] Update props.md (#2697)

---
 src/guide/components/props.md | 1 +
 1 file changed, 1 insertion(+)

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

From f62c0aa7e6502a4874c954f19ffe11fc020c7df3 Mon Sep 17 00:00:00 2001
From: Niceplugin <niceplugin@gmail.com>
Date: Mon, 19 Feb 2024 23:03:14 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=EA=B5=90=EC=A0=95:=20=EC=9D=B4=ED=8C=A9?=
 =?UTF-8?q?=ED=8A=B8=20=E2=86=92=20=EC=9D=B4=ED=8E=99=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/glossary/index.md                   | 10 ++++----
 src/guide/extras/reactivity-in-depth.md | 34 ++++++++++++-------------
 src/guide/extras/rendering-mechanism.md |  4 +--
 src/guide/scaling-up/ssr.md             |  6 ++---
 src/guide/scaling-up/testing.md         |  2 +-
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/glossary/index.md b/src/glossary/index.md
index 69f1a2ef..ec2ec51c 100644
--- a/src/glossary/index.md
+++ b/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)
diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 5d586f9c..2d74e41d 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -45,11 +45,11 @@ function update() {
 
 그런 다음 몇 가지 용어를 정의해야 합니다:
 
-- `update()` 함수는 프로그램의 상태를 수정하기 때문에 "**사이드 이팩트**" 줄여서 "**이팩트**"를 생성합니다.
+- `update()` 함수는 프로그램의 상태를 수정하기 때문에 "**사이드 이펙트**" 줄여서 "**이펙트**"를 생성합니다.
 
-- `A0` 및 `A1`은 해당 값이 이팩트를 수행하는 데 사용되므로 이팩트의 "**의존성**"(dependency)으로 간주됩니다. 그 이팩트는 의존성에 대한 "**구독자**"(subscriber)라고 합니다.
+- `A0` 및 `A1`은 해당 값이 이펙트를 수행하는 데 사용되므로 이펙트의 "**의존성**"(dependency)으로 간주됩니다. 그 이펙트는 의존성에 대한 "**구독자**"(subscriber)라고 합니다.
 
-우리에게 필요한 것은 `A0` 또는 `A1`(**의존성**)이 변경될 때마다 `update()`(**이팩트**)를 호출할 수 있는 함수입니다:
+우리에게 필요한 것은 `A0` 또는 `A1`(**의존성**)이 변경될 때마다 `update()`(**이펙트**)를 호출할 수 있는 함수입니다:
 
 ```js
 whenDepsChange(update)
@@ -59,9 +59,9 @@ whenDepsChange(update)
 
 1. 변수가 읽힐 때를 추적합니다. 예를 들어 `A0 + A1` 표현식을 평가할 때 `A0`과 `A1`이 모두 읽힙니다.
 
-2. 현재 실행 중인 이팩트가 있을 때 변수를 읽으면, 해당 이팩트를 해당 변수의 구독자로 만듭니다. 예를 들어 `A0`과 `A1`은 `update()`가 실행될 때 읽히기 때문에 `update()`는 첫 번째 호출 이후에 `A0`과 `A1`의 구독자가 됩니다.
+2. 현재 실행 중인 이펙트가 있을 때 변수를 읽으면, 해당 이펙트를 해당 변수의 구독자로 만듭니다. 예를 들어 `A0`과 `A1`은 `update()`가 실행될 때 읽히기 때문에 `update()`는 첫 번째 호출 이후에 `A0`과 `A1`의 구독자가 됩니다.
 
-3. 변수가 언제 변이되는지 감지합니다. 예를 들어 `A0`에 새 값이 할당되면, 모든 구독자 이팩트에 다시 실행하도록 알립니다.
+3. 변수가 언제 변이되는지 감지합니다. 예를 들어 `A0`에 새 값이 할당되면, 모든 구독자 이펙트에 다시 실행하도록 알립니다.
 
 ## Vue에서 반응형 작동 방식 {#how-reactivity-works-in-vue}
 
@@ -108,10 +108,10 @@ function ref(value) {
 
 - `reactive()`에서 반환된 프록시는 원본과 동일하게 동작하지만 `===` 연산자를 사용하여 원본과 비교하면 다른 ID를 갖습니다.
 
-`track()` 내부에서 현재 실행 중인 이팩트가 있는지 확인합니다. 존재하는 경우, 추적 중인 속성에 대한 구독자 이팩트(Set에 저장됨)를 조회하고 이팩트를 Set에 추가합니다.
+`track()` 내부에서 현재 실행 중인 이펙트가 있는지 확인합니다. 존재하는 경우, 추적 중인 속성에 대한 구독자 이펙트(Set에 저장됨)를 조회하고 이펙트를 Set에 추가합니다.
 
 ```js
-// 이팩트가 실행되기 직전에 설정됩니다.
+// 이펙트가 실행되기 직전에 설정됩니다.
 // 우리는 나중에 이것에 대해 다룰 것입니다.
 let activeEffect
 
@@ -123,9 +123,9 @@ function track(target, key) {
 }
 ```
 
-이팩트 구독은 전역 `WeakMap<target, Map<key, Set<effect>>>` 데이터 구조에 저장됩니다. 속성에 대한 구독 이팩트 Set이 발견되지 않은 경우(처음 추적 시) 생성됩니다. 이것이 `getSubscribersForProperty()` 함수가 하는 일입니다. 간단하게 하기 위해 자세한 내용은 건너뛰겠습니다.
+이펙트 구독은 전역 `WeakMap<target, Map<key, Set<effect>>>` 데이터 구조에 저장됩니다. 속성에 대한 구독 이펙트 Set이 발견되지 않은 경우(처음 추적 시) 생성됩니다. 이것이 `getSubscribersForProperty()` 함수가 하는 일입니다. 간단하게 하기 위해 자세한 내용은 건너뛰겠습니다.
 
-`trigger()` 내부에서 속성에 대한 구독자 이팩트를 다시 조회합니다. 그러나 이번에는 우리가 그것들을 대신 호출합니다:
+`trigger()` 내부에서 속성에 대한 구독자 이펙트를 다시 조회합니다. 그러나 이번에는 우리가 그것들을 대신 호출합니다:
 
 ```js
 function trigger(target, key) {
@@ -147,11 +147,11 @@ function whenDepsChange(update) {
 }
 ```
 
-실제 업데이트를 실행하기 전에 자신을 현재 활성 이팩트로 설정하는 이팩트에 로우(raw) `업데이트` 함수를 래핑합니다. 이것은 현재 활성 이팩트를 찾기 위해 업데이트 동안 `track()` 호출을 활성화합니다.
+실제 업데이트를 실행하기 전에 자신을 현재 활성 이펙트로 설정하는 이펙트에 로우(raw) `업데이트` 함수를 래핑합니다. 이것은 현재 활성 이펙트를 찾기 위해 업데이트 동안 `track()` 호출을 활성화합니다.
 
-이 시점에서 의존성을 자동으로 추적하고 의존성이 변경될 때마다 다시 실행하는 이팩트를 만들었습니다. 우리는 이것을 **반응 이팩트**(Reactive Effect)라고 부릅니다.
+이 시점에서 의존성을 자동으로 추적하고 의존성이 변경될 때마다 다시 실행하는 이펙트를 만들었습니다. 우리는 이것을 **반응 이펙트**(Reactive Effect)라고 부릅니다.
 
-Vue는 반응 이팩트를 생성할 수 있는 [`watchEffect()`](/api/reactivity-core.html#watcheffect) API를 제공합니다. 사실, 예제의 `whenDepsChange()`와 매우 유사하게 작동한다는 것을 눈치채셨을 것입니다. 이제 실제 Vue API를 사용하여 원래 예제를 다시 작업할 수 있습니다:
+Vue는 반응 이펙트를 생성할 수 있는 [`watchEffect()`](/api/reactivity-core.html#watcheffect) API를 제공합니다. 사실, 예제의 `whenDepsChange()`와 매우 유사하게 작동한다는 것을 눈치채셨을 것입니다. 이제 실제 Vue API를 사용하여 원래 예제를 다시 작업할 수 있습니다:
 
 ```js
 import { ref, watchEffect } from 'vue'
@@ -165,11 +165,11 @@ watchEffect(() => {
   A2.value = A0.value + A1.value
 })
 
-// 이팩트가 트리거됨
+// 이펙트가 트리거됨
 A0.value = 2
 ```
 
-반응 이팩트를 사용하여 ref를 변경하는 것이 가장 흥미로운 사용 사례는 아닙니다. 계산된 속성을 사용하면 더 선언적입니다:
+반응 이펙트를 사용하여 ref를 변경하는 것이 가장 흥미로운 사용 사례는 아닙니다. 계산된 속성을 사용하면 더 선언적입니다:
 
 ```js
 import { ref, computed } from 'vue'
@@ -181,9 +181,9 @@ const A2 = computed(() => A0.value + A1.value)
 A0.value = 2
 ```
 
-내부적으로 `computed`는 무효화 및 재계산을 반응 이팩트를 사용하여 관리합니다.
+내부적으로 `computed`는 무효화 및 재계산을 반응 이펙트를 사용하여 관리합니다.
 
-그렇다면 일반적이고 유용한 반응 이팩트의 예는 무엇일까요? DOM을 업데이트 하는 것입니다! 다음과 같이 간단한 "반응형 렌더링"을 구현할 수 있습니다:
+그렇다면 일반적이고 유용한 반응 이펙트의 예는 무엇일까요? DOM을 업데이트 하는 것입니다! 다음과 같이 간단한 "반응형 렌더링"을 구현할 수 있습니다:
 
 ```js
 import { ref, watchEffect } from 'vue'
@@ -198,7 +198,7 @@ watchEffect(() => {
 count.value++
 ```
 
-사실 이것은 Vue 컴포넌트가 상태와 DOM을 동기화 상태로 유지하는 방법과 매우 유사합니다. 각 컴포넌트 인스턴스는 DOM을 렌더링하고 업데이트하는 반응 이팩트를 생성합니다. 물론 Vue 컴포넌트는 `innerHTML`보다 훨씬 더 효율적인 방법으로 DOM을 업데이트합니다. 이것은 [렌더링 메커니즘](./rendering-mechanism)에서 논의됩니다.
+사실 이것은 Vue 컴포넌트가 상태와 DOM을 동기화 상태로 유지하는 방법과 매우 유사합니다. 각 컴포넌트 인스턴스는 DOM을 렌더링하고 업데이트하는 반응 이펙트를 생성합니다. 물론 Vue 컴포넌트는 `innerHTML`보다 훨씬 더 효율적인 방법으로 DOM을 업데이트합니다. 이것은 [렌더링 메커니즘](./rendering-mechanism)에서 논의됩니다.
 
 <div class="options-api">
 
diff --git a/src/guide/extras/rendering-mechanism.md b/src/guide/extras/rendering-mechanism.md
index 3691360b..4fd32b46 100644
--- a/src/guide/extras/rendering-mechanism.md
+++ b/src/guide/extras/rendering-mechanism.md
@@ -54,10 +54,10 @@ const vnode = {
 
 2. **마운트**:
    런타임 렌더러는 렌더 함수를 호출하고, 반환된 가상 DOM 트리를 탐색하고, 이를 기반으로 실제 DOM 노드를 생성합니다.
-   이 단계는 [반응 이팩트](./reactivity-in-depth)가 실행되므로 사용된 모든 반응형 의존성을 추적합니다.
+   이 단계는 [반응 이펙트](./reactivity-in-depth)가 실행되므로 사용된 모든 반응형 의존성을 추적합니다.
 
 3. **패치**:
-   마운트 중에 사용된 의존성이 변경되면 이팩트가 다시 실행됩니다.
+   마운트 중에 사용된 의존성이 변경되면 이펙트가 다시 실행됩니다.
    이번에는 업데이트된 새로운 가상 DOM 트리가 생성됩니다.
    런타임 렌더러는 새 트리를 탐색하고 이전 트리와 비교하고 필요한 업데이트를 실제 DOM에 적용합니다.
 
diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md
index fe11ff73..fd9e3553 100644
--- a/src/guide/scaling-up/ssr.md
+++ b/src/guide/scaling-up/ssr.md
@@ -309,11 +309,11 @@ SSR 동안 각 리퀘스트 URL은 앱이 원하는 상태로 매핑됩니다.
 동적 업데이트가 없기 때문에 <span class="options-api">`mounted`</span><span class="composition-api">`onMounted`</span> 또는 <span class="options-api">`updated`</span><span class="composition-api">`onUpdated`</span>과 같은 생명 주기 훅은 SSR 중에 호출되지 않고 클라이언트에서만 실행됩니다.
 <span class="options-api">SSR 동안 호출되는 유일한 훅은 `beforeCreate` 및 `created`입니다.</span>
 
-<span class="options-api">`beforeCreate`과 `created`</span><span class="composition-api">`setup()` 또는 `<script setup>`의 루트 범위</span> 에서 정리가 필요한 사이드 이팩트을 생성하는 코드를 피해야 합니다.
-이러한 사이드 이팩트의 예는 `setInterval`로 타이머를 설정하는 것입니다.
+<span class="options-api">`beforeCreate`과 `created`</span><span class="composition-api">`setup()` 또는 `<script setup>`의 루트 범위</span> 에서 정리가 필요한 사이드 이펙트을 생성하는 코드를 피해야 합니다.
+이러한 사이드 이펙트의 예는 `setInterval`로 타이머를 설정하는 것입니다.
 클라이언트 측 전용 코드에서 타이머를 설정한 다음 <span class="options-api">`beforeUnmount`</span><span class="composition-api">`onBeforeUnmount`</span> 또는 <span class="options-api">`unmounted`</span><span class="composition-api">`onUnmounted`</span>에서 해제할 수 있습니다.
 그러나 마운트 해제 훅은 SSR 중에 호출되지 않기 때문에 타이머는 영원히 유지됩니다.
-이를 피하려면 사이드 이팩트 코드를 <span class="options-api">`mounted`</span><span class="composition-api">`onMounted`</span>로 이동하십시오.
+이를 피하려면 사이드 이펙트 코드를 <span class="options-api">`mounted`</span><span class="composition-api">`onMounted`</span>로 이동하십시오.
 
 ### 플랫폼별 API에 대한 접근 {#access-to-platform-specific-apis}
 
diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md
index 9dee345f..8576a6e4 100644
--- a/src/guide/scaling-up/testing.md
+++ b/src/guide/scaling-up/testing.md
@@ -20,7 +20,7 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 Vue 앱의 테스트 전략을 설계할 때는 다음 테스트 유형을 활용해야 합니다:
 
-- **단위**: 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 사이드 이팩트를 생성하는지 확인합니다.
+- **단위**: 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 사이드 이펙트를 생성하는지 확인합니다.
 - **컴포넌트**: 컴포넌트가 마운트, 렌더링, 상호 작용이 의도대로 작동하는지 확인합니다. 이러한 테스트는 단위 테스트보다 더 많은 코드를 가져오고 더 복잡하며 실행하는 데 더 많은 시간이 필요합니다.
 - **End-to-end**: 여러 페이지에 걸쳐 있는 기능을 확인하고, 프로덕션으로 빌드되는 Vue 앱처럼 실제 네트워크 요청을 합니다. 이러한 테스트에는 종종 데이터베이스 또는 기타 백엔드를 구축하는 작업이 포함됩니다.