diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 1c06ae92..f522fbaa 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -16,6 +16,7 @@ const nav: ThemeConfig['nav'] = [
       { text: '시작하기', link: '/guide/quick-start' },
       // { text: 'Style Guide', link: '/style-guide/' },
       { text: '용어 사전', link: '/glossary/' },
+      { text: '애러 참고', link: '/error-reference/' },
       {
         text: 'Vue 2 문서',
         link: 'https://v2.ko.vuejs.org'
@@ -419,7 +420,8 @@ export const sidebar: ThemeConfig['sidebar'] = {
         { text: '렌더 함수', link: '/api/render-function' },
         { text: '서버 사이드 렌더링', link: '/api/ssr' },
         { text: 'TypeScript 유틸리티 타입', link: '/api/utility-types' },
-        { text: '커스텀 렌더러', link: '/api/custom-renderer' }
+        { text: '커스텀 렌더러', link: '/api/custom-renderer' },
+        { text: '컴파일 타임 플래그', link: '/api/compile-time-flags' }
       ]
     }
   ],
@@ -569,15 +571,25 @@ export default defineConfigWithTheme<ThemeConfig>({
 
   head: [
     ['meta', { name: 'theme-color', content: '#3c8772' }],
-    ['meta', { name: 'twitter:site', content: '@vuejs' }],
-    ['meta', { name: 'twitter:card', content: 'summary' }],
+    ['meta', { property: 'og:url', content: 'https://vuejs.org/' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:title', content: 'Vue.js' }],
     [
       'meta',
       {
-        name: 'twitter:image',
+        property: 'og:description',
+        content: 'Vue.js - The Progressive JavaScript Framework'
+      }
+    ],
+    [
+      'meta',
+      {
+        property: 'og:image',
         content: 'https://vuejs.org/images/logo.png'
       }
     ],
+    ['meta', { name: 'twitter:site', content: '@vuejs' }],
+    ['meta', { name: 'twitter:card', content: 'summary' }],
     [
       'link',
       {
@@ -695,6 +707,7 @@ export default defineConfigWithTheme<ThemeConfig>({
   markdown: {
     config(md) {
       md.use(headerPlugin)
+      // .use(textAdPlugin)
     }
   },
 
diff --git a/package.json b/package.json
index 5344c01a..d45d6086 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "@vue/theme": "^2.2.5",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
-    "vitepress": "1.0.0-rc.31",
-    "vue": "^3.4.0-beta.1"
+    "vitepress": "1.0.0-rc.33",
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 262bbd12..f8ee5ffe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ dependencies:
     version: 3.0.0
   '@vue/theme':
     specifier: ^2.2.5
-    version: 2.2.5(vitepress@1.0.0-rc.31)(vue@3.4.0-beta.3)
+    version: 2.2.5(vitepress@1.0.0-rc.33)(vue@3.4.3)
   dynamics.js:
     specifier: ^1.1.5
     version: 1.1.5
@@ -21,11 +21,11 @@ dependencies:
     specifier: ^3.9.0
     version: 3.12.2
   vitepress:
-    specifier: 1.0.0-rc.31
-    version: 1.0.0-rc.31(@types/node@20.10.2)(terser@5.24.0)
+    specifier: 1.0.0-rc.33
+    version: 1.0.0-rc.33(@types/node@20.10.2)(terser@5.24.0)
   vue:
-    specifier: ^3.4.0-beta.1
-    version: 3.4.0-beta.3
+    specifier: ^3.4.0
+    version: 3.4.3
 
 devDependencies:
   '@types/markdown-it':
@@ -190,16 +190,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/parser@7.23.3:
-    resolution: {integrity: sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: false
-
-  /@babel/parser@7.23.5:
-    resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==}
+  /@babel/parser@7.23.6:
+    resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
@@ -582,12 +574,6 @@ packages:
     dev: false
     optional: true
 
-  /@types/hast@3.0.3:
-    resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
-    dependencies:
-      '@types/unist': 3.0.2
-    dev: false
-
   /@types/linkify-it@3.0.5:
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
@@ -605,12 +591,6 @@ packages:
       '@types/mdurl': 1.0.5
     dev: false
 
-  /@types/mdast@4.0.3:
-    resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
-    dependencies:
-      '@types/unist': 3.0.2
-    dev: false
-
   /@types/mdurl@1.0.5:
     resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
 
@@ -619,10 +599,6 @@ packages:
     dependencies:
       undici-types: 5.26.5
 
-  /@types/unist@3.0.2:
-    resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
-    dev: false
-
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -631,196 +607,109 @@ packages:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: false
 
-  /@ungap/structured-clone@1.2.0:
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-    dev: false
-
-  /@vitejs/plugin-vue@5.0.0-beta.1(vite@5.0.4)(vue@3.3.8):
+  /@vitejs/plugin-vue@5.0.0-beta.1(vite@5.0.10)(vue@3.4.3):
     resolution: {integrity: sha512-zFAHH6RJH2w/LQlFyqrml96yjYmT8n8e3O4esRxHzCn250uOlkuc0IAqFJWqdxLmQquEM4q5/ECnQJRGsKjoIw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.4(@types/node@20.10.2)(terser@5.24.0)
-      vue: 3.3.8
+      vite: 5.0.10(@types/node@20.10.2)(terser@5.24.0)
+      vue: 3.4.3
     dev: false
 
-  /@vue/compiler-core@3.3.8:
-    resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
+  /@vue/compiler-core@3.4.3:
+    resolution: {integrity: sha512-u8jzgFg0EDtSrb/hG53Wwh1bAOQFtc1ZCegBpA/glyvTlgHl+tq13o1zvRfLbegYUw/E4mSTGOiCnAJ9SJ+lsg==}
     dependencies:
-      '@babel/parser': 7.23.3
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: false
-
-  /@vue/compiler-core@3.4.0-beta.3:
-    resolution: {integrity: sha512-rQ4u9j0iL1l1SqCJqwX0fGJm8n6lhE3QcoeGl5rydvtfri9kbL+XgQ9kzfYUaQayGGGxyfqUBBymo+f/V1FmNQ==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/shared': 3.4.0-beta.3
+      '@babel/parser': 7.23.6
+      '@vue/shared': 3.4.3
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.0.2
     dev: false
 
-  /@vue/compiler-dom@3.3.8:
-    resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
+  /@vue/compiler-dom@3.4.3:
+    resolution: {integrity: sha512-oGF1E9/htI6JWj/lTJgr6UgxNCtNHbM6xKVreBWeZL9QhRGABRVoWGAzxmtBfSOd+w0Zi5BY0Es/tlJrN6WgEg==}
     dependencies:
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
+      '@vue/compiler-core': 3.4.3
+      '@vue/shared': 3.4.3
     dev: false
 
-  /@vue/compiler-dom@3.4.0-beta.3:
-    resolution: {integrity: sha512-u87VfqA7yeqT5ipvMruReePHBwFi/+vraH3UQ82ihNI/e6YtZ91p1Utz75WTUjpiDyPWpbym/xJLZD9bMhWsBQ==}
+  /@vue/compiler-sfc@3.4.3:
+    resolution: {integrity: sha512-NuJqb5is9I4uzv316VRUDYgIlPZCG8D+ARt5P4t5UDShIHKL25J3TGZAUryY/Aiy0DsY7srJnZL5ryB6DD63Zw==}
     dependencies:
-      '@vue/compiler-core': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
-    dev: false
-
-  /@vue/compiler-sfc@3.3.8:
-    resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
-    dependencies:
-      '@babel/parser': 7.23.3
-      '@vue/compiler-core': 3.3.8
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/reactivity-transform': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      postcss: 8.4.31
-      source-map-js: 1.0.2
-    dev: false
-
-  /@vue/compiler-sfc@3.4.0-beta.3:
-    resolution: {integrity: sha512-PZVZtwO5WvL/yp+gJnbnXKPIehn6In7LWuGkGZ58w0BCv5Q5d0a0BW76kFwiJu6/do2AtEKOq23j2kdcdRJjFg==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/compiler-core': 3.4.0-beta.3
-      '@vue/compiler-dom': 3.4.0-beta.3
-      '@vue/compiler-ssr': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
+      '@babel/parser': 7.23.6
+      '@vue/compiler-core': 3.4.3
+      '@vue/compiler-dom': 3.4.3
+      '@vue/compiler-ssr': 3.4.3
+      '@vue/shared': 3.4.3
       estree-walker: 2.0.2
       magic-string: 0.30.5
       postcss: 8.4.32
       source-map-js: 1.0.2
     dev: false
 
-  /@vue/compiler-ssr@3.3.8:
-    resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
-    dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: false
-
-  /@vue/compiler-ssr@3.4.0-beta.3:
-    resolution: {integrity: sha512-8/2HnPWhAtG55tkSGlFTezf0LKheXoMI7KekTL86abb+KTe7WOeY2oCOjLwR0J2kyb3VK6mIO3WFwlzDHZlbkQ==}
+  /@vue/compiler-ssr@3.4.3:
+    resolution: {integrity: sha512-wnYQtMBkeFSxgSSQbYGQeXPhQacQiog2c6AlvMldQH6DB+gSXK/0F6DVXAJfEiuBSgBhUc8dwrrG5JQcqwalsA==}
     dependencies:
-      '@vue/compiler-dom': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
+      '@vue/compiler-dom': 3.4.3
+      '@vue/shared': 3.4.3
     dev: false
 
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
     dev: false
 
-  /@vue/reactivity-transform@3.3.8:
-    resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
+  /@vue/reactivity@3.4.3:
+    resolution: {integrity: sha512-q5f9HLDU+5aBKizXHAx0w4whkIANs1Muiq9R5YXm0HtorSlflqv9u/ohaMxuuhHWCji4xqpQ1eL04WvmAmGnFg==}
     dependencies:
-      '@babel/parser': 7.23.3
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-    dev: false
-
-  /@vue/reactivity@3.3.8:
-    resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
-    dependencies:
-      '@vue/shared': 3.3.8
-    dev: false
-
-  /@vue/reactivity@3.4.0-beta.3:
-    resolution: {integrity: sha512-tRmOn5kN4ItyovOizivkPuEzI1rh3bw/7+4VqNPm53QxnNjpUajD9v9x8E2sZ7kCHqy2x7aS54RtA8QfHEnZrw==}
-    dependencies:
-      '@vue/shared': 3.4.0-beta.3
+      '@vue/shared': 3.4.3
     dev: false
 
   /@vue/repl@3.0.0:
     resolution: {integrity: sha512-tGYibiftMo5yEuIKPWVsNuuNDejjJk0JQmvKtTm12KNLFqtGD7fWoGv1qUzcN9EAxwVeDgnT9ljRgqGVgZkyEg==}
     dev: false
 
-  /@vue/runtime-core@3.3.8:
-    resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
+  /@vue/runtime-core@3.4.3:
+    resolution: {integrity: sha512-C1r6QhB1qY7D591RCSFhMULyzL9CuyrGc+3PpB0h7dU4Qqw6GNyo4BNFjHZVvsWncrUlKX3DIKg0Y7rNNr06NQ==}
     dependencies:
-      '@vue/reactivity': 3.3.8
-      '@vue/shared': 3.3.8
+      '@vue/reactivity': 3.4.3
+      '@vue/shared': 3.4.3
     dev: false
 
-  /@vue/runtime-core@3.4.0-beta.3:
-    resolution: {integrity: sha512-ALmtR7/iLm4V8KzxyYBdk6g8ktCqQQnEU27j5Gi9D+nDtLIrZoKgvYOx9QU6I92W3UhHdnqmhSXySaxYG6C+hQ==}
+  /@vue/runtime-dom@3.4.3:
+    resolution: {integrity: sha512-wrsprg7An5Ec+EhPngWdPuzkp0BEUxAKaQtN9dPU/iZctPyD9aaXmVtehPJerdQxQale6gEnhpnfywNw3zOv2A==}
     dependencies:
-      '@vue/reactivity': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
-    dev: false
-
-  /@vue/runtime-dom@3.3.8:
-    resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
-    dependencies:
-      '@vue/runtime-core': 3.3.8
-      '@vue/shared': 3.3.8
-      csstype: 3.1.2
-    dev: false
-
-  /@vue/runtime-dom@3.4.0-beta.3:
-    resolution: {integrity: sha512-cUlFmJrwV469etEhqFWf9GiXDanBu0N4Tk1OshUeBfHeQrdv2TxBQKh5/t2FJEBT4vJ0U59RhUILQW+RYvOFPA==}
-    dependencies:
-      '@vue/runtime-core': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
+      '@vue/runtime-core': 3.4.3
+      '@vue/shared': 3.4.3
       csstype: 3.1.3
     dev: false
 
-  /@vue/server-renderer@3.3.8(vue@3.3.8):
-    resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
+  /@vue/server-renderer@3.4.3(vue@3.4.3):
+    resolution: {integrity: sha512-BUxt8oVGMKKsqSkM1uU3d3Houyfy4WAc2SpSQRebNd+XJGATVkW/rO129jkyL+kpB/2VRKzE63zwf5RtJ3XuZw==}
     peerDependencies:
-      vue: 3.3.8
+      vue: 3.4.3
     dependencies:
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/shared': 3.3.8
-      vue: 3.3.8
+      '@vue/compiler-ssr': 3.4.3
+      '@vue/shared': 3.4.3
+      vue: 3.4.3
     dev: false
 
-  /@vue/server-renderer@3.4.0-beta.3(vue@3.4.0-beta.3):
-    resolution: {integrity: sha512-Alf6kB6FUu0BVSI3lu8xXZ+Fz5h+XOxqKLV9y+4gPcGfLoRlKx8Vm1vLse0ITIfEKi+GD+fV5+FPCHBwobokcA==}
-    peerDependencies:
-      vue: 3.4.0-beta.3
-    dependencies:
-      '@vue/compiler-ssr': 3.4.0-beta.3
-      '@vue/shared': 3.4.0-beta.3
-      vue: 3.4.0-beta.3
+  /@vue/shared@3.4.3:
+    resolution: {integrity: sha512-rIwlkkP1n4uKrRzivAKPZIEkHiuwY5mmhMJ2nZKCBLz8lTUlE73rQh4n1OnnMurXt1vcUNyH4ZPfdh8QweTjpQ==}
     dev: false
 
-  /@vue/shared@3.3.8:
-    resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
-    dev: false
-
-  /@vue/shared@3.4.0-beta.3:
-    resolution: {integrity: sha512-ZHMNXUGBt9zauZyNQ/XXD15eJNuWTbPhhOkCj55pZvZv7ENopvjlGTTmo82oUjmC2sixyw/HknGtQM0hgQ+qEw==}
-    dev: false
-
-  /@vue/theme@2.2.5(vitepress@1.0.0-rc.31)(vue@3.4.0-beta.3):
+  /@vue/theme@2.2.5(vitepress@1.0.0-rc.33)(vue@3.4.3):
     resolution: {integrity: sha512-UUPD0XxlRa69Ytely8JEU/cu8Pae5f4UqZNIXANPN8KT6j/O23dCbOfp1cKlSn+Q/xXLYp0K+vRh4IqZjt/9BQ==}
     peerDependencies:
       vitepress: ^1.0.0-alpha.60
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2
-      '@vueuse/core': 9.13.0(vue@3.4.0-beta.3)
+      '@vueuse/core': 9.13.0(vue@3.4.3)
       body-scroll-lock: 3.1.5
       normalize.css: 8.0.1
-      vitepress: 1.0.0-rc.31(@types/node@20.10.2)(terser@5.24.0)
+      vitepress: 1.0.0-rc.33(@types/node@20.10.2)(terser@5.24.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -831,32 +720,32 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/core@10.6.1(vue@3.3.8):
-    resolution: {integrity: sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==}
+  /@vueuse/core@10.7.1(vue@3.4.3):
+    resolution: {integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.6.1
-      '@vueuse/shared': 10.6.1(vue@3.3.8)
-      vue-demi: 0.14.6(vue@3.3.8)
+      '@vueuse/metadata': 10.7.1
+      '@vueuse/shared': 10.7.1(vue@3.4.3)
+      vue-demi: 0.14.6(vue@3.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/core@9.13.0(vue@3.4.0-beta.3):
+  /@vueuse/core@9.13.0(vue@3.4.3):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.4.0-beta.3)
-      vue-demi: 0.14.6(vue@3.4.0-beta.3)
+      '@vueuse/shared': 9.13.0(vue@3.4.3)
+      vue-demi: 0.14.6(vue@3.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
-    resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
+  /@vueuse/integrations@10.7.1(focus-trap@7.5.4)(vue@3.4.3):
+    resolution: {integrity: sha512-cKo5LEeKVHdBRBtMTOrDPdR0YNtrmN9IBfdcnY2P3m5LHVrsD0xiHUtAH1WKjHQRIErZG6rJUa6GA4tWZt89Og==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -896,36 +785,36 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.6.1(vue@3.3.8)
-      '@vueuse/shared': 10.6.1(vue@3.3.8)
+      '@vueuse/core': 10.7.1(vue@3.4.3)
+      '@vueuse/shared': 10.7.1(vue@3.4.3)
       focus-trap: 7.5.4
-      vue-demi: 0.14.6(vue@3.3.8)
+      vue-demi: 0.14.6(vue@3.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/metadata@10.6.1:
-    resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
+  /@vueuse/metadata@10.7.1:
+    resolution: {integrity: sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw==}
     dev: false
 
   /@vueuse/metadata@9.13.0:
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
     dev: false
 
-  /@vueuse/shared@10.6.1(vue@3.3.8):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+  /@vueuse/shared@10.7.1(vue@3.4.3):
+    resolution: {integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.8)
+      vue-demi: 0.14.6(vue@3.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@9.13.0(vue@3.4.0-beta.3):
+  /@vueuse/shared@9.13.0(vue@3.4.3):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.0-beta.3)
+      vue-demi: 0.14.6(vue@3.4.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -962,44 +851,13 @@ packages:
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  /ccount@2.0.1:
-    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
-    dev: false
-
-  /character-entities-html4@2.1.0:
-    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
-    dev: false
-
-  /character-entities-legacy@3.0.0:
-    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
-    dev: false
-
-  /comma-separated-tokens@2.0.3:
-    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-    dev: false
-
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
     dev: false
 
-  /dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-    dev: false
-
-  /devlop@1.1.0:
-    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
-
   /dynamics.js@1.1.5:
     resolution: {integrity: sha512-c+LHNccaJS67T4Jfk9b/5CwYsZCHmc10+MplWB8WPFyqTMEqOf8MI56Rg0JRILWjtXnjuBO7xmrNevNnPX+NHg==}
     dev: false
@@ -1061,92 +919,6 @@ packages:
     resolution: {integrity: sha512-EkYnpG8qHgYBFAwsgsGEqvT1WUidX0tt/ijepx7z8EUJHElykg91RvW1XbkT59T0gZzzszOpjQv7SE41XuIXyQ==}
     dev: false
 
-  /hast-util-from-parse5@8.0.1:
-    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
-    dependencies:
-      '@types/hast': 3.0.3
-      '@types/unist': 3.0.2
-      devlop: 1.1.0
-      hastscript: 8.0.0
-      property-information: 6.4.0
-      vfile: 6.0.1
-      vfile-location: 5.0.2
-      web-namespaces: 2.0.1
-    dev: false
-
-  /hast-util-parse-selector@4.0.0:
-    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
-    dependencies:
-      '@types/hast': 3.0.3
-    dev: false
-
-  /hast-util-raw@9.0.1:
-    resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==}
-    dependencies:
-      '@types/hast': 3.0.3
-      '@types/unist': 3.0.2
-      '@ungap/structured-clone': 1.2.0
-      hast-util-from-parse5: 8.0.1
-      hast-util-to-parse5: 8.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.0.2
-      parse5: 7.1.2
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.1
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-    dev: false
-
-  /hast-util-to-html@9.0.0:
-    resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==}
-    dependencies:
-      '@types/hast': 3.0.3
-      '@types/unist': 3.0.2
-      ccount: 2.0.1
-      comma-separated-tokens: 2.0.3
-      hast-util-raw: 9.0.1
-      hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.0.2
-      property-information: 6.4.0
-      space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.3
-      zwitch: 2.0.4
-    dev: false
-
-  /hast-util-to-parse5@8.0.0:
-    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
-    dependencies:
-      '@types/hast': 3.0.3
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      property-information: 6.4.0
-      space-separated-tokens: 2.0.2
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-    dev: false
-
-  /hast-util-whitespace@3.0.0:
-    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
-    dependencies:
-      '@types/hast': 3.0.3
-    dev: false
-
-  /hastscript@8.0.0:
-    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
-    dependencies:
-      '@types/hast': 3.0.3
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 4.0.0
-      property-information: 6.4.0
-      space-separated-tokens: 2.0.2
-    dev: false
-
-  /html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-    dev: false
-
   /magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
@@ -1158,52 +930,12 @@ packages:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
     dev: false
 
-  /mdast-util-to-hast@13.0.2:
-    resolution: {integrity: sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==}
-    dependencies:
-      '@types/hast': 3.0.3
-      '@types/mdast': 4.0.3
-      '@ungap/structured-clone': 1.2.0
-      devlop: 1.1.0
-      micromark-util-sanitize-uri: 2.0.0
-      trim-lines: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
-    dev: false
-
-  /micromark-util-character@2.0.1:
-    resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
-    dependencies:
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.0
-    dev: false
-
-  /micromark-util-encode@2.0.0:
-    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
-    dev: false
-
-  /micromark-util-sanitize-uri@2.0.0:
-    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
-    dependencies:
-      micromark-util-character: 2.0.1
-      micromark-util-encode: 2.0.0
-      micromark-util-symbol: 2.0.0
-    dev: false
-
-  /micromark-util-symbol@2.0.0:
-    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
-    dev: false
-
-  /micromark-util-types@2.0.0:
-    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
-    dev: false
-
   /minisearch@6.3.0:
     resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==}
     dev: false
 
-  /mrmime@1.0.1:
-    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
     dev: false
 
@@ -1217,25 +949,10 @@ packages:
     resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
     dev: false
 
-  /parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-    dependencies:
-      entities: 4.5.0
-    dev: false
-
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: false
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: false
-
   /postcss@8.4.32:
     resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1249,10 +966,6 @@ packages:
     resolution: {integrity: sha512-UA9DX/OJwv6YwP9Vn7Ti/vF80XL+YA5H2l7BpCtUr3ya8LWHFzpiO5R+N7dN16ujpIxhekRFuOOF82bXX7K/lg==}
     dev: false
 
-  /property-information@6.4.0:
-    resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
-    dev: false
-
   /rollup@4.6.1:
     resolution: {integrity: sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -1273,16 +986,20 @@ packages:
       fsevents: 2.3.3
     dev: false
 
-  /shikiji-transformers@0.7.6:
-    resolution: {integrity: sha512-yTp+7JMD/aXbV9ndn14eo9IK/UNt8iDsLNyqlOmCtcldlkqWE9T2YKAlOHOTVaeDfYWUWZa2EgSXb/CBfepBrw==}
+  /shikiji-core@0.9.17:
+    resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==}
+    dev: false
+
+  /shikiji-transformers@0.9.17:
+    resolution: {integrity: sha512-2CCG9qSLS6Bn/jbeUTEuvC6YSuP8gm8VyX5VjmCvDKyCPGhlLJbH1k/kg9wfRt7cJqpYjhdMDgT5rkdYrOZnsA==}
     dependencies:
-      shikiji: 0.7.6
+      shikiji: 0.9.17
     dev: false
 
-  /shikiji@0.7.6:
-    resolution: {integrity: sha512-KzEtvSGQtBvfwVIB70kOmIfl/5rz1LC8j+tvlHXsJKAIdONNQvG1at7ivUUq3xUctqgO6fsO3AGomUSh0F+wsQ==}
+  /shikiji@0.9.17:
+    resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==}
     dependencies:
-      hast-util-to-html: 9.0.0
+      shikiji-core: 0.9.17
     dev: false
 
   /source-map-js@1.0.2:
@@ -1300,17 +1017,6 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  /space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-    dev: false
-
-  /stringify-entities@4.0.3:
-    resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==}
-    dependencies:
-      character-entities-html4: 2.1.0
-      character-entities-legacy: 3.0.0
-    dev: false
-
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: false
@@ -1330,70 +1036,11 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /trim-lines@3.0.1:
-    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
-    dev: false
-
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  /unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
-    dependencies:
-      '@types/unist': 3.0.2
-    dev: false
-
-  /unist-util-position@5.0.0:
-    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
-    dependencies:
-      '@types/unist': 3.0.2
-    dev: false
-
-  /unist-util-stringify-position@4.0.0:
-    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
-    dependencies:
-      '@types/unist': 3.0.2
-    dev: false
-
-  /unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-is: 6.0.0
-    dev: false
-
-  /unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
-    dev: false
-
-  /vfile-location@5.0.2:
-    resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
-    dependencies:
-      '@types/unist': 3.0.2
-      vfile: 6.0.1
-    dev: false
-
-  /vfile-message@4.0.2:
-    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-stringify-position: 4.0.0
-    dev: false
-
-  /vfile@6.0.1:
-    resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
-    dependencies:
-      '@types/unist': 3.0.2
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
-    dev: false
-
-  /vite@5.0.4(@types/node@20.10.2)(terser@5.24.0):
-    resolution: {integrity: sha512-RzAr8LSvM8lmhB4tQ5OPcBhpjOZRZjuxv9zO5UcxeoY2bd3kP3Ticd40Qma9/BqZ8JS96Ll/jeBX9u+LJZrhVg==}
+  /vite@5.0.10(@types/node@20.10.2)(terser@5.24.0):
+    resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -1422,19 +1069,19 @@ packages:
     dependencies:
       '@types/node': 20.10.2
       esbuild: 0.19.8
-      postcss: 8.4.31
+      postcss: 8.4.32
       rollup: 4.6.1
       terser: 5.24.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: false
 
-  /vitepress@1.0.0-rc.31(@types/node@20.10.2)(terser@5.24.0):
-    resolution: {integrity: sha512-ikH9pIjOOAbyoYAGBVfTz8TzuXp+UoWaIRMU4bw/oiTg8R65SbAaGKY84xx6TuL+f4VqUJ8lhzW82YyxSLvstA==}
+  /vitepress@1.0.0-rc.33(@types/node@20.10.2)(terser@5.24.0):
+    resolution: {integrity: sha512-XMwr5eXEB3KB1uCuOkojVaqsVSijmd6N9QmaM2M6aqJqzXzxNwuvWSiEGYl4qbwRAX6/nFRofhx9+FndtCNjGQ==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
-      postcss: ^8.4.31
+      postcss: ^8.4.32
     peerDependenciesMeta:
       markdown-it-mathjax3:
         optional: true
@@ -1444,18 +1091,18 @@ packages:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2
       '@types/markdown-it': 13.0.7
-      '@vitejs/plugin-vue': 5.0.0-beta.1(vite@5.0.4)(vue@3.3.8)
+      '@vitejs/plugin-vue': 5.0.0-beta.1(vite@5.0.10)(vue@3.4.3)
       '@vue/devtools-api': 6.5.1
-      '@vueuse/core': 10.6.1(vue@3.3.8)
-      '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
+      '@vueuse/core': 10.7.1(vue@3.4.3)
+      '@vueuse/integrations': 10.7.1(focus-trap@7.5.4)(vue@3.4.3)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
-      mrmime: 1.0.1
-      shikiji: 0.7.6
-      shikiji-transformers: 0.7.6
-      vite: 5.0.4(@types/node@20.10.2)(terser@5.24.0)
-      vue: 3.3.8
+      mrmime: 2.0.0
+      shikiji: 0.9.17
+      shikiji-transformers: 0.9.17
+      vite: 5.0.10(@types/node@20.10.2)(terser@5.24.0)
+      vue: 3.4.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -1484,22 +1131,7 @@ packages:
       - universal-cookie
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.8):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.3.8
-    dev: false
-
-  /vue-demi@0.14.6(vue@3.4.0-beta.3):
+  /vue-demi@0.14.6(vue@3.4.3):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -1511,43 +1143,20 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.0-beta.3
+      vue: 3.4.3
     dev: false
 
-  /vue@3.3.8:
-    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
+  /vue@3.4.3:
+    resolution: {integrity: sha512-GjN+culMAGv/mUbkIv8zMKItno8npcj5gWlXkSxf1SPTQf8eJ4A+YfHIvQFyL1IfuJcMl3soA7SmN1fRxbf/wA==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-sfc': 3.3.8
-      '@vue/runtime-dom': 3.3.8
-      '@vue/server-renderer': 3.3.8(vue@3.3.8)
-      '@vue/shared': 3.3.8
-    dev: false
-
-  /vue@3.4.0-beta.3:
-    resolution: {integrity: sha512-Y/JRbez2DVwJQc+dPD+spzbY3eyCKBGN31p5/IvkSaj9y7ZrWEYfSCFXPJOBC25ItKLU4iOnr2gWQoUY6GyTmA==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@vue/compiler-dom': 3.4.0-beta.3
-      '@vue/compiler-sfc': 3.4.0-beta.3
-      '@vue/runtime-dom': 3.4.0-beta.3
-      '@vue/server-renderer': 3.4.0-beta.3(vue@3.4.0-beta.3)
-      '@vue/shared': 3.4.0-beta.3
-    dev: false
-
-  /web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
-    dev: false
-
-  /zwitch@2.0.4:
-    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+      '@vue/compiler-dom': 3.4.3
+      '@vue/compiler-sfc': 3.4.3
+      '@vue/runtime-dom': 3.4.3
+      '@vue/server-renderer': 3.4.3(vue@3.4.3)
+      '@vue/shared': 3.4.3
     dev: false
diff --git a/src/api/application.md b/src/api/application.md
index ce7115dd..f509ce24 100644
--- a/src/api/application.md
+++ b/src/api/application.md
@@ -287,7 +287,7 @@
 
 ## app.runWithContext()<sup class="vt-badge" data-text="3.3+" /> {#app-runwithcontext}
 
-Execute a callback with the current app as injection context.
+현재 앱을 인젝션(injection) 컨텍스트로 사용하여 콜백을 실행합니다.
 
 - **Type**
 
@@ -299,7 +299,7 @@ Execute a callback with the current app as injection context.
 
 - **Details**
 
-  Expects a callback function and runs the callback immediately. During the synchronous call of the callback,  `inject()` calls are able to look up injections from the values provided by the current app, even when there is no current active component instance. The return value of the callback will also be returned.
+  콜백 함수를 기대하고 즉시 콜백을 실행합니다. 콜백의 동기 호출 중에 `inject()` 호출은 현재 활성 컴포넌트 인스턴스가 없는 경우에도 현재 앱에서 제공하는 값에서 주입(provide)을 조회할 수 있습니다. 콜백의 반환 값도 반환됩니다.
 
 - **Example**
 
@@ -390,6 +390,10 @@ console.log(app.config)
   - 커스텀 디렉티브 훅
   - 트랜지션 훅
 
+  :::tip
+  프로덕션에서는 3번째 인수(`info`)가 전체 정보 문자열 대신 축약된 코드로 제공됩니다. 코드와 문자열 매핑은 [프로덕션 오류 코드 참조](/error-reference/#runtime-errors)에서 확인할 수 있습니다.
+  :::
+
 - **예제**
 
   ```js
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index bea74593..eeaf1c3f 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -130,7 +130,7 @@ h(Transition, {
   </Transition>
   ```
 
-- **참고** [가이드 - `<Transition>`](/guide/built-ins/transition)
+- **참고** [가이드 - Transition](/guide/built-ins/transition)
 
 ## `<TransitionGroup>` {#transitiongroup}
 
diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md
index a0325f1c..9fb24570 100644
--- a/src/api/built-in-directives.md
+++ b/src/api/built-in-directives.md
@@ -8,10 +8,7 @@
 
 - **세부 사항**:
 
-  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로,
-  엘리먼트 내부의 기존 컨텐츠를 덮어씁니다.
-  `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우,
-  [이중 중괄호](/guide/essentials/template-syntax#text-interpolation)를 사용해야 합니다.
+  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로, 엘리먼트 내부의 기존 컨텐츠를 덮어씁니다. `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우, [이중 중괄호](/guide/essentials/template-syntax#text-interpolation)를 사용해야 합니다.
 
 - **예제**
 
@@ -31,20 +28,13 @@
 
 - **세부 사항**:
 
-  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다.
-  `v-html`을 사용하여 템플릿을 작성하려고 한다면,
-  이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.
+  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다. `v-html`을 사용하여 템플릿을 작성하려고 한다면, 이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.
 
   ::: warning 보안 참고 사항
-  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다.
-  신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고,
-  사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.
+  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다. 신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고, 사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.
   :::
 
-  [싱글 파일 컴포넌트(SFC)](/guide/scaling-up/sfc)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다.
-  왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다.
-  범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우,
-  [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.
+  [싱글 파일 컴포넌트(SFC)](/guide/scaling-up/sfc)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다. 왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다. 범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우, [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.
 
 - **예제**
 
@@ -62,9 +52,7 @@
 
 - **세부 사항**:
 
-  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하며,
-  엘리먼트가 표시될 때 초기 `display` 값을 설정하려고 시도합니다.
-  또한 조건이 변경될 때 전환을 트리거합니다.
+  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하며, 엘리먼트가 표시될 때 초기 `display` 값을 설정하려고 시도합니다. 또한 조건이 변경될 때 전환을 트리거합니다.
 
 - **참고**: [조건부 렌더링 - v-show](/guide/essentials/conditional#v-show)
 
@@ -76,18 +64,13 @@
 
 - **세부 사항**:
 
-  `v-if` 엘리먼트가 토글되면, 엘리먼트와 여기에 포함된 디렉티브/컴포넌트가 파괴되고 재구성됩니다.
-  초기 조건 값이 falsy이면,
-  내부 컨텐츠가 전혀 렌더링되지 않습니다.
+  `v-if` 엘리먼트가 토글되면, 엘리먼트와 여기에 포함된 디렉티브/컴포넌트가 파괴되고 재구성됩니다. 초기 조건 값이 falsy이면, 내부 컨텐츠가 전혀 렌더링되지 않습니다.
 
   텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내기 위해 `<template>`에 사용할 수도 있습니다.
 
-  이 디렉티브는 조건이 변경될 때,
-  [트랜지션](/guide/built-ins/transition)을 트리거합니다.
+  이 디렉티브는 조건이 변경될 때, [트랜지션](/guide/built-ins/transition)을 트리거합니다.
 
-  `v-for`와 함께 사용하는 경우, `v-if`의 우선 순위가 높습니다.
-  하나의 엘리먼트에 이 두 디렉티브을 함께 사용하는 것은 권장되지 않습니다.
-  자세한 내용은 [리스트 렌더링](/guide/essentials/list#v-for-with-v-if)을 참고하세요.
+  `v-for`와 함께 사용하는 경우, `v-if`의 우선 순위가 높습니다. 하나의 엘리먼트에 이 두 디렉티브을 함께 사용하는 것은 권장되지 않습니다. 자세한 내용은 [리스트 렌더링](/guide/essentials/list#v-for-with-v-if)을 참고하세요.
 
 - **참고**: [조건부 렌더링 - v-if](/guide/essentials/conditional#v-if)
 
@@ -118,8 +101,7 @@
 
 ## v-else-if {#v-else-if}
 
-`v-if`에 대한 `else if` 블록을 나타냅니다.
-`v-else-if`는 계속 이어서 사용할 수 있습니다.
+`v-if`에 대한 `else if` 블록을 나타냅니다. `v-else-if`는 계속 이어서 사용할 수 있습니다.
 
 - **요구되는 값**: `any`
 
@@ -156,8 +138,7 @@
 
 - **세부 사항**:
 
-  디렉티브는 반복되는 과정의 현재 값에 별칭을 제공하기 위해,
-  특수 문법인 `alias in expression`(표현식 내 별칭)을 사용해야 합니다:
+  디렉티브는 반복되는 과정의 현재 값에 별칭을 제공하기 위해, 특수 문법인 `alias in expression`(표현식 내 별칭)을 사용해야 합니다:
 
   ```vue-html
   <div v-for="item in items">
@@ -173,9 +154,7 @@
   <div v-for="(value, name, index) in object"></div>
   ```
 
-  `v-for`의 기본 동작은 엘리먼트를 이동하지 않고 제자리에 패치(patch)하려고 합니다.
-  강제로 엘리먼트를 재정렬하려면,
-  특수 속성 `key`를 사용하여 순서 지정을 위한 힌트를 제공해야 합니다:
+  `v-for`의 기본 동작은 엘리먼트를 이동하지 않고 제자리에 패치(patch)하려고 합니다. 강제로 엘리먼트를 재정렬하려면, 특수 속성 `key`를 사용하여 순서 지정을 위한 힌트를 제공해야 합니다:
 
   ```vue-html
   <div v-for="item in items" :key="item.id">
@@ -213,21 +192,13 @@
 
 - **세부 사항**:
 
-  이벤트 타입은 인자로 표시됩니다.
-  표현식은 메서드 이름 또는 인라인 명령문이거나,
-  수식어가 있는 경우 생략될 수 있습니다.
+  이벤트 타입은 인자로 표시됩니다. 표현식은 메서드 이름 또는 인라인 명령문이거나, 수식어가 있는 경우 생략될 수 있습니다.
 
-  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다.
-  커스텀 엘리먼트 컴포넌트에서 사용되는 경우,
-  해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.
+  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다. 커스텀 엘리먼트 컴포넌트에서 사용되는 경우, 해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.
 
-  네이티브 DOM 이벤트를 수신할 때,
-  메서드의 인자는 네이티브 이벤트 뿐 입니다.
-  인라인 명령문을 사용하는 경우,
-  명령문은 특수 속성인 `$event`로 `v-on:click="handle('ok', $event)"`와 같이 이벤트 객체에 접근할 수 있습니다.
+  네이티브 DOM 이벤트를 수신할 때, 메서드의 인자는 네이티브 이벤트 뿐 입니다. 인라인 명령문을 사용하는 경우, 명령문은 특수 속성인 `$event`로 `v-on:click="handle('ok', $event)"`와 같이 이벤트 객체에 접근할 수 있습니다.
 
-  `v-on`은 인자 없이 `이벤트(키): 리스너(값)` 형식의 객체 바인딩도 지원합니다.
-  수식어는 객체 문법을 사용할 때는 지원하지 않습니다.
+  `v-on`은 인자 없이 `이벤트(키): 리스너(값)` 형식의 객체 바인딩도 지원합니다. 수식어는 객체 문법을 사용할 때는 지원하지 않습니다.
 
 - **예제**
 
@@ -286,7 +257,9 @@
 
 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.
 
-- **단축 문법:** `:` 또는 `.`(`.prop` 수식어를 사용할 때)
+- **단축 문법:**
+  - `:` 또는 `.`(`.prop` 수식어를 사용할 때)
+  - 속성(attribute)과 바인딩된 값이 같은 이름을 가질 경우 값을 생략할 수 있음 <sup class="vt-badge">3.4+</sup>
 
 - **요구되는 값**: `any (인자 있이) | Object (인자 없이)`
 
@@ -300,24 +273,13 @@
 
 - **사용법**:
 
-  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우,
-  `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다.
-  자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.
+  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우, `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다. 자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.
 
-  엘리먼트에 바인딩을 설정할 때,
-  Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여,
-  엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다.
-  프로퍼티가 정의되면,
-  Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다.
-  이것은 대부분의 경우 작동하지만,
-  `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다.
-  이것은 특히 [커스텀 엘리먼트로 작업](/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.
+  엘리먼트에 바인딩을 설정할 때, Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여, 엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다. 프로퍼티가 정의되면, Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다. 이것은 대부분의 경우 작동하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다. 이것은 특히 [커스텀 엘리먼트로 작업](/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.
 
   컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.
 
-  인자 없이 사용하는 경우,
-  속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다.
-  이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.
+  인자 없이 사용하는 경우, 속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다. 이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.
 
 - **예제**
 
@@ -331,6 +293,9 @@
   <!-- 단축 문법 -->
   <img :src="imageSrc" />
 
+  <!-- 같은 이름 생략 가능 (3.4+), 오른쪽과 같음 :src="src" -->
+  <img :src />
+  
   <!-- 단축 문법과 동적 속성명 -->
   <button :[key]="value"></button>
 
@@ -354,6 +319,9 @@
 
   <!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->
   <MyComponent v-bind="$props" />
+  
+  <!-- XLink -->
+  <svg><a :xlink:special="foo"></a></svg>
   ```
 
   `.prop` 수식어에는 전용 단축 문법 `.`가 있습니다:
@@ -365,9 +333,7 @@
   <div .someProperty="someObject"></div>
   ```
 
-  `.camel` 수식어는 DOM 내 템플릿을 사용할 때,
-  `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다.
-  예를 들면, SVG `viewBox` 속성:
+  `.camel` 수식어는 DOM 내 템플릿을 사용할 때, `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다. 예를 들면, SVG `viewBox` 속성:
 
   ```vue-html
   <svg :view-box.camel="viewBox"></svg>
@@ -462,8 +428,7 @@
 
 - **세부 사항**:
 
-  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다.
-  가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.
+  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다. 가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.
 
 - **예제**
 
@@ -473,15 +438,13 @@
 
 ## v-once {#v-once}
 
-엘리먼트와 컴포넌트를 한 번만 렌더링하고,
-향후 업데이트를 생략합니다.
+엘리먼트와 컴포넌트를 한 번만 렌더링하고, 향후 업데이트를 생략합니다.
 
 - **표현식을 허용하지 않습니다**.
 
 - **세부 사항**:
 
-  이후 다시 렌더링할 때 엘리먼트/컴포넌트 및 모든 자식들은 정적 컨텐츠로 처리되어 생략됩니다.
-  이것은 업데이트 성능을 최적화하는 데 사용할 수 있습니다.
+  이후 다시 렌더링할 때 엘리먼트/컴포넌트 및 모든 자식들은 정적 컨텐츠로 처리되어 생략됩니다. 이것은 업데이트 성능을 최적화하는 데 사용할 수 있습니다.
 
   ```vue-html
   <!-- 단일 엘리먼트 -->
@@ -511,11 +474,7 @@
 
 - **세부 사항**:
 
-  템플릿의 하위 트리를 메모합니다.
-  엘리먼트와 컴포넌트 모두에 사용할 수 있습니다.
-  디렉티브는 메모이제이션을 위해 비교할 의존성 값의 고정된 길이의 배열을 요구합니다.
-  배열의 모든 값이 마지막 렌더링과 같으면 전체 하위 트리에 대한 업데이트를 생략합니다.
-  예를 들어:
+  템플릿의 하위 트리를 메모합니다. 엘리먼트와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션을 위해 비교할 의존성 값의 고정된 길이의 배열을 요구합니다. 배열의 모든 값이 마지막 렌더링과 같으면 전체 하위 트리에 대한 업데이트를 생략합니다. 예를 들어:
 
   ```vue-html
   <div v-memo="[valueA, valueB]">
@@ -523,19 +482,13 @@
   </div>
   ```
 
-  컴포넌트가 다시 렌더링될 때 `valueA`와 `valueB`가 모두 동일하게 유지되면,
-  이 `<div>`와 하위 항목에 대한 모든 업데이트를 생략합니다.
-  사실, 하위 트리의 메모된 복사본을 재사용할 수 있기 때문에 가상 DOM VNode 생성도 생략합니다.
+  컴포넌트가 다시 렌더링될 때 `valueA`와 `valueB`가 모두 동일하게 유지되면, 이 `<div>`와 하위 항목에 대한 모든 업데이트를 생략합니다. 사실, 하위 트리의 메모된 복사본을 재사용할 수 있기 때문에 가상 DOM VNode 생성도 생략합니다.
 
-  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다.
-  그렇지 않으면 실제로 적용되어야 하는 업데이트를 건너뛸 수 있습니다.
-  빈 의존성 배열(`v-memo="[]"`)이 있는 `v-memo`는 기능적으로 `v-once`와 동일합니다.
+  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다. 그렇지 않으면 실제로 적용되어야 하는 업데이트를 건너뛸 수 있습니다. 빈 의존성 배열(`v-memo="[]"`)이 있는 `v-memo`는 기능적으로 `v-once`와 동일합니다.
 
   **`v-for`과 함께 사용하기**
 
-  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되는 것으로,
-  일반적으로 거의 필요하지 않습니다.
-  이것이 도움이 될 수 있는 가장 일반적인 경우는 큰 리스트(`length > 1000`)를 `v-for`로 렌더링할 때입니다:
+  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되는 것으로, 일반적으로 거의 필요하지 않습니다. 이것이 도움이 될 수 있는 가장 일반적인 경우는 큰 리스트(`length > 1000`)를 `v-for`로 렌더링할 때입니다:
 
   ```vue-html
   <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
@@ -544,22 +497,13 @@
   </div>
   ```
 
-  컴포넌트의 `selected` 상태가 변경되면,
-  대부분의 아이템이 정확히 동일하게 유지되더라도 많은 양의 VNode가 생성됩니다.
-  여기서 `v-memo` 사용법은 본질적으로 "아이템의 선택여부가 바뀐 경우에만, 이 아이템을 업데이트하십시오"입니다.
-  이렇게 하면 영향을 받지 않는 모든 아이템이 이전 VNode를 재사용하고,
-  차이점 비교를 생략할 수 있습니다.
-  Vue는 아이템의 `:key`로 자동 추론하므로,
-  메모 의존성 배열에 `item.id`를 포함할 필요가 없습니다.
+  컴포넌트의 `selected` 상태가 변경되면, 대부분의 아이템이 정확히 동일하게 유지되더라도 많은 양의 VNode가 생성됩니다. 여기서 `v-memo` 사용법은 본질적으로 "아이템의 선택여부가 바뀐 경우에만, 이 아이템을 업데이트하십시오"입니다. 이렇게 하면 영향을 받지 않는 모든 아이템이 이전 VNode를 재사용하고, 차이점 비교를 생략할 수 있습니다. Vue는 아이템의 `:key`로 자동 추론하므로, 메모 의존성 배열에 `item.id`를 포함할 필요가 없습니다.
 
   :::warning
-  `v-for`와 함께 `v-memo`를 사용할 때,
-  동일한 엘리먼트에 사용되는지 확인이 필요합니다.
-  **`v-memo`는 `v-for` 내에서 작동하지 않습니다**.
+  `v-for`와 함께 `v-memo`를 사용할 때, 동일한 엘리먼트에 사용되는지 확인이 필요합니다. **`v-memo`는 `v-for` 내에서 작동하지 않습니다**.
   :::
 
-  `v-memo`는 자식 컴포넌트 업데이트 확인이 최적화되지 않은 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하기 위해 컴포넌트에 사용할 수도 있습니다.
-  그러나 필요한 업데이트를 건너뛰지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.
+  `v-memo`는 자식 컴포넌트 업데이트 확인이 최적화되지 않은 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하기 위해 컴포넌트에 사용할 수도 있습니다. 그러나 필요한 업데이트를 건너뛰지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.
 
 - **참고**:
   - [v-once](#v-once)
@@ -574,13 +518,9 @@
 
   **이 디렉티브는 빌드 과정이 없는 설정에서만 필요합니다**.
 
-  DOM 내 템플릿을 사용할 때,
-  "컴파일되지 않은 템플릿이 순간 보이는 현상"이 있을 수 있습니다.
-  이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.
+  DOM 내 템플릿을 사용할 때, "컴파일되지 않은 템플릿이 순간 보이는 현상"이 있을 수 있습니다. 이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.
 
-  `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.
-  `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여,
-  컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.
+  `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다. `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여, 컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.
 
 - **예제**
 
diff --git a/src/api/compile-time-flags.md b/src/api/compile-time-flags.md
new file mode 100644
index 00000000..4afd2151
--- /dev/null
+++ b/src/api/compile-time-flags.md
@@ -0,0 +1,108 @@
+---
+outline: deep
+---
+
+# 컴파일 타임 플래그(Compile-Time Flags) {#compile-time-flags}
+
+:::tip
+Compile-time 플래그는 Vue의 `esm-bundler` 빌드를 사용할 때만 적용됩니다 (즉, `vue/dist/vue.esm-bundler.js`).
+:::
+
+빌드 단계에서 Vue를 사용할 때, 특정 기능을 활성화/비활성화하기 위해 다양한 컴파일 타임 플래그를 설정할 수 있습니다. 컴파일 타임 플래그를 사용하는 이점은 이 방식으로 비활성화된 기능들이 트리 쉐이킹을 통해 최종 번들에서 제거될 수 있다는 것입니다.
+
+이러한 플래그들이 명시적으로 설정되지 않더라도 Vue는 작동합니다. 그러나 가능한 경우 관련 기능이 제대로 제거될 수 있도록 항상 이들을 설정하는 것이 권장됩니다.
+
+빌드 도구에 따라 이들을 어떻게 설정하는지에 대해서는 [설정 가이드](#configuration-guides)를 참조하세요.
+
+## `__VUE_OPTIONS_API__` {#VUE_OPTIONS_API}
+
+- **기본값:** `true`
+
+  옵션 API 지원 활성화 / 비활성화. 이를 비활성화하면 번들 크기가 줄어들지만, 옵션 API에 의존하는 제3자 라이브러리와의 호환성에 영향을 미칠 수 있습니다.
+
+## `__VUE_PROD_DEVTOOLS__` {#VUE_PROD_DEVTOOLS}
+
+- **기본값:** `false`
+
+  프로덕션 빌드에서 devtools 지원 활성화 / 비활성화. 이로 인해 번들에 더 많은 코드가 포함될 수 있으므로, 디버깅 목적으로만 이를 활성화하는 것이 권장됩니다.
+
+## `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` <sup class="vt-badge" data-text="3.4+" /> {#VUE_PROD_HYDRATATION_MISMATCH_DETAILS}
+
+- **기본값:** `false`
+
+  프로덕션 빌드에서 수화 불일치에 대한 자세한 경고 활성화/비활성화. 이로 인해 번들에 더 많은 코드가 포함될 수 있으므로, 디버깅 목적으로만 이를 활성화하는 것이 권장됩니다.
+
+## 설정 가이드 {#configuration-guides}
+
+### Vite {#vite}
+
+`@vitejs/plugin-vue`는 이러한 플래그들에 대해 자동으로 기본값을 제공합니다. 기본값을 변경하려면 Vite의 [`define` 구성 옵션](https://vitejs.dev/config/shared-options.html#define)을 사용하세요:
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  define: {
+    // 프로덕션 빌드에서 수화 불일치 세부사항 활성화
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
+  }
+})
+```
+
+### vue-cli {#vue-cli}
+
+`@vue/cli-service`는 이러한 플래그들 중 일부에 대해 자동으로 기본값을 제공합니다. 값을 설정/변경하려면:
+
+```js
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugin('define').tap((definitions) => {
+      Object.assign(definitions[0], {
+        __VUE_OPTIONS_API__: 'true',
+        __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+      })
+      return definitions
+    })
+  }
+}
+```
+
+### webpack {#webpack}
+
+플래그는 webpack의 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)을 사용하여 정의해야 합니다:
+
+```js
+// webpack.config.js
+module.exports = {
+  // ...
+  plugins: [
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+    })
+  ]
+}
+```
+
+### Rollup {#rollup}
+
+플래그는 [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)를 사용하여 정의해야 합니다:
+
+```js
+// rollup.config.js
+import replace from '@rollup/plugin-replace'
+
+export default {
+  plugins: [
+    replace({
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+    })
+  ]
+}
+```
diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md
index 63cc1986..ab80450e 100644
--- a/src/api/composition-api-lifecycle.md
+++ b/src/api/composition-api-lifecycle.md
@@ -1,8 +1,7 @@
 # 컴포지션 API: 생명주기 훅 {#composition-api-lifecycle-hooks}
 
 :::info 사용 참고 사항
-이 페이지에 나열된 모든 API는 컴포넌트의 `setup()` 단계에서 동기적으로 호출되어야 합니다.
-자세한 내용은 [가이드 - 생명주기 훅](/guide/essentials/lifecycle)을 참고하세요.
+이 페이지에 나열된 모든 API는 컴포넌트의 `setup()` 단계에서 동기적으로 호출되어야 합니다. 자세한 내용은 [가이드 - 생명주기 훅](/guide/essentials/lifecycle)을 참고하세요.
 :::
 
 ## onMounted() {#onmounted}
@@ -21,11 +20,9 @@
 
   - 동기식 자식 컴포넌트가 모두 마운트됨(`<Suspense>` 트리 내부의 비동기 컴포넌트 또는 컴포넌트는 포함하지 않음).
 
-  - 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입됨.
-    앱의 루트 컨테이너가 Document 내에 있는 경우에만 컴포넌트의 DOM 트리가 문서 내에 있음을 보장함.
+  - 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입됨. 앱의 루트 컨테이너가 Document 내에 있는 경우에만 컴포넌트의 DOM 트리가 문서 내에 있음을 보장함.
 
-  일반적으로 이 훅은 컴포넌트의 렌더링된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나,
-  [서버에서 렌더링 된 앱](/guide/scaling-up/ssr)에서 DOM과 관련 코드를 클라이언트에서만 실행하도록 제한하는 데 사용됩니다.
+  일반적으로 이 훅은 컴포넌트의 렌더링된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나, [서버에서 렌더링 된 앱](/guide/scaling-up/ssr)에서 DOM과 관련 코드를 클라이언트에서만 실행하도록 제한하는 데 사용됩니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -68,8 +65,7 @@
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
   :::warning 주의
-  updated 훅에서 컴포넌트 상태를 변경하면 안되는데,
-  무한 업데이트 루프가 발생할 수 있기 때문입니다!
+  updated 훅에서 컴포넌트 상태를 변경하면 안되는데, 무한 업데이트 루프가 발생할 수 있기 때문입니다!
   :::
 
 - **예제**
@@ -144,8 +140,7 @@
 
 - **세부 사항**:
 
-  이 훅은 컴포넌트의 반응형 상태 설정이 완료된 후 호출되지만, 아직 DOM 노드가 생성되지 않은 단계입니다.
-  첫 DOM 렌더 이펙트를 실행하려고 합니다.
+  이 훅은 컴포넌트의 반응형 상태 설정이 완료된 후 호출되지만, 아직 DOM 노드가 생성되지 않은 단계입니다. 첫 DOM 렌더 이펙트를 실행하려고 합니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -161,8 +156,7 @@
 
 - **세부 사항**:
 
-  이 훅은 Vue가 DOM을 업데이트하기 전에 DOM 상태에 접근하는 데 사용할 수 있습니다.
-  이 훅 내부에서 컴포넌트 상태를 수정하는 것도 안전합니다.
+  이 훅은 Vue가 DOM을 업데이트하기 전에 DOM 상태에 접근하는 데 사용할 수 있습니다. 이 훅 내부에서 컴포넌트 상태를 수정하는 것도 안전합니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -212,27 +206,23 @@
 
   훅은 '에러', '에러를 트리거한 컴포넌트 인스턴스', '에러 소스 유형을 지정하는 정보 문자열' 세 개의 인자를 받습니다.
 
-  `errorCaptured` 훅에서 컴포넌트 상태를 수정하여 사용자에게 에러 상태를 표시할 수 있습니다.
-  그러나 에러가 난 컴포넌트에서 에러 상태를 렌더링해서는 안됩니다.
-  그렇지 않으면 컴포넌트가 무한 렌더링 루프에 빠집니다.
+  :::tip
+  프로덕션에서는 3번째 인수(`info`)가 전체 정보 문자열 대신 축약된 코드로 제공됩니다. 코드와 문자열 매핑은 [프로덕션 오류 코드 참조](/error-reference/#runtime-errors)에서 확인할 수 있습니다.
+  :::
+
+  `errorCaptured` 훅에서 컴포넌트 상태를 수정하여 사용자에게 에러 상태를 표시할 수 있습니다. 그러나 에러가 난 컴포넌트에서 에러 상태를 렌더링해서는 안됩니다. 그렇지 않으면 컴포넌트가 무한 렌더링 루프에 빠집니다.
 
-  훅은 `false`를 반환하여 에러가 더 이상 전파되지 않도록 할 수 있습니다.
-  아래의 에러 전파 세부 사항을 참조하십시오.
+  훅은 `false`를 반환하여 에러가 더 이상 전파되지 않도록 할 수 있습니다. 아래의 에러 전파 세부 사항을 참조하십시오.
 
   **에러 전파 규칙**
 
-  - 기본적으로 모든 에러는 단계적으로 전파되며,
-    [`app.config.errorHandler`](/api/application.html#app-config-errorhandler)가 정의된 경우,
-    최종적으로 이곳으로 전파되므로 한 곳에서 서비스 분석 및 보고 작업을 할 수 있습니다.
+  - 기본적으로 모든 에러는 단계적으로 전파되며, [`app.config.errorHandler`](/api/application.html#app-config-errorhandler)가 정의된 경우, 최종적으로 이곳으로 전파되므로 한 곳에서 서비스 분석 및 보고 작업을 할 수 있습니다.
 
   - 컴포넌트의 상속 체인 또는 부모 체인에 여러 개의 `errorCaptured` 후크가 존재하는 경우, 모든 후크는 동일한 오류에 대해 아래에서 위로 순서대로 호출됩니다. 이는 네이티브 DOM 이벤트의 버블링 메커니즘과 유사합니다.
 
-  - `errorCaptured` 훅 자체에서 에러가 발생하면,
-    이 에러와 원래 캡처된 에러가 모두 `app.config.errorHandler`로 전송됩니다.
+  - `errorCaptured` 훅 자체에서 에러가 발생하면, 이 에러와 원래 캡처된 에러가 모두 `app.config.errorHandler`로 전송됩니다.
 
-  - `errorCaptured` 훅에서 `false`를 반환하면 더 이상 에러가 전파되지 않습니다.
-    이것은 본질적으로 "이 에러는 처리되었으므로 무시되어야 합니다."를 의미합니다.
-    따라서 이후 단계적으로 전파되어야 할 `errorCaptured` 훅 또는 `app.config.errorHandler`에 이 에러로 인한 호출 동작은 없습니다.
+  - `errorCaptured` 훅에서 `false`를 반환하면 더 이상 에러가 전파되지 않습니다. 이것은 본질적으로 "이 에러는 처리되었으므로 무시되어야 합니다."를 의미합니다. 따라서 이후 단계적으로 전파되어야 할 `errorCaptured` 훅 또는 `app.config.errorHandler`에 이 에러로 인한 호출 동작은 없습니다.
 
 ## onRenderTracked() <sup class="vt-badge dev-only" /> {#onrendertracked}
 
@@ -323,11 +313,9 @@
 
 - **세부 사항**:
 
-  콜백이 Promise를 반환하면,
-  서버 렌더러는 컴포넌트를 렌더링하기 전 Promise가 해결될 때까지 기다립니다.
+  콜백이 Promise를 반환하면, 서버 렌더러는 컴포넌트를 렌더링하기 전 Promise가 해결될 때까지 기다립니다.
 
-  이 훅은 SSR(서버 사이드 렌더링) 중에만 호출되므로,
-  서버 전용 데이터 가져오기를 실행하는 데 사용할 수 있습니다.
+  이 훅은 SSR(서버 사이드 렌더링) 중에만 호출되므로, 서버 전용 데이터 가져오기를 실행하는 데 사용할 수 있습니다.
 
 - **예제**
 
diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md
index 77339340..72f55a2b 100644
--- a/src/api/options-lifecycle.md
+++ b/src/api/options-lifecycle.md
@@ -36,8 +36,7 @@
 
 - **세부 사항**:
 
-  반응형 데이터, 계산된 속성, 메서드 및 감시자가 설정된 후, 이 훅이 호출되면 됩니다.
-  그러나 마운팅 단계가 시작되지 않았으므로, `$el` 속성을 아직 사용할 수 없습니다.
+  반응형 데이터, 계산된 속성, 메서드 및 감시자가 설정된 후, 이 훅이 호출되면 됩니다. 그러나 마운팅 단계가 시작되지 않았으므로, `$el` 속성을 아직 사용할 수 없습니다.
 
 ## beforeMount {#beforemount}
 
@@ -53,9 +52,7 @@
 
 - **세부 사항**:
 
-  반응형 상태 설정이 완료되면 이 훅이 호출되지만,
-  아직 DOM 노드가 생성되지는 않았으며,
-  첫 DOM 렌더 이펙트를 실행하려고 합니다.
+  반응형 상태 설정이 완료되면 이 훅이 호출되지만, 아직 DOM 노드가 생성되지는 않았으며, 첫 DOM 렌더 이펙트를 실행하려고 합니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -77,11 +74,9 @@
 
   - 동기적으로 선언된 모든 자식 컴포넌트가 마운트됨(비동기 컴포넌트 또는 `<Suspense>` 트리 내부 컴포넌트는 포함하지 않음).
 
-  - 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입된 경우.
-    앱의 루트 컨테이너가 문서 내에 있고, 컴포넌트의 DOM 트리도 문서 내 있는 경우에만 보장됨.
+  - 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입된 경우. 앱의 루트 컨테이너가 문서 내에 있고, 컴포넌트의 DOM 트리도 문서 내 있는 경우에만 보장됨.
 
-  이 훅은 일반적으로 컴포넌트의 렌더링된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나,
-  [서버에서 렌더링된 앱](/guide/scaling-up/ssr)의 DOM 관련 코드를 클라이언트에서만 조작하도록 제한하는 데 사용됩니다.
+  이 훅은 일반적으로 컴포넌트의 렌더링된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나, [서버에서 렌더링된 앱](/guide/scaling-up/ssr)의 DOM 관련 코드를 클라이언트에서만 조작하도록 제한하는 데 사용됩니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -99,9 +94,7 @@
 
 - **세부 사항**:
 
-  이 훅은 Vue가 DOM을 업데이트하기 전,
-  DOM 상태에 접근하는 데 사용할 수 있습니다.
-  이 훅 내부에서 컴포넌트 상태를 수정하는 것도 안전합니다.
+  이 훅은 Vue가 DOM을 업데이트하기 전, DOM 상태에 접근하는 데 사용할 수 있습니다. 이 훅 내부에서 컴포넌트 상태를 수정하는 것도 안전합니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -121,10 +114,7 @@
 
   부모 컴포넌트의 `updated` 훅은 자식 컴포넌트의 `updated` 훅 이후에 호출됩니다.
 
-  이 훅은 반응형 상태 변경에 의한 컴포넌트 DOM 트리 업데이트 후 호출됩니다.
-  한 코드블럭 내에서 특정 상태 변경 후,
-  이어서 업데이트된 DOM에 접근해야 하는 로직의 경우,
-  [nextTick()](/api/general#nexttick)을 사용해야 합니다.
+  이 훅은 반응형 상태 변경에 의한 컴포넌트 DOM 트리 업데이트 후 호출됩니다. 한 코드블럭 내에서 특정 상태 변경 후, 이어서 업데이트된 DOM에 접근해야 하는 로직의 경우, [nextTick()](/api/general#nexttick)을 사용해야 합니다.
 
   **이 훅은 서버 사이드 렌더링 중에 호출되지 않습니다**.
 
@@ -205,27 +195,23 @@
 
   훅은 '에러', '에러를 트리거한 컴포넌트 인스턴스', '에러 소스 유형을 지정하는 정보 문자열' 세 개의 인자를 받습니다.
 
-  `errorCaptured` 훅에서 컴포넌트 상태를 수정하여 사용자에게 에러 상태를 표시할 수 있습니다.
-  그러나 에러가 난 컴포넌트에서 에러 상태를 렌더링해서는 안됩니다.
-  그렇지 않으면 컴포넌트가 무한 렌더링 루프에 빠집니다.
+  :::tip
+  프로덕션에서는 3번째 인수(`info`)가 전체 정보 문자열 대신 축약된 코드로 제공됩니다. 코드와 문자열 매핑은 [프로덕션 오류 코드 참조](/error-reference/#runtime-errors)에서 확인할 수 있습니다.
+  :::
+
+  `errorCaptured` 훅에서 컴포넌트 상태를 수정하여 사용자에게 에러 상태를 표시할 수 있습니다. 그러나 에러가 난 컴포넌트에서 에러 상태를 렌더링해서는 안됩니다. 그렇지 않으면 컴포넌트가 무한 렌더링 루프에 빠집니다.
 
-  훅은 `false`를 반환하여 에러가 더 이상 전파되지 않도록 할 수 있습니다.
-  아래의 에러 전파 세부 사항을 참조하십시오.
+  훅은 `false`를 반환하여 에러가 더 이상 전파되지 않도록 할 수 있습니다. 아래의 에러 전파 세부 사항을 참조하십시오.
 
   **에러 전파 규칙**
 
-  - 기본적으로 모든 에러는 단계적으로 전파되며,
-    [`app.config.errorHandler`](/api/application#app-config-errorhandler)가 정의된 경우,
-    최종적으로 이곳으로 전파되므로 한 곳에서 서비스 분석 및 보고 작업을 할 수 있습니다.
+  - 기본적으로 모든 에러는 단계적으로 전파되며, [`app.config.errorHandler`](/api/application#app-config-errorhandler)가 정의된 경우, 최종적으로 이곳으로 전파되므로 한 곳에서 서비스 분석 및 보고 작업을 할 수 있습니다.
 
   - 컴포넌트의 상속 체인 또는 부모 체인에 여러 개의 `errorCaptured` 후크가 존재하는 경우, 모든 후크는 동일한 오류에 대해 아래에서 위로 순서대로 호출됩니다. 이는 네이티브 DOM 이벤트의 버블링 메커니즘과 유사합니다.
 
-  - `errorCaptured` 훅 자체에서 에러가 발생하면,
-    이 에러와 원래 캡처된 에러가 모두 `app.config.errorHandler`로 전송됩니다.
+  - `errorCaptured` 훅 자체에서 에러가 발생하면, 이 에러와 원래 캡처된 에러가 모두 `app.config.errorHandler`로 전송됩니다.
 
-  - `errorCaptured` 훅에서 `false`를 반환하면 더 이상 에러가 전파되지 않습니다.
-    이것은 본질적으로 "이 에러는 처리되었으므로 무시되어야 합니다."를 의미합니다.
-    따라서 이후 단계적으로 전파되어야 할 `errorCaptured` 훅 또는 `app.config.errorHandler`에 이 에러로 인한 호출 동작은 없습니다.
+  - `errorCaptured` 훅에서 `false`를 반환하면 더 이상 에러가 전파되지 않습니다. 이것은 본질적으로 "이 에러는 처리되었으므로 무시되어야 합니다."를 의미합니다. 따라서 이후 단계적으로 전파되어야 할 `errorCaptured` 훅 또는 `app.config.errorHandler`에 이 에러로 인한 호출 동작은 없습니다.
 
 ## renderTracked <sup class="vt-badge dev-only" /> {#rendertracked}
 
@@ -323,11 +309,9 @@
 
 - **세부 사항**:
 
-  훅이 Promise를 반환하면,
-  서버 렌더러는 컴포넌트를 렌더링하기 전 Promise가 해결될 때까지 기다립니다.
+  훅이 Promise를 반환하면, 서버 렌더러는 컴포넌트를 렌더링하기 전 Promise가 해결될 때까지 기다립니다.
 
-  이 훅은 SSR(서버 사이드 렌더링) 중에만 호출되므로,
-  서버 전용 데이터 가져오기를 실행하는 데 사용할 수 있습니다.
+  이 훅은 SSR(서버 사이드 렌더링) 중에만 호출되므로, 서버 전용 데이터 가져오기를 실행하는 데 사용할 수 있습니다.
 
 - **예제**
 
diff --git a/src/api/options-misc.md b/src/api/options-misc.md
index fa076d95..e3ad7d2c 100644
--- a/src/api/options-misc.md
+++ b/src/api/options-misc.md
@@ -99,27 +99,6 @@
   </template>
   ```
 
-  3.3부터는 `<script setup>`에서 `defineOptions`를 직접 사용할 수도 있습니다:
-
-  ```vue
-  <script setup>
-  defineProps(['label', 'value'])
-  defineEmits(['input'])
-  defineOptions({ inheritAttrs: false })
-  </script>
-
-  <template>
-    <label>
-      {{ label }}
-      <input
-        v-bind="$attrs"
-        v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)"
-      />
-    </label>
-  </template>
-  ```
-
   </div>
 
 - **참고** [전달 속성](/guide/components/attrs)
@@ -187,6 +166,4 @@
   <input v-focus>
   ```
 
-  컴포넌트 인스턴스에서 사용 가능하도록 지시자를 등록하는 해시입니다.
-
 - **참고** [사용자 정의 지시자](/guide/reusability/custom-directives)
diff --git a/src/api/options-state.md b/src/api/options-state.md
index 0b49b191..f995293c 100644
--- a/src/api/options-state.md
+++ b/src/api/options-state.md
@@ -17,21 +17,13 @@
 
 - **세부 사항**:
 
-  이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다.
-  인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다.
-  컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프락시하므로 `this.$data.a`는 `this.a`와 동일합니다.
+  이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다. 인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다. 컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프락시하므로 `this.$data.a`는 `this.a`와 동일합니다.
 
-  모든 최상위 데이터 속성은 반환된 데이터 객체에 포함되어야 합니다.
-  `this.$data`에 새 속성을 추가하는 것이 가능하지만 **권장되지는 않습니다**.
-  원하는 속성 값을 아직 사용할 수 없는 경우,
-  `undefined` 또는 `null`과 같은 빈 값을 사용하여 Vue가 속성이 존재함을 알 수 있도록 해야 합니다.
+  모든 최상위 데이터 속성은 반환된 데이터 객체에 포함되어야 합니다. `this.$data`에 새 속성을 추가하는 것이 가능하지만 **권장되지는 않습니다**. 원하는 속성 값을 아직 사용할 수 없는 경우, `undefined` 또는 `null`과 같은 빈 값을 사용하여 Vue가 속성이 존재함을 알 수 있도록 해야 합니다.
 
-  `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로,
-  컴포넌트 인스턴스에서 **프락시되지 않습니다**.
-  이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다.
+  `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로, 컴포넌트 인스턴스에서 **프락시되지 않습니다**. 이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다.
 
-  브라우저 API 객체나 프로토타입 속성과 같은 고유한 상태를 저장한 객체를 반환하는 것은 **권장하지 않습니다**.
-  이상적으로 반환된 객체는 컴포넌트의 상태만 나타내는 일반 객체여야 합니다.
+  브라우저 API 객체나 프로토타입 속성과 같은 고유한 상태를 저장한 객체를 반환하는 것은 **권장하지 않습니다**. 이상적으로 반환된 객체는 컴포넌트의 상태만 나타내는 일반 객체여야 합니다.
 
 - **예제**
 
@@ -47,8 +39,7 @@
   }
   ```
 
-  `data` 속성에 화살표 함수를 사용하는 경우,
-  `this`는 컴포넌트의 인스턴스가 아니지만 함수의 첫 번째 인자로 인스턴스에 접근할 수 있습니다:
+  `data` 속성에 화살표 함수를 사용하는 경우, `this`는 컴포넌트의 인스턴스가 아니지만 함수의 첫 번째 인자로 인스턴스에 접근할 수 있습니다:
 
   ```js
   data: (vm) => ({ a: vm.myProp })
@@ -77,7 +68,7 @@
     type?: PropType<T>
     required?: boolean
     default?: T | ((rawProps: object) => T)
-    validator?: (value: unknown) => boolean
+    validator?: (value: unknown, rawProps: object) => boolean
   }
 
   type PropType<T> = { new (): T } | { new (): T }[]
@@ -87,31 +78,22 @@
 
 - **세부 사항**:
 
-  Vue에서 모든 컴포넌트 props는 명시적으로 선언되어야 합니다.
-  컴포넌트 props는 두 가지 방식으로 선언할 수 있습니다:
+  Vue에서 모든 컴포넌트 props는 명시적으로 선언되어야 합니다. 컴포넌트 props는 두 가지 방식으로 선언할 수 있습니다:
 
   - 문자열 배열을 이용한 간단한 형태
   - "키: prop의 이름", "값: 타입(생성자 함수) 또는 고급 옵션"을 속성으로 하는 객체를 이용한 완전한 형태
 
   객체 기반 문법을 사용하면, 각 prop은 다음 옵션을 추가로 정의할 수 있습니다:
 
-  - **`type`**: 다음 네이티브 생성자 중 하나일 수 있습니다:
-    `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, "모든 커스텀 생성자 함수" 또는 이것들로 이루어진 배열.
-    개발 모드에서 Vue는 prop의 값이 선언된 타입과 일치하는지 확인하고, 일치하지 않으면 경고를 표시합니다.
-    자세한 내용은 [Prop 유효성 검사](/guide/components/props.html#prop-validation) 참고.
+  - **`type`**: 다음 네이티브 생성자 중 하나일 수 있습니다: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, "모든 커스텀 생성자 함수" 또는 이것들로 이루어진 배열. 개발 모드에서 Vue는 prop의 값이 선언된 타입과 일치하는지 확인하고, 일치하지 않으면 경고를 표시합니다. 자세한 내용은 [Prop 유효성 검사](/guide/components/props.html#prop-validation) 참고.
 
-    `Boolean` 타입은 개발 및 프로덕션에서 값을 캐스팅 하는 동작에 영향을 줍니다.
-    자세한 내용은 [불리언 캐스팅](/guide/components/props.html#boolean-casting) 참고.
+    `Boolean` 타입은 개발 및 프로덕션에서 값을 캐스팅 하는 동작에 영향을 줍니다. 자세한 내용은 [불리언 캐스팅](/guide/components/props.html#boolean-casting) 참고.
 
-  - **`default`**: 부모로부터 전달받지 않거나 `undefined` 값인 경우, prop에 지정할 기본값 입니다.
-    기본값이 객체 또는 배열일 경우, 팩토리 함수를 사용하여 반환돼야 합니다.
-    팩토리 함수는 "rawProps(상위 컴포넌트에게 받은 props 전체 객체)"를 인자로 받습니다.
+  - **`default`**: 부모로부터 전달받지 않거나 `undefined` 값인 경우, prop에 지정할 기본값 입니다. 기본값이 객체 또는 배열일 경우, 팩토리 함수를 사용하여 반환돼야 합니다. 팩토리 함수는 "rawProps(상위 컴포넌트에게 받은 props 전체 객체)"를 인자로 받습니다.
 
-  - **`required`**: prop이 필수인지 정의합니다.
-    비프로덕션 환경에서 이 값이 `true`이고 prop이 전달되지 않으면 콘솔 경고가 발생합니다.
+  - **`required`**: prop이 필수인지 정의합니다. 비프로덕션 환경에서 이 값이 `true`이고 prop이 전달되지 않으면 콘솔 경고가 발생합니다.
 
-  - **`validator`**: prop 값을 유일한 인자로 사용하는 커스텀 유효성 검사 함수입니다.
-    개발 모드에서 이 함수가 거짓 값을 반환하면(유효성 검사가 실패하면) 콘솔 경고가 발생합니다.
+  - **`validator`**: prop 값을 유일한 인자로 사용하는 커스텀 유효성 검사 함수입니다. 개발 모드에서 이 함수가 거짓 값을 반환하면(유효성 검사가 실패하면) 콘솔 경고가 발생합니다.
 
 - **예제**
 
@@ -182,9 +164,7 @@
 
   모든 `getter`와 `setter`에는 컴포넌트 인스턴스에 자동으로 바인딩된 `this` 컨텍스트가 있습니다.
 
-  화살표 함수를 사용한 계산된 속성의 경우,
-  `this`는 컴포넌트의 인스턴스를 가리키지 않지만,
-  여전히 함수의 첫 번째 인자로 인스턴스에 접근할 수 있습니다.
+  화살표 함수를 사용한 계산된 속성의 경우, `this`는 컴포넌트의 인스턴스를 가리키지 않지만, 여전히 함수의 첫 번째 인자로 인스턴스에 접근할 수 있습니다.
 
   ```js
   export default {
@@ -247,13 +227,9 @@
 
 - **세부 사항**:
 
-  선언된 메서드는 컴포넌트 인스턴스에서 직접 접근하거나,
-  템플릿 표현식에서 사용할 수 있습니다.
-  모든 메서드에는 해당 컴포넌트 인스턴스에 자동으로 바인딩된 `this` 컨텍스트가 있으며,
-  주위 컴포넌트로 전달된 경우에도 유지됩니다.
+  선언된 메서드는 컴포넌트 인스턴스에서 직접 접근하거나, 템플릿 표현식에서 사용할 수 있습니다. 모든 메서드에는 해당 컴포넌트 인스턴스에 자동으로 바인딩된 `this` 컨텍스트가 있으며, 주위 컴포넌트로 전달된 경우에도 유지됩니다.
 
-  메서드를 선언할 때 화살표 함수를 사용하지 않도록 해야 하는데,
-  `this`를 통해 컴포넌트 인스턴스에 접근할 수 없기 때문입니다.
+  메서드를 선언할 때 화살표 함수를 사용하지 않도록 해야 하는데, `this`를 통해 컴포넌트 인스턴스에 접근할 수 없기 때문입니다.
 
 - **예제**
 
@@ -311,33 +287,18 @@
 
 - **세부 사항**:
 
-  `watch` 옵션은 키가 감시할 반응형 컴포넌트 인스턴스 속성(예: `data` 또는 `computed`를 통해 선언된 속성)이고,
-  값이 해당 콜백으로 이루어진 객체입니다.
-  콜백은 감시되는 소스의 새 값과 이전 값을 인자로 수신합니다.
-
-  루트 수준 속성이 아닌 경우,
-  키는 `a.b.c`와 같이 점으로 구분된 경로가 될 수도 있습니다.
-  이 사용법은 복잡한 표현식을 **지원하지 않으며**,
-  점으로 구분된 경로만 지원됩니다.
-  복잡한 데이터 소스를 감시해야 하는 경우,
-  명령형 [`$watch()`](/api/component-instance.html#watch) API를 사용해야 합니다.
-
-  값은 메서드 이름에 해당하는 문자열(`methods`를 통해 선언됨) 또는 추가적인 옵션을 포함하는 객체일 수도 있습니다.
-  객체 문법을 사용할 경우,
-  `handler` 필드에 콜백을 선언해야 합니다.
-  추가 옵션은 다음과 같습니다:
-
-  - **`immediate`**: 감시자 생성 시 즉시 콜백 트리거.
-    첫 호출 시 이전 값은 `undefined`.
-  - **`deep`**: 객체 또는 배열인 경우 내부 깊숙한 곳에서 변경 사항 발생 시에도 콜백이 실행되도록 합니다.
-    참고: [깊은 감시자](/guide/essentials/watchers.html#deep-watchers).
-  - **`flush`**: 콜백 실행 타이밍을 조정합니다.
-    참고: [콜백 실행 타이밍](/guide/essentials/watchers.html#callback-flush-timing), [`watchEffect()`](/api/reactivity-core.html#watcheffect).
-  - **`onTrack / onTrigger`**: 감시자의 의존성을 디버그합니다.
-    참고: [감시자 디버깅](/guide/extras/reactivity-in-depth.html#watcher-debugging).
-
-  감시 콜백을 선언할 때 화살표 함수를 사용해선 안 되는데,
-  `this`로 컴포넌트 인스턴스에 접근할 수 없기 때문입니다.
+  `watch` 옵션은 키가 감시할 반응형 컴포넌트 인스턴스 속성(예: `data` 또는 `computed`를 통해 선언된 속성)이고, 값이 해당 콜백으로 이루어진 객체입니다. 콜백은 감시되는 소스의 새 값과 이전 값을 인자로 수신합니다.
+
+  루트 수준 속성이 아닌 경우, 키는 `a.b.c`와 같이 점으로 구분된 경로가 될 수도 있습니다. 이 사용법은 복잡한 표현식을 **지원하지 않으며**, 점으로 구분된 경로만 지원됩니다. 복잡한 데이터 소스를 감시해야 하는 경우, 명령형 [`$watch()`](/api/component-instance.html#watch) API를 사용해야 합니다.
+
+  값은 메서드 이름에 해당하는 문자열(`methods`를 통해 선언됨) 또는 추가적인 옵션을 포함하는 객체일 수도 있습니다. 객체 문법을 사용할 경우, `handler` 필드에 콜백을 선언해야 합니다. 추가 옵션은 다음과 같습니다:
+
+  - **`immediate`**: 감시자 생성 시 즉시 콜백 트리거. 첫 호출 시 이전 값은 `undefined`.
+  - **`deep`**: 객체 또는 배열인 경우 내부 깊숙한 곳에서 변경 사항 발생 시에도 콜백이 실행되도록 합니다. 참고: [깊은 감시자](/guide/essentials/watchers.html#deep-watchers).
+  - **`flush`**: 콜백 실행 타이밍을 조정합니다. 참고: [콜백 실행 타이밍](/guide/essentials/watchers.html#callback-flush-timing), [`watchEffect()`](/api/reactivity-core.html#watcheffect).
+  - **`onTrack / onTrigger`**: 감시자의 의존성을 디버그합니다. 참고: [감시자 디버깅](/guide/extras/reactivity-in-depth.html#watcher-debugging).
+
+  감시 콜백을 선언할 때 화살표 함수를 사용해선 안 되는데, `this`로 컴포넌트 인스턴스에 접근할 수 없기 때문입니다.
 
 - **예제**
 
@@ -434,15 +395,9 @@
   - 문자열 배열을 이용한 간단한 형태
   - "키: prop의 이름", "값: `null` 또는 유효성 검사 함수"를 속성으로 하는 객체를 이용한 완전한 형태
 
-  유효성 검사 함수는 컴포넌트의 `$emit` 호출에 전달된 인자를 수신합니다.
-  예를 들어 `this.$emit('foo', 1)`이 호출되면,
-  `foo`에 해당하는 유효성 검사기는 인자 `1`을 받습니다.
-  유효성 검사 함수는 이벤트 인자의 유효성을 불리언으로 반환해야 합니다.
+  유효성 검사 함수는 컴포넌트의 `$emit` 호출에 전달된 인자를 수신합니다. 예를 들어 `this.$emit('foo', 1)`이 호출되면, `foo`에 해당하는 유효성 검사기는 인자 `1`을 받습니다. 유효성 검사 함수는 이벤트 인자의 유효성을 불리언으로 반환해야 합니다.
 
-  `emits` 옵션은 기본 DOM 이벤트 리스너가 아닌 컴포넌트 이벤트 리스너로 간주되는 이벤트 리스너에 영향을 미칩니다.
-  `emits`에 선언된 이벤트의 리스너는 컴포넌트의 `$attrs` 객체에서 제거되므로,
-  컴포넌트의 루트 엘리먼트로 전달되지 않습니다.
-  자세한 내용은 [폴스루 속성](/guide/components/attrs) 참고.
+  `emits` 옵션은 기본 DOM 이벤트 리스너가 아닌 컴포넌트 이벤트 리스너로 간주되는 이벤트 리스너에 영향을 미칩니다. `emits`에 선언된 이벤트의 리스너는 컴포넌트의 `$attrs` 객체에서 제거되므로, 컴포넌트의 루트 엘리먼트로 전달되지 않습니다. 자세한 내용은 [폴스루 속성](/guide/components/attrs) 참고.
 
 - **예제**
 
@@ -484,8 +439,7 @@
 
 ## expose {#expose}
 
-부모 컴포넌트 인스턴스에서 템플릿 참조로 접근할 때,
-노출될 공용 속성을 선언합니다.
+부모 컴포넌트 인스턴스에서 템플릿 참조로 접근할 때, 노출될 공용 속성을 선언합니다.
 
 - **타입**:
 
@@ -497,16 +451,11 @@
 
 - **세부 사항**:
 
-  기본적으로 컴포넌트 인스턴스는 `$parent`, `$root` 또는 템플릿 참조(`$refs`)를 통해 접근할 때,
-  모든 인스턴스 속성을 부모에게 노출합니다.
-  자식 컴포넌트에는 긴밀한 결합을 피하기 위해 비공개로 유지되어야 하는 상태 또는 메서드가 있을 가능성이 높기 때문에 ,
-  이것은 바람직하지 않을 수 있습니다.
+  기본적으로 컴포넌트 인스턴스는 `$parent`, `$root` 또는 템플릿 참조(`$refs`)를 통해 접근할 때, 모든 인스턴스 속성을 부모에게 노출합니다. 자식 컴포넌트에는 긴밀한 결합을 피하기 위해 비공개로 유지되어야 하는 상태 또는 메서드가 있을 가능성이 높기 때문에, 이것은 바람직하지 않을 수 있습니다.
 
-  `expose` 옵션은 속성의 이름 문자열로 이루어진 배열입니다.
-  `expose`를 사용하면 명시적으로 나열된 속성만 컴포넌트의 공개 인스턴스에 노출됩니다.
+  `expose` 옵션은 속성의 이름 문자열로 이루어진 배열입니다. `expose`를 사용하면 명시적으로 나열된 속성만 컴포넌트의 공개 인스턴스에 노출됩니다.
 
-  `expose`는 커스텀 속성에만 영향을 미치며,
-  빌트인 컴포넌트 인스턴스 속성은 걸러내지 않습니다.
+  `expose`는 커스텀 속성에만 영향을 미치며, 빌트인 컴포넌트 인스턴스 속성은 걸러내지 않습니다.
 
 - **예제**
 
diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md
index 690f1dd1..2f797050 100644
--- a/src/api/reactivity-core.md
+++ b/src/api/reactivity-core.md
@@ -23,21 +23,12 @@
 
 - **세부 사항**:
 
-  ref 객체는 반응형이며, `.value` 속성에 새 값을 할당할 수 있습니다.
-  즉, `.value`에 대한 모든 읽기 작업이 추적되고, 쓰기 작업은 관련 이펙트를 트리거합니다.
+  ref 객체는 반응형이며, `.value` 속성에 새 값을 할당할 수 있습니다. 즉, `.value`에 대한 모든 읽기 작업이 추적되고, 쓰기 작업은 관련 이펙트를 트리거합니다.
 
-  객체가 ref의 값(`.value`)으로 할당되면,
-  [reactive()](#reactive)로 내부 깊숙이(deeply) 반응하게 됩니다.
-  이러한 동작은 객체 내부 깊숙이 ref가 포함되어 있으면, 언래핑됨을 의미합니다.
+  객체가 ref의 값(`.value`)으로 할당되면, [reactive()](#reactive)로 내부 깊숙이(deeply) 반응하게 됩니다. 이러한 동작은 객체 내부 깊숙이 ref가 포함되어 있으면, 언래핑됨을 의미합니다.
 
   내부 깊숙이까지 변환되는 것을 방지하려면, [`shallowRef()`](./reactivity-advanced#shallowref)를 사용해야 합니다.
 
-  :::info 래핑, 언래핑의 개념이 혼란스러울 경우
-  어떤 값이 `ref`에 할당되어 있다고 가정합시다.
-
-  이 때, `.value`를 통해 할당된 값에 접근해야 한다면 "래핑"된 것이고, `.value` 없이 접근된다면 "언래핑"된 것이라고 이해할 수 있습니다.  
-  :::
-
 - **예제**
 
   ```js
@@ -54,15 +45,14 @@
 
 ## computed() {#computed}
 
-getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 반응형 [ref](#ref) 객체로 반환합니다.
-`get`과 `set` 함수가 있는 객체를 사용하면, 쓰기 가능한 ref 객체를 반환합니다.
+getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 반응형 [ref](#ref) 객체로 반환합니다. `get`과 `set` 함수가 있는 객체를 사용하면, 쓰기 가능한 ref 객체를 반환합니다.
 
 - **타입**:
 
   ```ts
   // 읽기 전용
   function computed<T>(
-    getter: () => T,
+    getter: (oldValue: T | undefined) => T,
     // 아래의 "계산된 속성 디버깅" 링크를 참고하세요
     debuggerOptions?: DebuggerOptions
   ): Readonly<Ref<Readonly<T>>>
@@ -70,7 +60,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
   // 쓰기 가능
   function computed<T>(
     options: {
-      get: () => T
+      get: (oldValue: T | undefined) => T
       set: (value: T) => void
     },
     debuggerOptions?: DebuggerOptions
@@ -122,6 +112,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
   - [가이드 - 계산된 속성](/guide/essentials/computed)
   - [가이드 - 계산된 속성 디버깅](/guide/extras/reactivity-in-depth#computed-debugging)
   - [가이드 - `computed()`에 타입 지정하기](/guide/typescript/composition-api#typing-computed) <sup class="vt-badge ts" />
+  - [가이드 - 성능 - Computed Stability](/guide/best-practices/performance#computed-stability) <sup class="vt-badge" data-text="3.4+" />
 
 ## reactive() {#reactive}
 
@@ -135,16 +126,13 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 - **세부 사항**:
 
-  반응형 변환은 "내부 깊숙이 있는(deep)" 모든 중첩 속성에 영향을 줍니다.
-  또한, 반응형 객체는 내부 깊숙이 있는 모든 [refs](#ref) 속성의 반응형을 유지하면서 언래핑합니다.
+  반응형 변환은 "내부 깊숙이 있는(deep)" 모든 중첩 속성에 영향을 줍니다. 또한, 반응형 객체는 내부 깊숙이 있는 모든 [refs](#ref) 속성의 반응형을 유지하면서 언래핑합니다.
 
   그러나 `Map` 같은 네이티브 컬렉션 타입 또는 반응형 배열의 요소인 ref로 접근할 때는 언래핑 되지 않음에 유의해야 합니다.
 
   내부 깊은 곳까지의 변환은 피하고 루트 수준에서만 반응형을 유지하려면, [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)로 래핑되므로, 원본 객체와 **동일하지 않습니다**. 그러므로 반응형 프락시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다.
 
 - **예제**
 
@@ -217,8 +205,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 - **세부 사항**:
 
-  읽기 전용 프락시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다.
-  또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다.
+  읽기 전용 프락시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다. 또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다.
 
   내부 깊은 곳까지의 변환을 피하려면, [shallowReadonly()](./reactivity-advanced#shallowreadonly)를 사용해야 합니다.
 
@@ -266,14 +253,9 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 - **세부 사항**:
 
-  첫 번째 인자는 실행할 이펙트 함수입니다.
-  이펙트 함수는 인자로 클린업(cleanup) 콜백을 등록해 실행할 수 있는 함수를 받습니다.
-  클린업 콜백은 다음에 이펙트가 다시 실행되기 직전에 호출되며,
-  무효화된 사이드 이펙트를 정리하는 데 사용할 수 있습니다.
-  예를들어 비동기 요청의 결과 대기중(pending)에 사용할 수 있습니다.(아래 예제 참고)
+  첫 번째 인자는 실행할 이펙트 함수입니다. 이펙트 함수는 인자로 클린업(cleanup) 콜백을 등록해 실행할 수 있는 함수를 받습니다. 클린업 콜백은 다음에 이펙트가 다시 실행되기 직전에 호출되며, 무효화된 사이드 이펙트를 정리하는 데 사용할 수 있습니다. 예를들어 비동기 요청의 결과 대기중(pending)에 사용할 수 있습니다.(아래 예제 참고)
 
-  두 번째 인자는 이펙트의 발생(flush) 타이밍을 조정하거나,
-  이펙트의 의존성을 디버그하는 데 사용할 수 있는 선택적 옵션 객체입니다.
+  두 번째 인자는 이펙트의 발생(flush) 타이밍을 조정하거나, 이펙트의 의존성을 디버그하는 데 사용할 수 있는 선택적 옵션 객체입니다.
 
   기본적으로 와처는 컴포넌트 렌더링 직전에 실행됩니다. `flush: 'post'`를 설정하면 컴포넌트 렌더링 이후까지 와처가 지연됩니다. 자세한 내용은 [콜백 플러시 타이밍](/guide/essentials/watchers#callback-flush-timing)을 참조하세요. 드물지만 캐시 무효화와 같이 반응형 의존성이 변경될 때 즉시 와처를 트리거해야 하는 경우가 있을 수 있습니다. 이는 `flush: 'sync'`를 사용하여 수행할 수 있습니다. 그러나 이 설정은 여러 프로퍼티가 동시에 업데이트되는 경우 성능 및 데이터 일관성 문제를 일으킬 수 있으므로 주의해서 사용해야 합니다.
 
@@ -379,6 +361,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
     flush?: 'pre' | 'post' | 'sync' // 기본 값: 'pre'
     onTrack?: (event: DebuggerEvent) => void
     onTrigger?: (event: DebuggerEvent) => void
+    once?: boolean // 기본 값: false (3.4+)
   }
   ```
 
@@ -386,35 +369,26 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
 
 - **세부 사항**:
 
-  `watch()`는 기본적으로 개으릅니다(lazy).
-  그러므로 콜백은 감시된 소스가 변경되었을 때만 호출됩니다.
+  `watch()`는 기본적으로 개으릅니다(lazy). 그러므로 콜백은 감시된 소스가 변경되었을 때만 호출됩니다.
 
-  첫 번째 인자는 감시될 **소스**입니다.
-  소스는 다음 중 하나일 수 있습니다:
+  첫 번째 인자는 감시될 **소스**입니다. 소스는 다음 중 하나일 수 있습니다:
 
   - 값을 반환하는 getter 함수
   - ref
   - 반응형 객체
   - 또는 위에 나열한 것들의 배열
 
-  두 번째 인자는 소스가 변경될 때 호출될 콜백입니다.
-  콜백은 "변경된 값", "이전 값", "사이드 이펙트 클린업 콜백을 등록하기 위한 함수" 이렇게 세 가지 인자를 받습니다.
-  클린업 콜백은 다음에 이펙트가 다시 실행되기 직전에 호출되며,
-  무효화된 사이드 이펙트를 정리하는 데 사용할 수 있습니다.
-  예를들어 비동기 요청의 결과 대기중(pending)에 사용할 수 있습니다.
+  두 번째 인자는 소스가 변경될 때 호출될 콜백입니다. 콜백은 "변경된 값", "이전 값", "사이드 이펙트 클린업 콜백을 등록하기 위한 함수" 이렇게 세 가지 인자를 받습니다. 클린업 콜백은 다음에 이펙트가 다시 실행되기 직전에 호출되며, 무효화된 사이드 이펙트를 정리하는 데 사용할 수 있습니다. 예를들어 비동기 요청의 결과 대기중(pending)에 사용할 수 있습니다.
 
   여러 소스를 감시할 때, 콜백은 소스 배열에 해당하는 변경된 값 배열, 이전 값 배열 두 개를 수신합니다.
 
   세 번째 인자는 선택적이며, 다음을 지원하는 옵션 객체입니다:
 
-  - **`immediate`**: 감시자가 생성되는 즉시 콜백이 호출됩니다.
-    최초 호출 시, 이전 값은 `undefined`입니다.
-  - **`deep`**: 소스가 객체인 경우, 깊은 변경사항에서도 콜백이 실행되도록 합니다.
-    참고: [깊은 감시자](/guide/essentials/watchers#deep-watchers).
-  - **`flush`**: 콜백의 발생(flush) 타이밍을 조정합니다.
-    참고: [콜백 실행 타이밍](/guide/essentials/watchers#callback-flush-timing), [`watchEffect()`](/api/reactivity-core#watcheffect).
-  - **`onTrack / onTrigger`**: 감시자의 의존성을 디버그합니다.
-    참고: [감시자 디버깅](/guide/extras/reactivity-in-depth#watcher-debugging).
+  - **`immediate`**: 감시자가 생성되는 즉시 콜백이 호출됩니다. 최초 호출 시, 이전 값은 `undefined`입니다.
+  - **`deep`**: 소스가 객체인 경우, 깊은 변경사항에서도 콜백이 실행되도록 합니다. 참고: [깊은 감시자](/guide/essentials/watchers#deep-watchers).
+  - **`flush`**: 콜백의 발생(flush) 타이밍을 조정합니다. 참고: [콜백 실행 타이밍](/guide/essentials/watchers#callback-flush-timing), [`watchEffect()`](/api/reactivity-core#watcheffect).
+  - **`onTrack / onTrigger`**: 감시자의 의존성을 디버그합니다. 참고: [감시자 디버깅](/guide/extras/reactivity-in-depth#watcher-debugging).
+  - **`once`**: 콜백을 한 번만 실행합니다. 감시자는 첫 번째 콜백 실행 후 자동으로 중지됩니다. <sup class="vt-badge" data-text="3.4+" />
 
   [`watchEffect()`](#watcheffect)와 비교하여 `watch()`를 사용하면 다음을 수행할 수 있습니다:
 
@@ -453,9 +427,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 
   })
   ```
 
-  getter 소스를 사용할 때, 감시자는 getter의 반환 값이 변경된 경우에만 실행됩니다.
-  깊은 변경사항에서도 콜백을 실행하려면, `{ deep: true }`를 사용하여 감시자를 딥 모드로 설정해야 합니다.
-  딥 모드에서 콜백이 깊은 변경사항으로 트리거된 경우, 새 값과 이전 값은 동일한 객체입니다.
+  getter 소스를 사용할 때, 감시자는 getter의 반환 값이 변경된 경우에만 실행됩니다. 깊은 변경사항에서도 콜백을 실행하려면, `{ deep: true }`를 사용하여 감시자를 딥 모드로 설정해야 합니다. 딥 모드에서 콜백이 깊은 변경사항으로 트리거된 경우, 새 값과 이전 값은 동일한 객체입니다.
 
   ```js
   const state = reactive({ count: 0 })
diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index 32bf9796..c17d40ca 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -1,8 +1,6 @@
 # \<script setup> {#script-setup}
 
-`<script setup>`은 싱글 파일 컴포넌트(SFC) 내에서 컴포지션 API를 더 쉽게 읽거나 사용하기 위한 컴파일 타임 문법입니다.
-SFC에서 컴포지션 API를 사용하는 경우, 권장되는 문법입니다.
-일반적인 `<script>` 문법에 비해 많은 이점을 제공합니다:
+`<script setup>`은 싱글 파일 컴포넌트(SFC) 내에서 컴포지션 API를 더 쉽게 읽거나 사용하기 위한 컴파일 타임 문법입니다. SFC에서 컴포지션 API를 사용하는 경우, 권장되는 문법입니다. 일반적인 `<script>` 문법에 비해 많은 이점을 제공합니다:
 
 - 더 적은 상용구로 더 간결한 코드
 - 순수 TypeScript를 사용하여 props 및 내보낼(emit) 이벤트를 선언하는 기능
@@ -19,14 +17,11 @@ console.log('안녕, script setup!')
 </script>
 ```
 
-내부 코드는 컴포넌트의 `setup()` 함수 내용으로 컴파일됩니다.
-즉, 컴포넌트를 처음 가져올 때 한 번만 실행되는 일반적인 `<script>`와 달리,
-`<script setup>` 내부의 코드는 **컴포넌트의 인스턴스가 생성될 때마다 실행**합니다.
+내부 코드는 컴포넌트의 `setup()` 함수 내용으로 컴파일됩니다. 즉, 컴포넌트를 처음 가져올 때 한 번만 실행되는 일반적인 `<script>`와 달리, `<script setup>` 내부의 코드는 **컴포넌트의 인스턴스가 생성될 때마다 실행**합니다.
 
 ### 템플릿에 노출되는 최상위 바인딩 {#top-level-bindings-are-exposed-to-template}
 
-`<script setup>`을 사용할 때,
-내부에 선언된 모든 최상위 바인딩(변수, 함수 선언 및 `import` 포함)은 템플릿에서 직접 사용할 수 있습니다:
+`<script setup>`을 사용할 때, 내부에 선언된 모든 최상위 바인딩(변수, 함수 선언 및 `import` 포함)은 템플릿에서 직접 사용할 수 있습니다:
 
 ```vue
 <script setup>
@@ -44,8 +39,7 @@ function log() {
 </template>
 ```
 
-`import`도 같은 방식으로 노출됩니다.
-즉, `methods` 옵션을 통해 노출하지 않고도 템플릿 표현식에서 `import`한 헬퍼 함수를 직접 사용할 수 있습니다:
+`import`도 같은 방식으로 노출됩니다. 즉, `methods` 옵션을 통해 노출하지 않고도 템플릿 표현식에서 `import`한 헬퍼 함수를 직접 사용할 수 있습니다:
 
 ```vue
 <script setup>
@@ -59,8 +53,7 @@ import { capitalize } from './helpers'
 
 ## 반응형 {#reactivity}
 
-반응형 상태는 [반응형 API](./reactivity-core)를 사용하여 명시적으로 생성되어야 합니다.
-`setup()` 함수에서 반환된 값과 유사하게, 템플릿에서 참조될 때 ref는 자동으로 언래핑됩니다:
+반응형 상태는 [반응형 API](./reactivity-core)를 사용하여 명시적으로 생성되어야 합니다. `setup()` 함수에서 반환된 값과 유사하게, 템플릿에서 참조될 때 ref는 자동으로 언래핑됩니다:
 
 ```vue
 <script setup>
@@ -89,18 +82,11 @@ import MyComponent from './MyComponent.vue'
 </template>
 ```
 
-`MyComponent`는 변수처럼 참조된다고 생각하십시오.
-JSX를 사용한 적이 있는 경우,
-멘탈 모델(mental model)과 유사합니다.
-kebab-case에 해당하는 `<my-component>`도 템플릿에서 작동하지만,
-일관성을 위해 PascalCase 컴포넌트 태그를 강력히 권장합니다.
-또한 네이티브 커스텀 엘리먼트와 구별하는 데 도움이 됩니다.
+`MyComponent`는 변수처럼 참조된다고 생각하십시오. JSX를 사용한 적이 있는 경우, 멘탈 모델(mental model)과 유사합니다. kebab-case에 해당하는 `<my-component>`도 템플릿에서 작동하지만, 일관성을 위해 PascalCase 컴포넌트 태그를 강력히 권장합니다. 또한 네이티브 커스텀 엘리먼트와 구별하는 데 도움이 됩니다.
 
 ### 동적 컴포넌트 {#dynamic-components}
 
-컴포넌트는 문자열 키로 등록되는 대신 변수로 참조되므로,
-`<script setup>` 내에서 동적 컴포넌트를 사용할 때,
-동적인 `:is` 바인딩을 사용해야 합니다:
+컴포넌트는 문자열 키로 등록되는 대신 변수로 참조되므로, `<script setup>` 내에서 동적 컴포넌트를 사용할 때, 동적인 `:is` 바인딩을 사용해야 합니다:
 
 ```vue
 <script setup>
@@ -118,12 +104,9 @@ import Bar from './Bar.vue'
 
 ### 재귀 컴포넌트 {#recursive-components}
 
-SFC는 파일 이름을 통해 암시적으로 자신을 참조할 수 있습니다.
-예를 들어 `FooBar.vue`라는 파일은 템플릿에서 `<FooBar/>`로 자신을 참조할 수 있습니다.
+SFC는 파일 이름을 통해 암시적으로 자신을 참조할 수 있습니다. 예를 들어 `FooBar.vue`라는 파일은 템플릿에서 `<FooBar/>`로 자신을 참조할 수 있습니다.
 
-`import`한 컴포넌트보다 우선 순위가 낮습니다.
-컴포넌트의 유추된 이름과 충돌하는 명명된 가져오기가 있는 경우,
-`import`할 때 별칭을 지정할 수 있습니다:
+`import`한 컴포넌트보다 우선 순위가 낮습니다. 컴포넌트의 유추된 이름과 충돌하는 명명된 가져오기가 있는 경우, `import`할 때 별칭을 지정할 수 있습니다:
 
 ```js
 import { FooBar as FooBarChild } from './components'
@@ -131,9 +114,7 @@ import { FooBar as FooBarChild } from './components'
 
 ### 네임스페이스 컴포넌트 {#namespaced-components}
 
-`<Foo.Bar>`와 같이 점이 있는 컴포넌트 태그를 사용하여,
-객체 내부에 중첩된 속성으로 컴포넌트를 참조할 수 있습니다.
-단일 파일에서 여러 컴포넌트를 가져올 때 유용합니다:
+`<Foo.Bar>`와 같이 점이 있는 컴포넌트 태그를 사용하여, 객체 내부에 중첩된 속성으로 컴포넌트를 참조할 수 있습니다. 단일 파일에서 여러 컴포넌트를 가져올 때 유용합니다:
 
 ```vue
 <script setup>
@@ -149,9 +130,7 @@ import * as Form from './form-components'
 
 ## 커스텀 디렉티브 사용 {#using-custom-directives}
 
-전역적으로 등록된 커스텀 디렉티브는 정상적으로 작동합니다.
-로컬 커스텀 디렉티브는 `<script setup>`으로 명시적으로 등록할 필요는 없지만,
-`vNameOfDirective`라는 네이밍 스키마를 따라야 합니다:
+전역적으로 등록된 커스텀 디렉티브는 정상적으로 작동합니다. 로컬 커스텀 디렉티브는 `<script setup>`으로 명시적으로 등록할 필요는 없지만, `vNameOfDirective`라는 네이밍 스키마를 따라야 합니다:
 
 ```vue
 <script setup>
@@ -166,8 +145,7 @@ const vMyDirective = {
 </template>
 ```
 
-다른 곳에서 디렉티브를 가져오는 경우,
-필요한 명명 체계에 맞게 이름을 바꿀 수 있습니다:
+다른 곳에서 디렉티브를 가져오는 경우, 필요한 명명 체계에 맞게 이름을 바꿀 수 있습니다:
 
 ```vue
 <script setup>
@@ -177,8 +155,7 @@ import { myDirective as vMyDirective } from './MyDirective.js'
 
 ## `defineProps()` & `defineEmits()`
 
-완전한 타입 추론을 지원하는 `props` 및 `emits`와 같은 옵션을 선언하려면,
-`<script setup>` 내에서 자동으로 사용할 수 있는 `defineProps` 및 `defineEmits` API를 사용합니다:
+완전한 타입 추론을 지원하는 `props` 및 `emits`와 같은 옵션을 선언하려면, `<script setup>` 내에서 자동으로 사용할 수 있는 `defineProps` 및 `defineEmits` API를 사용합니다:
 
 ```vue
 <script setup>
@@ -191,18 +168,13 @@ const emit = defineEmits(['change', 'delete'])
 </script>
 ```
 
-- `defineProps` 및 `defineEmits`는 `<script setup>` 내에서만 사용할 수 있는 **컴파일러 매크로**입니다.
-  `import`할 필요가 없으며, `<script setup>`이 처리될 때 컴파일됩니다.
+- `defineProps` 및 `defineEmits`는 `<script setup>` 내에서만 사용할 수 있는 **컴파일러 매크로**입니다. `import`할 필요가 없으며, `<script setup>`이 처리될 때 컴파일됩니다.
 
-- `defineProps`는 `props` 옵션과 동일한 값을 허용하고,
-  `defineEmits`는 `emits` 옵션과 동일한 값을 허용합니다.
+- `defineProps`는 `props` 옵션과 동일한 값을 허용하고, `defineEmits`는 `emits` 옵션과 동일한 값을 허용합니다.
 
 - `defineProps` 및 `defineEmits`는 전달된 옵션을 기반으로 적절한 타입 추론을 제공합니다.
 
-- `defineProps` 및 `defineEmits`에 전달된 옵션은 setup에서 모듈 범위로 호이스트됩니다.
-  따라서 옵션은 setup 범위에서 선언된 로컬 변수를 참조할 수 없습니다.
-  그렇게 하면 컴파일 에러가 발생합니다.
-  그러나 `import`한 바인딩은 모듈 범위에 있으므로 **참조 할 수 있습니다**.
+- `defineProps` 및 `defineEmits`에 전달된 옵션은 setup에서 모듈 범위로 호이스트됩니다. 따라서 옵션은 setup 범위에서 선언된 로컬 변수를 참조할 수 없습니다. 그렇게 하면 컴파일 에러가 발생합니다. 그러나 `import`한 바인딩은 모듈 범위에 있으므로 **참조 할 수 있습니다**.
 
 ### 타입 전용 props/emit 선언 {#type-only-props-emit-declarations}
 
@@ -226,28 +198,21 @@ const emit = defineEmits<{
 }>()
 ```
 
-- `defineProps` 또는 `defineEmits`는 런타임 선언 또는 타입 선언만 사용할 수 있습니다.
-  두 가지를 동시에 사용하면 컴파일 에러가 발생합니다.
+- `defineProps` 또는 `defineEmits`는 런타임 선언 또는 타입 선언만 사용할 수 있습니다. 두 가지를 동시에 사용하면 컴파일 에러가 발생합니다.
 
-- 타입 선언을 사용할 때 정적 분석에서 동등한 런타임 선언이 자동으로 생성되어,
-  이중 선언의 필요성을 제거하고 여전히 올바른 런타임 동작을 보장합니다.
+- 타입 선언을 사용할 때 정적 분석에서 동등한 런타임 선언이 자동으로 생성되어, 이중 선언의 필요성을 제거하고 여전히 올바른 런타임 동작을 보장합니다.
 
-  - 개발 모드에서 컴파일러는 타입에서 해당 런타임 유효성 검사를 유추하려고 시도합니다.
-    예를 들어 `foo: String`은 `foo: string` 타입에서 유추됩니다.
-    타입이 가져온 타입의 참조인 경우,
-    컴파일러에 외부 파일 정보가 없기 때문에 추론된 결과는 `foo: null`(`any` 타입과 동일)이 됩니다.
+  - 개발 모드에서 컴파일러는 타입에서 해당 런타임 유효성 검사를 유추하려고 시도합니다. 예를 들어 `foo: String`은 `foo: string` 타입에서 유추됩니다. 타입이 가져온 타입의 참조인 경우, 컴파일러에 외부 파일 정보가 없기 때문에 추론된 결과는 `foo: null`(`any` 타입과 동일)이 됩니다.
 
   - prod 모드에서 컴파일러는 번들 크기를 줄이기 위해 배열 형식 선언을 생성합니다(여기서 props는 `['foo', 'bar']`로 컴파일됩니다).
 
-  - 내보낼(emit)) 코드는 여전히 유효한 타이핑이 있는 TypeScript이며,
-    다른 도구에서 추가로 처리할 수 있습니다.
+  - 내보낼(emit)) 코드는 여전히 유효한 타이핑이 있는 TypeScript이며, 다른 도구에서 추가로 처리할 수 있습니다.
 
 - 버전 3.2 이하에서 타입 파라미터는 타입 리터럴 또는 로컬 타입에 대한 참조로 제한됩니다. 이 제한은 3.3에서 제거되었습니다. 3.3부터 Vue는 외부에서 가져온 것을 포함하여 가장 일반적인 타입에서 런타임 props를 유추할 수 있습니다.
 
 ### 타입 선언을 사용할 때 기본 props 값 {#default-props-values-when-using-type-declaration}
 
-타입 전용 `defineProps` 선언의 한 가지 단점은 props에 대한 기본값을 제공할 방법이 없다는 것입니다.
-이 문제를 해결하기 위해 `withDefaults` 컴파일러 매크로를 제공합니다:
+타입 전용 `defineProps` 선언의 한 가지 단점은 props에 대한 기본값을 제공할 방법이 없다는 것입니다. 이 문제를 해결하기 위해 `withDefaults` 컴파일러 매크로를 제공합니다:
 
 ```ts
 export interface Props {
@@ -261,14 +226,82 @@ const props = withDefaults(defineProps<Props>(), {
 })
 ```
 
-이것은 동등한 런타임 props `default` 옵션으로 컴파일됩니다.
-또한 `withDefaults` 헬퍼는 기본값에 대한 타입 검사를 제공하고,
-반환된 `props` 타입에 기본값이 선언된 속성의 선택적 플래그가 제거되었는지 확인합니다.
+이것은 동등한 런타임 props `default` 옵션으로 컴파일됩니다. 또한 `withDefaults` 헬퍼는 기본값에 대한 타입 검사를 제공하고, 반환된 `props` 타입에 기본값이 선언된 속성의 선택적 플래그가 제거되었는지 확인합니다.
+
+## defineModel() <sup class="vt-badge" data-text="3.4+" /> {#definemodel}
+
+이 매크로는 부모 컴포넌트에서 `v-model`을 통해 사용될 수 있는 양방향 바인딩 prop을 선언하는 데 사용될 수 있습니다. 예시 사용 방법은 [컴포넌트 `v-model`](/guide/components/v-model) 가이드에서도 논의되었습니다.
+
+내부적으로, 이 매크로는 모델 prop과 해당하는 값 업데이트 이벤트를 선언합니다. 첫 번째 인수가 리터럴 문자열인 경우, 그것은 prop 이름으로 사용될 것입니다; 그렇지 않으면 prop 이름은 기본적으로 `"modelValue"`로 설정됩니다. 두 경우 모두 추가적인 객체를 전달할 수 있으며, 이는 prop의 옵션과 모델 ref의 값 변환 옵션을 포함할 수 있습니다.
+
+```js
+// "modelValue" prop 선언, 부모에 의해 v-model을 통해 사용됨
+const model = defineModel()
+// 또는: 옵션을 포함한 "modelValue" prop 선언
+const model = defineModel({ type: String })
+
+// 변형될 때 "update:modelValue" 이벤트 발생
+model.value = 'hello'
+
+// "count" prop 선언, 부모에 의해 v-model:count를 통해 사용됨
+const count = defineModel('count')
+// 또는: 옵션을 포함한 "count" prop 선언
+const count = defineModel('count', { type: Number, default: 0 })
+
+function inc() {
+  // 변형될 때 "update:count" 이벤트 발생
+  count.value++
+}
+```
+
+### Modifiers and Transformers {#modifiers-and-transformers}
+
+`v-model` 지시문과 함께 사용되는 수정자에 접근하려면, `defineModel()`의 반환 값을 구조 분해하는 방식을 사용할 수 있습니다:
+
+```js
+const [modelValue, modelModifiers] = defineModel()
+
+// v-model.trim에 해당
+if (modelModifiers.trim) {
+  // ...
+}
+```
+
+수정자가 존재할 때, 부모에게 값을 읽거나 동기화할 때 값을 변환할 필요가 있을 수 있습니다. 이를 위해 `get`과 `set` 변환기 옵션을 사용하여 이를 달성할 수 있습니다:
+
+```js
+const [modelValue, modelModifiers] = defineModel({
+  // 여기서는 get()이 필요하지 않으므로 생략
+  set(value) {
+    // .trim 수정자가 사용되면, 공백을 제거한 값을 반환
+    if (modelModifiers.trim) {
+      return value.trim()
+    }
+    // 그렇지 않으면, 값을 그대로 반환
+    return value
+  }
+})
+```
+
+### TypeScript와 함께 사용하기 <sup class="vt-badge ts" /> {#usage-with-typescript}
+
+`defineProps` 및 `defineEmits`와 마찬가지로, `defineModel`은 모델 값과 수정자의 유형을 지정하기 위해 타입 인수를 받을 수 있습니다:
+
+```ts
+const modelValue = defineModel<string>()
+//    ^? Ref<string | undefined>
+
+// 기본 모델 옵션, 'required'는 가능한 undefined 값을 제거함
+const modelValue = defineModel<string>({ required: true })
+//    ^? Ref<string>
+
+const [modelValue, modifiers] = defineModel<string, 'trim' | 'uppercase'>()
+//                 ^? Record<'trim' | 'uppercase', true | undefined>
+```
 
 ## defineExpose() {#defineexpose}
 
-`<script setup>`을 사용하는 컴포넌트는 **기본적으로 닫혀 있습니다**.
-즉, 템플릿 참조 또는 `$parent` 체인을 통해 검색되는 컴포넌트의 공개 인스턴스는 `<script setup>` 내부에서 선언된 바인딩을 **노출하지 않습니다**.
+`<script setup>`을 사용하는 컴포넌트는 **기본적으로 닫혀 있습니다**. 즉, 템플릿 참조 또는 `$parent` 체인을 통해 검색되는 컴포넌트의 공개 인스턴스는 `<script setup>` 내부에서 선언된 바인딩을 **노출하지 않습니다**.
 
 `<script setup>` 컴포넌트의 속성을 명시적으로 노출하려면 `defineExpose` 컴파일러 매크로를 사용해야 합니다:
 
@@ -286,12 +319,11 @@ defineExpose({
 </script>
 ```
 
-부모가 템플릿 참조를 통해 이 컴포넌트의 인스턴스를 가져오면,
-검색된 인스턴스는 `{ a: number, b: number }` 모양이 됩니다(참조는 일반 인스턴스와 마찬가지로 자동으로 언래핑됨).
+부모가 템플릿 참조를 통해 이 컴포넌트의 인스턴스를 가져오면, 검색된 인스턴스는 `{ a: number, b: number }` 모양이 됩니다(참조는 일반 인스턴스와 마찬가지로 자동으로 언래핑됨).
 
 ## defineOptions() {#defineoptions}
 
-This macro can be used to declare component options directly inside `<script setup>` without having to use a separate `<script>` block:
+이 매크로는 별도의 `<script>` 블록을 사용하지 않고 `<script setup>` 내에서 직접 컴포넌트 옵션을 선언하는 데 사용될 수 있습니다:
 
 ```vue
 <script setup>
@@ -304,16 +336,16 @@ defineOptions({
 </script>
 ```
 
-- Only supported in 3.3+.
-- This is a macro. The options will be hoisted to module scope and cannot access local variables in `<script setup>` that are not literal constants.
+- 3.3+에서만 지원됩니다.
+- 이것은 매크로입니다. 옵션은 모듈 범위로 상향 조정되며 `<script setup>`의 리터럴 상수가 아닌 로컬 변수에 접근할 수 없습니다.
 
 ## defineSlots()<sup class="vt-badge ts"/> {#defineslots}
 
-This macro can be used to provide type hints to IDEs for slot name and props type checking.
+이 매크로는 IDE에 슬롯 이름 및 prop 유형 확인을 위한 타입 힌트를 제공하는 데 사용될 수 있습니다.
 
-`defineSlots()` only accepts a type parameter and no runtime arguments. The type parameter should be a type literal where the property key is the slot name, and the value type is the slot function. The first argument of the function is the props the slot expects to receive, and its type will be used for slot props in the template. The return type is currently ignored and can be `any`, but we may leverage it for slot content checking in the future.
+`defineSlots()`는 유형 매개변수만 받으며 런타임 인수는 받지 않습니다. 유형 매개변수는 속성 키가 슬롯 이름이고 값 유형이 슬롯 함수인 유형 리터럴이어야 합니다. 함수의 첫 번째 인수는 슬롯이 받기를 기대하는 prop이며, 템플릿에서 슬롯 prop의 유형으로 사용될 것입니다. 반환 유형은 현재 무시되며 `any`일 수 있지만, 향후 슬롯 콘텐츠 확인에 활용할 수 있습니다.
 
-It also returns the `slots` object, which is equivalent to the `slots` object exposed on the setup context or returned by `useSlots()`.
+또한 `slots` 객체를 반환하는데, 이것은 setup 컨텍스트에 노출되거나 `useSlots()`에 의해 반환된 `slots` 객체와 동일합니다.
 
 ```vue
 <script setup lang="ts">
@@ -323,12 +355,11 @@ const slots = defineSlots<{
 </script>
 ```
 
-- Only supported in 3.3+.
+- 3.3+ 이상에서만 지원됩니다.
 
 ## `useSlots()` & `useAttrs()` {#useslots-useattrs}
 
-`<script setup>` 내부에서 `slots` 및 `attrs` 사용은 템플릿에서 `$slots` 및 `$attrs`로 직접 접근할 수 있으므로 비교적 드물게 사용해야 합니다.
-드물게 필요한 경우 `useSlots` 및 `useAttrs` 헬퍼를 각각 사용합니다:
+`<script setup>` 내부에서 `slots` 및 `attrs` 사용은 템플릿에서 `$slots` 및 `$attrs`로 직접 접근할 수 있으므로 비교적 드물게 사용해야 합니다. 드물게 필요한 경우 `useSlots` 및 `useAttrs` 헬퍼를 각각 사용합니다:
 
 ```vue
 <script setup>
@@ -339,16 +370,13 @@ const attrs = useAttrs()
 </script>
 ```
 
-`useSlots` 및 `useAttrs`는 `setupContext.slots` 및 `setupContext.attrs`에 해당하는 항목을 반환하는 실제 런타임 함수입니다.
-일반 컴포지션 API 함수에서도 사용할 수 있습니다.
+`useSlots` 및 `useAttrs`는 `setupContext.slots` 및 `setupContext.attrs`에 해당하는 항목을 반환하는 실제 런타임 함수입니다. 일반 컴포지션 API 함수에서도 사용할 수 있습니다.
 
 ## 일반 `<script>`와 함께 사용 {#usage-alongside-normal-script}
 
-`<script setup>`은 일반 `<script>`와 함께 사용할 수 있습니다.
-다음을 수행해야 하는 경우 일반 `<script>`가 필요할 수 있습니다:
+`<script setup>`은 일반 `<script>`와 함께 사용할 수 있습니다. 다음을 수행해야 하는 경우 일반 `<script>`가 필요할 수 있습니다:
 
-- `<script setup>`에서 표현할 수 없는 옵션을 선언하는 경우.
-  예를 들어 `inheritAttrs` 또는 플러그인을 통해 활성화된 커스텀 옵션이 있는 경우 (3.3 이상에서 [`defineOptions`](/api/sfc-script-setup#defineoptions)로 대체 가능).
+- `<script setup>`에서 표현할 수 없는 옵션을 선언하는 경우. 예를 들어 `inheritAttrs` 또는 플러그인을 통해 활성화된 커스텀 옵션이 있는 경우 (3.3 이상에서 [`defineOptions`](/api/sfc-script-setup#defineoptions)로 대체 가능).
 - 명명된 `export`를 선언하는 경우.
 - 사이드 이펙트를 실행하거나 한 번만 실행되어야 하는 객체를 만드는 경우.
 
@@ -378,8 +406,7 @@ export default {
 
 ## 최상위 `await` {#top-level-await}
 
-최상위 `await`는 `<script setup>` 내에서 사용할 수 있습니다.
-결과 코드는 `async setup()`으로 컴파일됩니다:
+최상위 `await`는 `<script setup>` 내에서 사용할 수 있습니다. 결과 코드는 `async setup()`으로 컴파일됩니다:
 
 ```vue
 <script setup>
@@ -390,14 +417,12 @@ const post = await fetch(`/api/post/1`).then((r) => r.json())
 또한 이러한 표현식은 `await` 이후의 현재 컴포넌트 인스턴스 컨텍스트를 유지하는 형식으로 자동 컴파일됩니다.
 
 :::warning 참고
-`async setup()`은 현재 실험적인 기능인 `Suspense`와 함께 사용해야 합니다.
-향후 릴리스에서 이를 마무리하고 문서화할 계획입니다.
-하지만 지금 궁금한 점은 [테스트](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts)를 참고하여 작동 방식을 확인할 수 있습니다.
+`async setup()`은 현재 실험적인 기능인 `Suspense`와 함께 사용해야 합니다. 향후 릴리스에서 이를 마무리하고 문서화할 계획입니다. 하지만 지금 궁금한 점은 [테스트](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts)를 참고하여 작동 방식을 확인할 수 있습니다.
 :::
 
 ## Generics <sup class="vt-badge ts" />  {#generics}
 
-Generic type parameters can be declared using the `generic` attribute on the `<script>` tag:
+일반 유형 매개변수는 `<script>` 태그의 `generic` 속성을 사용하여 선언할 수 있습니다:
 
 ```vue
 <script setup lang="ts" generic="T">
@@ -408,7 +433,7 @@ defineProps<{
 </script>
 ```
 
-The value of `generic` works exactly the same as the parameter list between `<...>` in TypeScript. For example, you can use multiple parameters, `extends` constraints, default types, or reference imported types:
+`generic`의 값은 TypeScript의 `<...>` 사이의 매개변수 목록과 정확히 동일하게 작동합니다. 예를 들어, 여러 매개변수, `extends` 제약 조건, 기본 유형을 사용하거나, 가져온 유형을 참조할 수 있습니다:
 
 ```vue
 <script
diff --git a/src/error-reference/ErrorsTable.vue b/src/error-reference/ErrorsTable.vue
new file mode 100644
index 00000000..b278c1a9
--- /dev/null
+++ b/src/error-reference/ErrorsTable.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  kind: string
+  errors: Record<any, string>
+  highlight?: any
+}>()
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Code</th>
+        <th>Message</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(msg, code) of errors"
+        :class="{ highlight: highlight === `${kind}-${code}` }"
+      >
+        <td :id="`${kind}-${code}`" v-text="code" />
+        <td v-text="msg" />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.highlight {
+  color: var(--vt-c-yellow-darker);
+  font-weight: bold;
+}
+</style>
diff --git a/src/error-reference/errors.data.ts b/src/error-reference/errors.data.ts
new file mode 100644
index 00000000..d8044adf
--- /dev/null
+++ b/src/error-reference/errors.data.ts
@@ -0,0 +1,17 @@
+import { defineLoader } from 'vitepress'
+import { errorMessages } from 'vue/compiler-sfc'
+// @ts-expect-error internal api
+import { ErrorTypeStrings } from 'vue'
+
+function filterEmptyMsg(data: Record<number, string>) {
+  return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg))
+}
+
+export default defineLoader({
+  load() {
+    return {
+      compiler: filterEmptyMsg(errorMessages),
+      runtime: filterEmptyMsg(ErrorTypeStrings)
+    }
+  }
+})
diff --git a/src/error-reference/index.md b/src/error-reference/index.md
new file mode 100644
index 00000000..9bae893d
--- /dev/null
+++ b/src/error-reference/index.md
@@ -0,0 +1,30 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { data } from './errors.data.ts'
+import ErrorsTable from './ErrorsTable.vue'
+
+const highlight = ref()
+onMounted(() => {
+  highlight.value = location.hash.slice(1)
+})
+</script>
+
+# Production Error Code Reference {#error-reference}
+
+## Runtime Errors {#runtime-errors}
+
+In production builds, the 3rd argument passed to the following error handler APIs will be a short code instead of the full information string:
+
+- [`app.config.errorHandler`](/api/application#app-config-errorhandler)
+- [`onErrorCaptured`](/api/composition-api-lifecycle#onerrorcaptured) (Composition API)
+- [`errorCaptured`](/api/options-lifecycle#errorcaptured) (Options API)
+
+The following table maps the codes to their original full information strings.
+
+<ErrorsTable kind="runtime" :errors="data.runtime" :highlight="highlight" />
+
+## Compiler Errors {#compiler-errors}
+
+The following table provides a mapping of the production compiler error codes to their original messages.
+
+<ErrorsTable kind="compiler" :errors="data.compiler" :highlight="highlight" />
diff --git a/src/examples/src/list-transition/App/composition.js b/src/examples/src/list-transition/App/composition.js
index be855c2d..a69ab3f7 100644
--- a/src/examples/src/list-transition/App/composition.js
+++ b/src/examples/src/list-transition/App/composition.js
@@ -14,6 +14,7 @@ export default {
 
     function reset() {
       items.value = getInitialItems()
+      id = items.value.length + 1
     }
 
     function shuffle() {
diff --git a/src/examples/src/list-transition/App/options.js b/src/examples/src/list-transition/App/options.js
index 2b09e5d2..bd31bc4d 100644
--- a/src/examples/src/list-transition/App/options.js
+++ b/src/examples/src/list-transition/App/options.js
@@ -16,6 +16,7 @@ export default {
     },
     reset() {
       this.items = getInitialItems()
+      id = getInitialItems().length + 1
     },
     shuffle() {
       this.items = shuffle(this.items)
diff --git a/src/guide/best-practices/accessibility.md b/src/guide/best-practices/accessibility.md
index 62d2e8b6..8b99c24e 100644
--- a/src/guide/best-practices/accessibility.md
+++ b/src/guide/best-practices/accessibility.md
@@ -541,7 +541,7 @@ W3C의 WAI-ARIA는 동적 컨텐츠 및 고급 사용자 인터페이스 제어
   - [ChromeVox](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)
 - 확대/축소 도구
   - [MAGic](https://www.freedomscientific.com/products/software/magic/)
-  - [ZoomText](https://www.zoomtext.com/)
+  - [ZoomText](https://www.freedomscientific.com/products/software/zoomtext/)
   - [Magnifier](https://support.microsoft.com/en-us/help/11542/windows-use-magnifier-to-make-things-easier-to-see)
 
 ### 테스트 {#testing}
diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md
index 38d798d2..da656230 100644
--- a/src/guide/best-practices/performance.md
+++ b/src/guide/best-practices/performance.md
@@ -6,24 +6,15 @@ outline: deep
 
 ## 개요 {#overview}
 
-Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용 사례에 적합하도록 설계되었습니다.
-그러나 추가 미세 조정이 필요한 어려운 시나리오가 항상 있습니다.
-이 섹션에서는 Vue 앱 성능과 관련하여 주의해야 할 사항에 대해 설명합니다.
+Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용 사례에 적합하도록 설계되었습니다. 그러나 추가 미세 조정이 필요한 어려운 시나리오가 항상 있습니다. 이 섹션에서는 Vue 앱 성능과 관련하여 주의해야 할 사항에 대해 설명합니다.
 
 먼저 웹 성능의 두 가지 주요 측면에 대해 논의해 보겠습니다:
 
-- **페이지 로드 성능**:
-  앱이 컨텐츠를 표시하고 초기 방문 시 대화형이 되는 속도.
-  이는 일반적으로 [최대 컨텐츠 풀 페인트(LCP: Largest Contentful Paint)](https://web.dev/lcp/) 및 [최초 입력 지연(FID: First Input Delay)](https://web.dev/fid/)와 같은 웹 필수 측정기들을 사용하여 측정됩니다.
+- **페이지 로드 성능**: 앱이 컨텐츠를 표시하고 초기 방문 시 대화형이 되는 속도. 이는 일반적으로 [최대 컨텐츠 풀 페인트(LCP: Largest Contentful Paint)](https://web.dev/lcp/) 및 [최초 입력 지연(FID: First Input Delay)](https://web.dev/fid/)와 같은 웹 필수 측정기들을 사용하여 측정됩니다.
 
-- **업데이트 성능**:
-  사용자 입력에 대한 응답으로 앱이 업데이트되는 속도.
-  예를 들어 사용자가 검색 상자에 입력할 때 목록이 업데이트되는 속도 또는 사용자가 싱글 페이지 앱(SPA)에서 탐색 링크를 클릭할 때 페이지가 전환되는 속도입니다.
+- **업데이트 성능**: 사용자 입력에 대한 응답으로 앱이 업데이트되는 속도. 예를 들어 사용자가 검색 상자에 입력할 때 목록이 업데이트되는 속도 또는 사용자가 싱글 페이지 앱(SPA)에서 탐색 링크를 클릭할 때 페이지가 전환되는 속도입니다.
 
-두 가지를 모두 최대화하는 것이 이상적이지만,
-서로 다른 프론트엔드 아키텍처는 성능을 얼마나 쉽게 달성할 수 있는지에 영향을 미칩니다.
-또한 성능의 우선순위를 어떻게 지정했냐에 따라 구축하는 앱이 크게 영향을 받습니다.
-따라서 최적의 성능을 보장하는 첫 번째 단계는 구축 중인 앱에 적합한 아키텍처를 선택하는 것입니다.
+두 가지를 모두 최대화하는 것이 이상적이지만, 서로 다른 프론트엔드 아키텍처는 성능을 얼마나 쉽게 달성할 수 있는지에 영향을 미칩니다. 또한 성능의 우선순위를 어떻게 지정했냐에 따라 구축하는 앱이 크게 영향을 받습니다. 따라서 최적의 성능을 보장하는 첫 번째 단계는 구축 중인 앱에 적합한 아키텍처를 선택하는 것입니다.
 
 - Vue를 다양한 방식으로 활용하는 방법을 보려면 [Vue 사용 방법](/guide/extras/ways-of-using-vue)을 참고하세요.
 
@@ -31,8 +22,7 @@ Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용
 
 ## 프로파일링 옵션 (profiling options) {#profiling-options}
 
-성능을 개선하려면 먼저 측정 방법을 알아야 합니다.
-이와 관련하여 도움이 될 수 있는 훌륭한 도구가 많이 있습니다.
+성능을 개선하려면 먼저 측정 방법을 알아야 합니다. 이와 관련하여 도움이 될 수 있는 훌륭한 도구가 많이 있습니다.
 
 프로덕션 배포의 로드 성능 프로파일링:
 
@@ -47,9 +37,7 @@ Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용
 
 ## 페이지 로드 최적화 {#page-load-optimizations}
 
-페이지 로드 성능을 최적화하는 것은 프레임워크에 구애받지 않는 경우가 많습니다.
-포괄적인 정리 내용은 [web.dev 가이드](https://web.dev/fast/)를 확인하세요.
-여기서는 주로 Vue에 특화된 기술에 초점을 맞출 것입니다.
+페이지 로드 성능을 최적화하는 것은 프레임워크에 구애받지 않는 경우가 많습니다. 포괄적인 정리 내용은 [web.dev 가이드](https://web.dev/fast/)를 확인하세요. 여기서는 주로 Vue에 특화된 기술에 초점을 맞출 것입니다.
 
 ### 올바른 아키텍처 선택 {#choosing-the-right-architecture}
 
@@ -57,39 +45,27 @@ Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용
 
 기본 애플리케이션이 SPA여야 하지만 마케팅 페이지(랜딩, 정보, 블로그)가 있는 경우 마케팅 페이지를 별도로 제공하세요! 마케팅 페이지는 SSG를 사용하여 최소한의 JS가 포함된 정적 HTML로 배포하는 것이 이상적입니다.
 
-
 ### 번들 크기 및 트리 쉐이킹 (tree-shaking) {#bundle-size-and-tree-shaking}
 
-페이지 로드 성능을 향상시키는 가장 효과적인 방법 중 하나는 더 작은 JavaScript 번들을 제공하는 것입니다.
-Vue를 사용할 때 번들 크기를 줄이는 몇 가지 방법은 다음과 같습니다:
+페이지 로드 성능을 향상시키는 가장 효과적인 방법 중 하나는 더 작은 JavaScript 번들을 제공하는 것입니다. Vue를 사용할 때 번들 크기를 줄이는 몇 가지 방법은 다음과 같습니다:
 
 - 가능하면 빌드 과정을 사용하십시오.
 
-  - Vue의 많은 API는 최신 빌드 도구를 통해 번들로 제공되는 경우, ["트리 쉐이킹"](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)합니다.
-    예를 들어 내장된 `<Transition>` 컴포넌트를 사용하지 않으면, 최종 프로덕션 번들에 포함되지 않습니다.
-    트리 쉐이킹은 소스 코드에서 사용하지 않는 다른 모듈도 제거할 수 있습니다.
+  - Vue의 많은 API는 최신 빌드 도구를 통해 번들로 제공되는 경우, ["트리 쉐이킹"](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)합니다. 예를 들어 내장된 `<Transition>` 컴포넌트를 사용하지 않으면, 최종 프로덕션 번들에 포함되지 않습니다. 트리 쉐이킹은 소스 코드에서 사용하지 않는 다른 모듈도 제거할 수 있습니다.
 
-  - 빌드 과정을 사용할 때, 템플릿이 미리 컴파일되므로 Vue 컴파일러를 브라우저에 제공할 필요가 없습니다.
-    이것은 **14kb** 만큼을 절약 후 min+gzip으로 압축된 JavaScript로 런타임 컴파일 비용을 방지합니다.
+  - 빌드 과정을 사용할 때, 템플릿이 미리 컴파일되므로 Vue 컴파일러를 브라우저에 제공할 필요가 없습니다. 이것은 **14kb** 만큼을 절약 후 min+gzip으로 압축된 JavaScript로 런타임 컴파일 비용을 방지합니다.
 
-- 새로운 의존성을 도입할 때 크기에 주의하십시오!
-  실제 앱에서 비대해진 번들은 대부분 자신도 모르는 사이에 과도한 의존성을 도입한 결과입니다.
+- 새로운 의존성을 도입할 때 크기에 주의하십시오! 실제 앱에서 비대해진 번들은 대부분 자신도 모르는 사이에 과도한 의존성을 도입한 결과입니다.
 
-  - 빌드 과정을 사용하는 경우, ES 모듈 형식을 제공하고, 트리 쉐이킹 친화적인 의존성을 선호하십시오.
-    예를 들어 `lodash`보다 `lodash-es`를 선호합니다.
+  - 빌드 과정을 사용하는 경우, ES 모듈 형식을 제공하고, 트리 쉐이킹 친화적인 의존성을 선호하십시오. 예를 들어 `lodash`보다 `lodash-es`를 선호합니다.
 
-  - 의존성의 크기를 확인하고 그것이 제공하는 기능의 가치가 있는지 평가하십시오.
-    의존성이 트리 쉐이킹에 친화적이면 실제 크기 증가는 가져오는 API에 따라 달라집니다.
-    [bundlejs.com](https://bundlejs.com/)과 같은 도구를 사용하여 빠르게 확인할 수 있지만, 실제 빌드 설정으로 측정하는 것이 항상 가장 정확합니다.
+  - 의존성의 크기를 확인하고 그것이 제공하는 기능의 가치가 있는지 평가하십시오. 의존성이 트리 쉐이킹에 친화적이면 실제 크기 증가는 가져오는 API에 따라 달라집니다. [bundlejs.com](https://bundlejs.com/)과 같은 도구를 사용하여 빠르게 확인할 수 있지만, 실제 빌드 설정으로 측정하는 것이 항상 가장 정확합니다.
 
 - 주로 빌드 과정 없이 Vue를 사용하고 있다면, [petite-vue](https://github.com/vuejs/petite-vue)(**6kb**)를 사용하는 것이 좋습니다.
 
 ### 코드 분할 {#code-splitting}
 
-코드 분할은 빌드 도구가 앱 번들을 여러 개의 작은 청크로 분할하는 것으로, 로드 또는 요청 시 병렬로 로드할 수 있는 곳입니다.
-적절한 코드 분할을 사용하면 페이지 로드 시,
-필요한 기능을 즉시 다운로드할 수 있으며,
-추가 청크는 필요할 때만 지연 로드되므로 성능이 향상됩니다.
+코드 분할은 빌드 도구가 앱 번들을 여러 개의 작은 청크로 분할하는 것으로, 로드 또는 요청 시 병렬로 로드할 수 있는 곳입니다. 적절한 코드 분할을 사용하면 페이지 로드 시, 필요한 기능을 즉시 다운로드할 수 있으며, 추가 청크는 필요할 때만 지연 로드되므로 성능이 향상됩니다.
 
 Rollup(Vite의 기반) 또는 webpack과 같은 번들러는 ESM 동적 가져오기 문법을 감지하여 자동으로 분할 청크를 생성할 수 있습니다.
 
@@ -107,24 +83,18 @@ function loadLazy() {
 import { defineAsyncComponent } from 'vue'
 
 // Foo.vue 및 해당 의존성에 대해 별도의 청크가 생성됩니다.
-// 비동기 컴포넌트가 페이지에서 렌더링될 때에만 요청하여 가져옵니다.
+// 비동기 컴포넌트가 페이지에서 렌더링될 때에만
+// 요청하여 가져옵니다.
 const Foo = defineAsyncComponent(() => import('./Foo.vue'))
 ```
 
-Vue 라우터를 통해 클라이언트 측 라우팅을 사용하는 경우, 라우트 컴포넌트를 비동기 컴포넌트로 사용하는 것이 좋습니다.
-자세한 내용은 [라우트 지연 로드](https://router.vuejs.kr/guide/advanced/lazy-loading)를 참고하십시오.
-
-### SSR / SSG {#ssr-ssg}
-
 Vue 라우터를 사용하는 애플리케이션의 경우 라우팅 컴포넌트에 지연 로딩을 사용할 것을 강력히 권장합니다. Vue 라우터는 `defineAsyncComponent`와는 별도로 지연 로딩을 명시적으로 지원합니다. 자세한 내용은 [지연 로딩 라우트](https://router.vuejs.org/guide/advanced/lazy-loading)를 참고하세요.
 
-
 ## 업데이트 최적화 {#update-optimizations}
 
 ### Props 안정성 {#props-stability}
 
-Vue에서 자식 컴포넌트는 수신된 props 중 하나 이상이 변경된 경우에만 업데이트됩니다.
-다음 예제를 봅시다:
+Vue에서 자식 컴포넌트는 수신된 props 중 하나 이상이 변경된 경우에만 업데이트됩니다. 다음 예제를 봅시다:
 
 ```vue-html
 <ListItem
@@ -133,11 +103,9 @@ Vue에서 자식 컴포넌트는 수신된 props 중 하나 이상이 변경된
   :active-id="activeId" />
 ```
 
-`<ListItem>` 컴포넌트 내에서 `id` 및 `activeId` prop을 사용하여 현재 활성 아이템인지 여부를 결정합니다.
-이것이 작동하는 동안 문제는 `activeId`가 변경될 때마다 목록의 **모든** `<ListItem>`이 업데이트되어야 한다는 것입니다!
+`<ListItem>` 컴포넌트 내에서 `id` 및 `activeId` prop을 사용하여 현재 활성 아이템인지 여부를 결정합니다. 이것이 작동하는 동안 문제는 `activeId`가 변경될 때마다 목록의 **모든** `<ListItem>`이 업데이트되어야 한다는 것입니다!
 
-이상적으로는 활성 상태가 변경된 아이템만 업데이트되어야 합니다.
-활성 상태 계산을 부모로 이동하고, `<ListItem>`이 `active` prop을 직접 받도록 하여 이를 달성할 수 있습니다:
+이상적으로는 활성 상태가 변경된 아이템만 업데이트되어야 합니다. 활성 상태 계산을 부모로 이동하고, `<ListItem>`이 `active` prop을 직접 받도록 하여 이를 달성할 수 있습니다:
 
 ```vue-html
 <ListItem
@@ -146,19 +114,60 @@ Vue에서 자식 컴포넌트는 수신된 props 중 하나 이상이 변경된
   :active="item.id === activeId" />
 ```
 
-이제 대부분의 컴포넌트에서 `active` prop은 `activeId`가 변경될 때 동일하게 유지되므로, 더 이상 업데이트할 필요가 없습니다.
-이 개념은 일반적으로 자식 컴포넌트에 전달되는 prop을 가능한 한 안정적으로 유지하는 것입니다.
+이제 대부분의 컴포넌트에서 `active` prop은 `activeId`가 변경될 때 동일하게 유지되므로, 더 이상 업데이트할 필요가 없습니다. 이 개념은 일반적으로 자식 컴포넌트에 전달되는 prop을 가능한 한 안정적으로 유지하는 것입니다.
 
 ### `v-once` {#v-once}
 
-`v-once`는 런타임 데이터에 의존하지만, 업데이트할 필요가 없는 컨텐츠를 렌더링하는 데 사용할 수 있는 내장 디렉티브입니다.
-이것을 사용하는 컴포넌트 내 전체 하위 트리는 이후 모든 업데이트를 건너뜁니다.
-자세한 내용은 [API 레퍼런스](/api/built-in-directives.html#v-once)를 참고하세요.
+`v-once`는 런타임 데이터에 의존하지만, 업데이트할 필요가 없는 컨텐츠를 렌더링하는 데 사용할 수 있는 내장 디렉티브입니다. 이것을 사용하는 컴포넌트 내 전체 하위 트리는 이후 모든 업데이트를 건너뜁니다. 자세한 내용은 [API 레퍼런스](/api/built-in-directives.html#v-once)를 참고하세요.
 
 ### `v-memo` {#v-memo}
 
-`v-memo`는 큰 하위 트리 또는 `v-for` 목록의 업데이트를 조건부로 건너뛰는 데 사용할 수 있는 내장 디렉티브입니다.
-자세한 내용은 [API 레퍼런스](/api/built-in-directives.html#v-memo)를 참고하세요.
+`v-memo`는 큰 하위 트리 또는 `v-for` 목록의 업데이트를 조건부로 건너뛰는 데 사용할 수 있는 내장 디렉티브입니다. 자세한 내용은 [API 레퍼런스](/api/built-in-directives.html#v-memo)를 참고하세요.
+
+### 계산된 안정성 <sup class="vt-badge" data-text="3.4+" /> {#computed-stability}
+
+3.4 버전부터, 계산된 속성은 이전과 다른 계산된 값이 나올 때만 효과를 발생시킵니다. 예를 들어, 다음과 같은 `isEven` 계산은 반환된 값이 `true`에서 `false`로, 또는 그 반대로 변경될 때만 효과를 발생시킵니다:
+
+```js
+const count = ref(0)
+const isEven = computed(() => count.value % 2 === 0)
+
+watchEffect(() => console.log(isEven.value)) // true
+
+// 계산된 값이 `true`로 유지되기 때문에 새로운 로그를 발생시키지 않습니다
+count.value = 2
+count.value = 4
+```
+
+이는 불필요한 효과 발생을 줄이지만, 계산된 값이 매번 새로운 객체를 생성하는 경우에는 작동하지 않습니다:
+
+```js
+const computedObj = computed(() => {
+  return {
+    isEven: count.value % 2 === 0
+  }
+})
+```
+
+매번 새로운 객체가 생성되므로, 새로운 값은 기술적으로 항상 이전 값과 다릅니다. `isEven` 속성이 동일하게 유지되더라도 Vue는 오래된 값과 새로운 값을 깊은 비교(deep comparison)를 하지 않는 한 알 수 없습니다. 이러한 비교는 비용이 많이 들고 가치가 없을 수 있습니다.
+
+대신, 새로운 값과 오래된 값을 수동으로 비교하여, 변경되지 않았다는 것을 알고 있을 경우 오래된 값을 반환하도록 최적화할 수 있습니다:
+
+```js
+const computedObj = computed((oldValue) => {
+  const newValue = {
+    isEven: count.value % 2 === 0
+  }
+  if (oldValue && oldValue.isEven === newValue.isEven) {
+    return oldValue
+  }
+  return newValue
+})
+```
+
+[Playground 예제](https://play.vuejs.org/#eNqVVMtu2zAQ/JUFgSZK4UpuczMkow/40AJ9IC3aQ9mDIlG2EokUyKVt1PC/d0lKtoEminMQQC1nZ4c7S+7Yu66L11awGUtNoesOwQi03ZzLuu2URtiBFtUECtV2FkU5gU2OxWpRVaJA2EOlVQuXxHDJJZeFkgYJayVC5hKj6dUxLnzSjZXmV40rZfFrh3Vb/82xVrLH//5DCQNNKPkweNiNVFP+zBsrIJvDjksgGrRahjVAbRZrIWdBVLz2yBfwBrIsg6mD7LncPyryfIVnywupUmz68HOEEqqCI+XFBQzrOKR79MDdx66GCn1jhpQDZx8f0oZ+nBgdRVcH/aMuBt1xZ80qGvGvh/X6nlXwnGpPl6qsLLxTtitzFFTNl0oSN/79AKOCHHQuS5pw4XorbXsr9ImHZN7nHFdx1SilI78MeOJ7Ca+nbvgd+GgomQOv6CNjSQqXaRJuHd03+kHRdg3JoT+A3a7XsfcmpbcWkQS/LZq6uM84C8o5m4fFuOg0CemeOXXX2w2E6ylsgj2gTgeYio/f1l5UEqj+Z3yC7lGuNDlpApswNNTrql7Gd0ZJeqW8TZw5t+tGaMdDXnA2G4acs7xp1OaTj6G2YjLEi5Uo7h+I35mti3H2TQsj9Jp6etjDXC8Fhu3F9y9iS+vDZqtK2xB6ZPNGGNVYpzHA3ltZkuwTnFf70b+1tVz+MIstCmmGQzmh/p56PGf00H4YOfpR7nV8PTxubP8P2GAP9Q==)
+
+항상 오래된 값을 비교하고 반환하기 전에 전체 계산을 수행해야 하므로, 매번 실행될 때 동일한 의존성이 수집될 수 있습니다.
 
 ## 일반적인 최적화 {#general-optimizations}
 
@@ -166,30 +175,21 @@ Vue에서 자식 컴포넌트는 수신된 props 중 하나 이상이 변경된
 
 ### 대규모 목록 가상화 {#virtualize-large-lists}
 
-모든 프론트엔드 앱에서 가장 일반적인 성능 문제 중 하나는, 큰 목록을 렌더링하는 것입니다.
-프레임워크의 성능이 아무리 뛰어나더라도 수천 개의 아이템이 포함된 목록을 렌더링하는 것은 **브라우저가 처리해야 하는 DOM 노드의 수 때문에 느려질 것**입니다.
+모든 프론트엔드 앱에서 가장 일반적인 성능 문제 중 하나는, 큰 목록을 렌더링하는 것입니다. 프레임워크의 성능이 아무리 뛰어나더라도 수천 개의 아이템이 포함된 목록을 렌더링하는 것은 **브라우저가 처리해야 하는 DOM 노드의 수 때문에 느려질 것**입니다.
 
-그러나 모든 노드를 미리 렌더링할 필요는 없습니다.
-대부분의 경우, 사용자의 화면 크기는 큰 목록의 작은 하위 집합만 표시할 수 있습니다.
-큰 목록에서 현재 표시 영역에 있거나 가까운 아이템만 렌더링하는 기술인 **목록 가상화**로 성능을 크게 향상할 수 있습니다.
+그러나 모든 노드를 미리 렌더링할 필요는 없습니다. 대부분의 경우, 사용자의 화면 크기는 큰 목록의 작은 하위 집합만 표시할 수 있습니다. 큰 목록에서 현재 표시 영역에 있거나 가까운 아이템만 렌더링하는 기술인 **목록 가상화**로 성능을 크게 향상할 수 있습니다.
 
-목록 가상화를 구현하는 것은 쉽지 않습니다.
-다행히 직접 사용할 수 있는 기존 커뮤니티 라이브러리가 있습니다:
+목록 가상화를 구현하는 것은 쉽지 않습니다. 다행히 직접 사용할 수 있는 기존 커뮤니티 라이브러리가 있습니다:
 
 - [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)
 - [vue-virtual-scroll-grid](https://github.com/rocwang/vue-virtual-scroll-grid)
+- [vueuc/VVirtualList](https://github.com/07akioni/vueuc)
 
 ### 큰 불변 구조에 대한 반응성 오버헤드 감소 {#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는 루트 수준에서만 반응하는 상태를 생성하고, 모든 중첩된 객체를 그대로 노출합니다.
-이렇게 하면 중첩된 속성에 빠르게 접근할 수 있으며, 모든 중첩된 객체는 변경할 수 없는 것처럼 처리해야 하고, 루트 상태를 교체해야만 업데이트가 트리거될 수 있습니다:
+Vue는 [`shallowRef()`](/api/reactivity-advanced.html#shallowref) 및 [`shallowReactive()`](/api/reactivity-advanced.html#shallowreactive)를 사용하여, 깊은 반응형을 opt-out하는 탈출구를 제공합니다. 얕은 API는 루트 수준에서만 반응하는 상태를 생성하고, 모든 중첩된 객체를 그대로 노출합니다. 이렇게 하면 중첩된 속성에 빠르게 접근할 수 있으며, 모든 중첩된 객체는 변경할 수 없는 것처럼 처리해야 하고, 루트 상태를 교체해야만 업데이트가 트리거될 수 있습니다:
 
 ```js
 const shallowArray = shallowRef([
@@ -217,10 +217,4 @@ shallowArray.value = [
 
 때때로 더 나은 추상화 또는 코드 구성을 위해 [렌더링 없는 컴포넌트](/guide/components/slots.html#renderless-components) 또는 상위 컴포넌트(즉, 추가 프로퍼티가 있는 다른 컴포넌트를 렌더링하는 컴포넌트)를 만들 수 있습니다. 이것이 잘못된 것은 아니지만 컴포넌트 인스턴스는 일반 DOM 노드보다 훨씬 비싸고 추상화 패턴으로 인해 너무 많이 생성하면 성능 비용이 발생할 수 있다는 점을 명심하세요.
 
-몇 개의 인스턴스만 줄이는 것은 눈에 띄는 효과가 없으므로,
-컴포넌트가 앱에서 몇 번만 렌더링되는 경우,
-이것을 불필요하게 추상화하지 않아도 됩니다.
-이 최적화를 고려하는 가장 좋은 시나리오는 "**큰 목록**"입니다.
-100개의 아이템 목록이 있고, 각 아이템 컴포넌트에 많은 하위 컴포넌트가 포함되어 있다고 상상해 보십시오.
-여기서 불필요한 컴포넌트 추상화 하나를 제거하면,
-수백 개의 컴포넌트 인스턴스가 줄어들 수 있습니다.
+몇 개의 인스턴스만 줄이는 것은 눈에 띄는 효과가 없으므로, 컴포넌트가 앱에서 몇 번만 렌더링되는 경우, 이것을 불필요하게 추상화하지 않아도 됩니다. 이 최적화를 고려하는 가장 좋은 시나리오는 "**큰 목록**"입니다. 100개의 아이템 목록이 있고, 각 아이템 컴포넌트에 많은 하위 컴포넌트가 포함되어 있다고 상상해 보십시오. 여기서 불필요한 컴포넌트 추상화 하나를 제거하면, 수백 개의 컴포넌트 인스턴스가 줄어들 수 있습니다.
diff --git a/src/guide/components/events.md b/src/guide/components/events.md
index 3046a883..487e7d2e 100644
--- a/src/guide/components/events.md
+++ b/src/guide/components/events.md
@@ -317,15 +317,3 @@ export default {
 ```
 
 </div>
-
-## 이벤트를 속성으로 {#events-props}
-
-또한, 대문자로 된 이벤트 이름 앞에 `on`을 접두사로 붙여 `events`를 `props`으로 선언하고 전달할 수 있습니다.
-
-`props.onEvent`를 사용하는 것은 `emit('event')`를 사용하는 것과 다른 동작을 가지며, 전자는 속성 기반 리스너(`@event` 또는 `:on-event`)만을 처리합니다.
-
-:::warning
-`:onEvent`와 `@event` 둘 다 전달될 경우 `props.onEvent`는 `함수` 대신 `함수의 배열`이 될 수 있으며, 이 동작은 안정적이지 않고 미래에 변경될 수 있습니다.
-:::
-
-이 때문에, 이벤트를 방출할 때 `props.onEvent` 대신 `emit('event')`를 사용하는 것이 권장됩니다.
diff --git a/src/guide/components/props.md b/src/guide/components/props.md
index 41ea1415..44f56f08 100644
--- a/src/guide/components/props.md
+++ b/src/guide/components/props.md
@@ -1,7 +1,10 @@
 # Props {#props}
 
-> 이 페이지에서는 [컴포넌트 기초](/guide/essentials/component-basics)를 이미 읽었다고 가정합니다.
-컴포넌트를 처음 사용하는 경우, 그 문서를 먼저 읽으십시오.
+> 이 페이지에서는 [컴포넌트 기초](/guide/essentials/component-basics)를 이미 읽었다고 가정합니다. 컴포넌트를 처음 사용하는 경우, 그 문서를 먼저 읽으십시오.
+
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-3-reusable-components-with-props" title="Free Vue.js Props Lesson"/>
+</div>
 
 ## Props 선언 {#props-declaration}
 
@@ -31,8 +34,7 @@ export default {
 }
 ```
 
-`defineProps()`에 전달하는 인자는 `props` 옵션에 제공하는 값과 동일합니다.
-두 선언 스타일은 동일한 props 옵션을 사용합니다.
+`defineProps()`에 전달하는 인자는 `props` 옵션에 제공하는 값과 동일합니다. 두 선언 스타일은 동일한 props 옵션을 사용합니다.
 
 </div>
 
@@ -90,8 +92,7 @@ export default {
 
 객체 선언 문법의 각 객체 속성의 키는 props의 이름이 되며, 객체 속성의 값은 값이 될 데이터의 타입에 해당하는 생성자 함수(`Number`, `String`같은)여야 합니다.
 
-타입을 지정하는 것은 컴포넌트를 가독성이 좋게 문서화하는데 도움이 되며, 컴포넌트를 사용하는 다른 개발자가 잘못된 유형을 전달할 때에 브라우저 콘솔에 경고를 출력합니다.
-[prop 유효성 검사](#prop-validation)에 대한 자세한 내용은 이 페이지 아래에서 더 자세히 설명하겠습니다.
+타입을 지정하는 것은 컴포넌트를 가독성이 좋게 문서화하는데 도움이 되며, 컴포넌트를 사용하는 다른 개발자가 잘못된 유형을 전달할 때에 브라우저 콘솔에 경고를 출력합니다. [prop 유효성 검사](#prop-validation)에 대한 자세한 내용은 이 페이지 아래에서 더 자세히 설명하겠습니다.
 
 <div class="options-api">
 
@@ -120,8 +121,7 @@ defineProps<{
 
 ### Props 이름 케이싱 {#prop-name-casing}
 
-긴 속성명을 선언할 때 `obj['kebab-case']`와 같이 키에 따옴표를 사용하는 번거로움을 줄이기 위해, `obj.camelCase`와 같이 camelCase를 사용합니다.
-이렇게 선언된 속성명은 유효한 JavaScript 식별자이므로 템플릿 표현식에서 바로 참조해서 사용 할 수 있습니다:
+긴 속성명을 선언할 때 `obj['kebab-case']`와 같이 키에 따옴표를 사용하는 번거로움을 줄이기 위해, `obj.camelCase`와 같이 camelCase를 사용합니다. 이렇게 선언된 속성명은 유효한 JavaScript 식별자이므로 템플릿 표현식에서 바로 참조해서 사용 할 수 있습니다:
 
 <div class="composition-api">
 
@@ -148,15 +148,13 @@ export default {
 <span>{{ greetingMessage }}</span>
 ```
 
-기술적으로 props를 자식 컴포넌트에 전달할 때 camelCase를 사용할 수도 있습니다([in-DOM 템플릿](/guide/essentials/component-basics.html#in-dom-template-parsing-caveats) 제외).
-그러나 camelCase로 선언된 props 속성일지라도 관례적으로 HTML 속성 표기법과 동일하게 kebab-case로 표기해서 사용하도록 해야 합니다:
+기술적으로 props를 자식 컴포넌트에 전달할 때 camelCase를 사용할 수도 있습니다([in-DOM 템플릿](/guide/essentials/component-basics.html#in-dom-template-parsing-caveats) 제외). 그러나 camelCase로 선언된 props 속성일지라도 관례적으로 HTML 속성 표기법과 동일하게 kebab-case로 표기해서 사용하도록 해야 합니다:
 
 ```vue-html
 <MyComponent greeting-message="안녕!" />
 ```
 
-기본 엘리먼트와 Vue 컴포넌트를 쉽게 구별하여 템플릿 가독성을 향상하기 위해 되도록 컴포넌트는 [PascalCase](/guide/components/registration.html#component-name-casing)를 사용합니다.
-그러나 props를 전달할 때 camelCase를 사용하면 실질적인 이점이 많지 않으므로 각 언어의 규칙을 따르기로 했습니다.
+기본 엘리먼트와 Vue 컴포넌트를 쉽게 구별하여 템플릿 가독성을 향상하기 위해 되도록 컴포넌트는 [PascalCase](/guide/components/registration.html#component-name-casing)를 사용합니다. 그러나 props를 전달할 때 camelCase를 사용하면 실질적인 이점이 많지 않으므로 각 언어의 규칙을 따르기로 했습니다.
 
 ### 정적 vs. 동적 Props {#static-vs-dynamic-props}
 
@@ -234,8 +232,7 @@ export default {
 
 ### 객체로 여러 속성 바인딩하기 {#binding-multiple-properties-using-an-object}
 
-객체의 모든 속성을 props로 전달하려면 [인자 없이 `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes)를 사용할 수 있습니다.
-예를 들어, `post` 객체가 주어지면:
+객체의 모든 속성을 props로 전달하려면 [인자 없이 `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes)를 사용할 수 있습니다. 예를 들어, `post` 객체가 주어지면:
 
 <div class="options-api">
 
@@ -278,21 +275,16 @@ const post = {
 
 ## 단방향 데이터 흐름 {#one-way-data-flow}
 
-모든 props는 자식 속성과 부모 속성 사이에 **하향식 단방향 바인딩**을 형성합니다.
-부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됩니다.
-이렇게 하면 자식 컴포넌트가 실수로 부모의 상태를 변경하여 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.
+모든 props는 자식 속성과 부모 속성 사이에 **하향식 단방향 바인딩**을 형성합니다. 부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됩니다. 이렇게 하면 자식 컴포넌트가 실수로 부모의 상태를 변경하여 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.
 
-또한 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트 됩니다.
-따라서 자식 컴포넌트 내부에서 props를 변경하려 하면 **안 됩니다**.
-그렇지 않을 경우, Vue는 콘솔에서 다음과 같이 경고합니다.
+또한 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트 됩니다. 따라서 자식 컴포넌트 내부에서 props를 변경하려 하면 **안 됩니다**. 그렇지 않을 경우, Vue는 콘솔에서 다음과 같이 경고합니다.
 
 <div class="composition-api">
 
 ```js
 const props = defineProps(['foo'])
 
-// ❌ warning, props are readonly!
-//   (경고, props는 읽기 전용입니다!)
+// ❌ 경고, props는 읽기 전용입니다!
 props.foo = 'bar'
 ```
 
@@ -303,8 +295,7 @@ props.foo = 'bar'
 export default {
   props: ['foo'],
   created() {
-    // ❌ warning, props are readonly!
-    //   (경고, props는 읽기 전용입니다!)
+    // ❌ 경고, props는 읽기 전용입니다!
     this.foo = 'bar'
   }
 }
@@ -314,8 +305,7 @@ export default {
 
 일반적으로 prop을 변경하고 싶은 두 가지 경우가 있습니다:
 
-1. **prop은 초기 값을 전달하는 데 사용되며, 자식 컴포넌트는 나중에 이를 로컬 데이터 속성으로 사용하려고 합니다.**
-이 경우 prop을 초기 값으로 사용하는 로컬 데이터 속성을 정의하는 것이 가장 좋습니다:
+1. **prop은 초기 값을 전달하는 데 사용되며, 자식 컴포넌트는 나중에 이를 로컬 데이터 속성으로 사용하려고 합니다.** 이 경우 prop을 초기 값으로 사용하는 로컬 데이터 속성을 정의하는 것이 가장 좋습니다:
 
    <div class="composition-api">
 
@@ -375,23 +365,15 @@ export default {
 
 ### 객체/배열 props 변경에 관하여 {#mutating-object-array-props}
 
-객체와 배열이 props로 전달되면, 자식 컴포넌트는 바인딩된 prop을 변경할 수는 없지만, **객체 또는 배열의 중첩 속성을 변경할 수는 있습니다.**
-이것은 JavaScript에서 객체와 배열이 참조로 전달되고, Vue가 이런 변경까지 방지하는 것은 너무 큰 비용이 들기 때문에 수행 하지 않습니다.
+객체와 배열이 props로 전달되면, 자식 컴포넌트는 바인딩된 prop을 변경할 수는 없지만, **객체 또는 배열의 중첩 속성을 변경할 수는 있습니다.** 이것은 JavaScript에서 객체와 배열이 참조로 전달되고, Vue가 이런 변경까지 방지하는 것은 너무 큰 비용이 들기 때문에 수행 하지 않습니다.
 
-이러한 구현의 주요 단점은 자식 컴포넌트가 명확하지 않은 방식으로 부모 컴포넌트의 상태에 영향을 미쳐 잠재적으로 향후 데이터 흐름에 대한 추론을 어렵게 만든다는 것입니다.
-가장 좋은 방법은 부모와 자식이 의도적으로 밀접하게 연결되어 있지 않는 한 이러한 변경을 피하는 것이며,
-필요 시 자식은 부모가 변경을 수행할 수 있도록 [emit 이벤트](/guide/components/events)를 호출하는 방식으로 구현해야 합니다.
+이러한 구현의 주요 단점은 자식 컴포넌트가 명확하지 않은 방식으로 부모 컴포넌트의 상태에 영향을 미쳐 잠재적으로 향후 데이터 흐름에 대한 추론을 어렵게 만든다는 것입니다. 가장 좋은 방법은 부모와 자식이 의도적으로 밀접하게 연결되어 있지 않는 한 이러한 변경을 피하는 것이며, 필요 시 자식은 부모가 변경을 수행할 수 있도록 [emit 이벤트](/guide/components/events)를 호출하는 방식으로 구현해야 합니다.
 
 ## Prop 유효성 검사 {#prop-validation}
 
-앞서 봤던 것처럼 컴포넌트는 props에 타입을 지정할 수 있습니다.
-지정한 요구 사항이 충족되지 않으면 Vue는 브라우저의 JavaScript 콘솔에서 경고합니다.
-이것은 다른 사람들이 사용하도록 컴포넌트를 개발할 때 특히 유용합니다.
+앞서 봤던 것처럼 컴포넌트는 props에 타입을 지정할 수 있습니다. 지정한 요구 사항이 충족되지 않으면 Vue는 브라우저의 JavaScript 콘솔에서 경고합니다. 이것은 다른 사람들이 사용하도록 컴포넌트를 개발할 때 특히 유용합니다.
 
-Props에 유효성 검사를 지정하려면,
-<span class="composition-api">`defineProps()` 매크로에</span><span class="options-api">`props` 옵션에</span> 문자열로 구성된 배열 대신,
-유효성 검사 요구 사항이 있는 객체를 제공하면 됩니다.
-예를 들어:
+Props에 유효성 검사를 지정하려면, <span class="composition-api">`defineProps()` 매크로에</span><span class="options-api">`props` 옵션에</span> 문자열로 구성된 배열 대신, 유효성 검사 요구 사항이 있는 객체를 제공하면 됩니다. 예를 들어:
 
 <div class="composition-api">
 
@@ -423,8 +405,9 @@ defineProps({
     }
   },
   // 사용자 정의 유효성 검사 함수
+  // 3.4+ 부터는 모든 props가 두 번째 인수로 전달 됨
   propF: {
-    validator(value) {
+    validator(value, props) {
       // 값은 다음 문자열 중 하나와 일치해야 합니다.
       return ['성공', '경고', '위험'].includes(value)
     }
@@ -442,8 +425,7 @@ defineProps({
 ```
 
 :::tip
-`defineProps()` 인자 내부의 코드는 **`<script setup>`에서 선언된 다른 변수에 접근할 수 없습니다**.
-컴파일할 때 전체 표현식이 외부 함수 범위로 이동되기 때문입니다.
+`defineProps()` 인자 내부의 코드는 **`<script setup>`에서 선언된 다른 변수에 접근할 수 없습니다**. 컴파일할 때 전체 표현식이 외부 함수 범위로 이동되기 때문입니다.
 :::
 
 </div>
@@ -478,8 +460,9 @@ export default {
       }
     },
     // 사용자 정의 유효성 검사 함수
+    // 3.4+ 부터는 모든 props가 두 번째 인수로 전달 됨
     propF: {
-      validator(value) {
+      validator(value, props) {
         // 값은 다음 문자열 중 하나와 일치해야 합니다.
         return ['성공', '경고', '위험'].includes(value)
       }
@@ -505,8 +488,7 @@ export default {
 
 - prop의 타입이 `Boolean`이 아니고 선택사항인 경우, 누락되면 `undefined` 값을 가집니다.
 
-- prop의 타입이 `Boolean`이고 누락된 경우, `false`가 기본값이 됩니다.
-의도에 따라서 `default` 값 정의가 필요할 수 있습니다.
+- prop의 타입이 `Boolean`이고 누락된 경우, `false`가 기본값이 됩니다. 의도에 따라서 `default` 값 정의가 필요할 수 있습니다.
 
 - prop이 누락되었거나 명시적으로 선언된 값이 `undefined`이고 `default` 값이 정의되어 있다면, `default` 값이 사용됩니다.
 
@@ -514,8 +496,7 @@ prop 유효성 검사에 실패하면 Vue는 콘솔에 경고를 출력합니다
 
 <div class="composition-api">
 
-[타입 기반 props 선언](/api/sfc-script-setup#type-only-props-emit-declarations) <sup class="vt-badge ts" /> 시, Vue는 타입 문법을 적절한 prop 선언으로 컴파일하기 위해 최선을 다할 것입니다.
-예를 들어 `defineProps<{ msg: string }>`는 `{ msg: { type: String, required: true }}`로 컴파일됩니다.
+[타입 기반 props 선언](/api/sfc-script-setup#type-only-props-emit-declarations) <sup class="vt-badge ts" /> 시, Vue는 타입 문법을 적절한 prop 선언으로 컴파일하기 위해 최선을 다할 것입니다. 예를 들어 `defineProps<{ msg: string }>`는 `{ msg: { type: String, required: true }}`로 컴파일됩니다.
 
 </div>
 <div class="options-api">
@@ -539,8 +520,7 @@ props는 컴포넌트 **인스턴스가 생성되기 전**에 유효성 검사
 - `Function`
 - `Symbol`
 
-또한 `type`은 사용자 정의 클래스 또는 생성자 함수일 수도 있으며, `instanceof`를 사용하여 검사를 실시합니다.
-예를 들어, 다음 클래스가 주어졌을 때:
+또한 `type`은 사용자 정의 클래스 또는 생성자 함수일 수도 있으며, `instanceof`를 사용하여 검사를 실시합니다. 예를 들어, 다음 클래스가 주어졌을 때:
 
 ```js
 class Person {
@@ -578,8 +558,7 @@ Vue는 ``instanceof Person`를 사용하여 `author` prop의 값이 실제로 `P
 
 ## 불리언 캐스팅 {#boolean-casting}
 
-`Boolean` 타입의 props는 네이티브 불리언 속성의 동작을 모방하는 특별한 캐스팅 규칙이 있습니다.
-다음 선언과 함께 `<MyComponent>`가 제공됩니다:
+`Boolean` 타입의 props는 네이티브 불리언 속성의 동작을 모방하는 특별한 캐스팅 규칙이 있습니다. 다음 선언과 함께 `<MyComponent>`가 제공됩니다:
 
 <div class="composition-api">
 
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index 6e4525a9..b8600bc2 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -1,8 +1,93 @@
 # Component v-model {#component-v-model}
 
+## 기본 사용법 {#basic-usage}
 
 `v-model`을 컴포넌트에서 사용하여 양방향 바인딩을 구현할 수 있습니다.
 
+<div class="composition-api">
+
+Vue 3.4부터는 [`defineModel()`](/api/sfc-script-setup#definemodel) 매크로를 사용하는 것이 권장되는 접근 방식입니다:
+
+```vue
+<!-- Child.vue -->
+<script setup>
+const model = defineModel()
+
+function update() {
+  model.value++
+}
+</script>
+
+<template>
+  <div>부모 바인딩 v-model은: {{ model }}</div>
+</template>
+```
+
+부모는 `v-model`을 사용하여 값을 바인딩할 수 있습니다:
+
+```vue-html
+<!-- Parent.vue -->
+<Child v-model="count" />
+```
+
+`defineModel()`에 의해 반환되는 값은 ref입니다. 다른 ref처럼 접근하고 변경할 수 있지만, 부모 값과 로컬 값 사이의 양방향 바인딩으로 작동합니다:
+
+- `.value`는 부모 `v-model`에 의해 바인딩된 값과 동기화됩니다;
+- 자식에 의해 변경되면 부모 바인딩 값도 업데이트됩니다.
+
+따라서 이 ref를 네이티브 입력 엘리먼트의 `v-model`에 바인딩할 수도 있어, 네이티브 입력 엘리먼트를 래핑하면서 동일한 `v-model` 사용을 제공하는 것이 간단해집니다:
+
+```vue
+<script setup>
+const model = defineModel()
+</script>
+
+<template>
+  <input v-model="model" />
+</template>
+```
+
+[Try it in the Playground](https://play.vuejs.org/#eNqFUtFKwzAU/ZWYl06YLbK30Q10DFSYigq+5KW0t11mmoQknZPSf/cm3eqEsT0l555zuefmpKV3WsfbBuiUpjY3XDtiwTV6ziSvtTKOLNZcFKQ0qiZRnATkG6JB0BIDJen2kp5iMlfSOlLbisw8P4oeQAhFPpURxVV0zWSa9PNwEgIHtRaZA0SEpOvbeduG5q5LE0Sh2jvZ3tSqADFjFHlGSYJkmhz10zF1FseXvIo3VklcrfX9jOaq1lyAedGOoz1GpyQwnsvQ3fdTqDnTwPhQz9eQf52ob+zO1xh9NWDBbIHRgXOZqcD19PL9GXZ4H0h03whUnyHfwCrReI+97L6RBdo+0gW3j+H9uaw+7HLnQNrDUt6oV3ZBzyhmsjiz+p/dSTwJfUx2+IpD1ic+xz5enwQGXEDJJaw8Gl2I1upMzlc/hEvdOBR6SNKAjqP1J6P/o6XdL11L5h4=)
+
+### 내부 구조 {#under-the-hood}
+
+`defineModel`은 편의성을 위한 매크로입니다. 컴파일러는 다음과 같이 확장합니다:
+
+- 로컬 ref의 값과 동기화되는 `modelValue`라는 이름의 prop;
+- 로컬 ref의 값이 변경될 때 발생하는 `update:modelValue`라는 이벤트.
+
+3.4 이전에 위와 같은 자식 컴포넌트를 구현하는 방법은 다음과 같습니다:
+
+```vue
+<script setup>
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <input
+    :value="props.modelValue"
+    @input="emit('update:modelValue', $event.target.value)"
+  />
+</template>
+```
+
+보시다시피, 이것은 훨씬 더 장황합니다. 하지만 내부에서 무슨 일이 일어나는지 이해하는 것이 도움이 됩니다.
+
+`defineModel`은 prop을 선언하므로, `defineModel`에 전달함으로써 기본 prop의 옵션을 선언할 수 있습니다:
+
+```js
+// v-model을 필수로 만들기
+const model = defineModel({ required: true })
+
+// 기본값 제공
+const model = defineModel({ default: 0 })
+```
+
+</div>
+
+<div class="options-api">
+
 먼저 네이티브 엘리먼트에서 v-model이 어떻게 사용되는지 다시 살펴봅시다:
 
 ```vue-html
@@ -34,8 +119,6 @@
 
 실제로 작동하는 모습은 다음과 같습니다:
 
-<div class="options-api">
-
 ```vue
 <!-- CustomInput.vue -->
 <script>
@@ -53,47 +136,16 @@ export default {
 </template>
 ```
 
-</div>
-<div class="composition-api">
-
-```vue
-<!-- CustomInput.vue -->
-<script setup>
-defineProps(['modelValue'])
-defineEmits(['update:modelValue'])
-</script>
-
-<template>
-  <input
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
-  />
-</template>
-```
-
-</div>
-
 이제 `v-model`이 이 컴포넌트와 완벽하게 작동합니다:
 
 ```vue-html
 <CustomInput v-model="searchText" />
 ```
 
-<div class="options-api">
-
 [Try it in the Playground](https://play.vuejs.org/#eNqFkctqwzAQRX9lEAEn4Np744aWrvoD3URdiHiSGvRCHpmC8b93JDfGKYGCkJjXvTrSJF69r8aIohHtcA69p6O0vfEuELzFgZx5tz4SXIIzUFT1JpfGCmmlxe/c3uFFRU0wSQtwdqxh0dLQwHSnNJep3ilS+8PSCxCQYrC3CMDgMKgrNlB8odaOXVJ2TgdvvNp6vSwHhMZrRcgRQLs1G5+M61A/S/ErKQXUR5immwXMWW1VEKX4g3j3Mo9QfXCeKU9FtvpQmp/lM0Oi6RP/qYieebHZNvyL0acLLODNmGYSxCogxVJ6yW1c2iWz/QOnEnY48kdUpMIVGSllD8t8zVZb+PkHqPG4iw==)
 
-</div>
-<div class="composition-api">
-
-[Try it in the Playground](https://play.vuejs.org/#eNp9j81qwzAQhF9lEQE7kNp344SW0kNvPfVS9WDidSrQH9LKF+N37yoOxoSQm7QzO9/sJN68r8aEohFtPAflCSJS8idplfEuEEwQcIAZhuAMFGwtVuk9RXLm0/pEN7mqN7Ocy2YAac/ORgKDMXYXhGOOLIs/1NoVe2nbekEzlD+ExuuOkH8A7ZYxvhjXoz5KcUuSAuoTTNOaPM85bU0QB3HX58GdPQ7K4ldwPpY/xZXw3Wmu/svVFvHDKMpi8j3HNneeZ/VVBucXQDPmjVx+XZdikV6vNpZ2yKTyAecAOxzRUkVduCCfkqf7Zb9m1Pbo+R9ZkqZn)
-
-</div>
-
 이 컴포넌트 내에서 `v-model`을 구현하는 또 다른 방법은 getter와 setter가 모두 있는 쓰기 가능한 `computed` 프로퍼티를 사용하는 것입니다. `get` 메서드는 `modelValue` 프로퍼티를 반환하고 `set` 메서드는 해당 이벤트를 발생시켜야 합니다:
 
-<div class="options-api">
-
 ```vue
 <!-- CustomInput.vue -->
 <script>
@@ -119,44 +171,40 @@ export default {
 ```
 
 </div>
+
+## `v-model` 인수 {#v-model-arguments}
+
+`v-model`은 컴포넌트에서 인수를 받을 수도 있습니다:
+
+```vue-html
+<MyComponent v-model:title="bookTitle" />
+```
+
 <div class="composition-api">
 
+자식 컴포넌트에서는 `defineModel()`의 첫 번째 인수로 문자열을 전달하여 해당 인수를 지원할 수 있습니다:
+
 ```vue
-<!-- CustomInput.vue -->
+<!-- MyComponent.vue -->
 <script setup>
-import { computed } from 'vue'
-
-const props = defineProps(['modelValue'])
-const emit = defineEmits(['update:modelValue'])
-
-const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  }
-})
+const title = defineModel('title')
 </script>
 
 <template>
-  <input v-model="value" />
+  <input type="text" v-model="title" />
 </template>
 ```
 
-</div>
-
-## `v-model` arguments {#v-model-arguments}
+[Try it in the Playground](https://play.vuejs.org/#eNqFkl9PwjAUxb9K05dhglsMb2SQqOFBE9Soj31Zxh0Uu7bpHxxZ9t29LWOiQXzaes7p2a+9a+mt1unOA53S3JaGa0csOK/nTPJaK+NISwxUpCOVUTVJMJoM1nJ/r/BNgnS9nWYnWujFMCFMlkpaRxx3AsgsFI6S3XWtViBIYda+Dg3QFLUWkFwxmWcHFqTAhQPUCwe4IiTf3Mzbtq/qujzDddRPYfruaUzNGI1PRkmG0Twb+uiY/sI9cw0/0VdQcQnL0D5KovgfL5fa4/69jiDQOOTo+S6SOYtfrvg63VolkauNN0lLxOUCzLN2HMkYnZLoBK8QQn0+Rs0ZD+OjXm6g/Dijb20TNEZfDFgwOwQZPIdzAWQN9uLtKXIPJtL7gH3BfAWrhA+Mh9idlyvEPslF2of4J3G5freLxoG0x0MF0JDsYp5RHE6Y1F9H/8adpJO4j8mOdl/Hw/nf)
 
-기본적으로 컴포넌트의 `v-model`은 `modelValue`를 프로퍼티로, `update:modelValue`를 이벤트로 사용합니다. `v-model`에 인자를 전달하여 이러한 이름을 수정할 수 있습니다:
+prop 옵션이 필요한 경우, 모델 이름 뒤에 전달해야 합니다:
 
-```vue-html
-<MyComponent v-model:title="bookTitle" />
+```js
+const title = defineModel('title', { required: true })
 ```
 
-이 경우 자식 컴포넌트는 `title` 프로퍼티를 예상하고 부모 값을 업데이트하는 `update:title` 이벤트를 발생시켜야 합니다:
-
-<div class="composition-api">
+<details>
+<summary>Pre 3.4 Usage</summary>
 
 ```vue
 <!-- MyComponent.vue -->
@@ -176,9 +224,12 @@ defineEmits(['update:title'])
 
 [Try it in the Playground](https://play.vuejs.org/#eNp9UE1rwzAM/SvCFNJC17BrSMvG2HGw+7xDaJTNEH/gyKEl5L9PtkPJytjJ1tPT03uaxLNzhzGgqEQ9nL1yBANScCdplHbWE0zgsYMZOm81FEwtbq2364vln0FDS/tQrrCoy2RpztYMBKSoRzhGuW0xPmjbYg+N/wo6zuOl0a7HYidNXWYn7IELQsYbQq4A6u/H0zQtUvNcl1wnfG1l0a4S6yhFeqWAkql1edMTe3Fn9o8jtNgpg+/eumH7USSl4pM9ZvxVK4p4cC0r5oWp/V8EZVyg+AOgq0sG8UJSZKgamz6sXGf0KQ0xukFeuf29cA8bHGME4msiJ4kKuzx6n3n+AX48rro=)
 
+</details>
 </div>
 <div class="options-api">
 
+이 경우, 기본 `modelValue` prop과 `update:modelValue` 이벤트 대신, 자식 컴포넌트는 `title` prop을 기대하고 부모 값을 업데이트하기 위해 `update:title` 이벤트를 발생시켜야 합니다:
+
 ```vue
 <!-- MyComponent.vue -->
 <script>
@@ -216,6 +267,23 @@ export default {
 
 <div class="composition-api">
 
+```vue
+<script setup>
+const firstName = defineModel('firstName')
+const lastName = defineModel('lastName')
+</script>
+
+<template>
+  <input type="text" v-model="firstName" />
+  <input type="text" v-model="lastName" />
+</template>
+```
+
+[Try it in the Playground](https://play.vuejs.org/#eNqFkstuwjAQRX/F8iZUAqKKHQpIfbAoUmnVx86bKEzANLEt26FUkf+9Y4MDSAg2UWbu9fjckVv6oNRw2wAd08wUmitLDNhGTZngtZLakpZoKIkjpZY1SdCadNK3Ab3IazhowzQ2/ES0MVFIYSwpucbvxA/qJXO5FsldlKr8qDxL8EKW7kEQAQsLtapyC1gRkq3vp217mOccwf8wwLksRSlYIoMvCNkOarmEahyODAT2J4yGgtFzhx8UDf5/r6c4NEs7CNqnpxkvbO0kcVjNhCyh5AJe/SW9pBPOV3DJGvu3dsKFaiyxf8qTW9gheQwVs4Z90BDm5oF47cF/Ht4aZC75argxUmD61g9ktJC14hXoN2U5ZmJ0TILitbyq5O889KxuoB/7xRqKnwv9jdn5HqPvGnDVWwTpNJvrFSCul2efi4DeiRigqdB9RfwAI6vGM+5tj41YIvaJL9C+hOfNxerLzHYWhImhPKh3uuBnFJ/A05XoR9zRcBTOMeGo+wcs+yse)
+
+<details>
+<summary>Pre 3.4 Usage</summary>
+
 ```vue
 <script setup>
 defineProps({
@@ -242,6 +310,7 @@ defineEmits(['update:firstName', 'update:lastName'])
 
 [Try it in the Playground](https://play.vuejs.org/#eNqNUc1qwzAMfhVjCk6hTdg1pGWD7bLDGIydlh1Cq7SGxDaOEjaC332yU6cdFNpLsPRJ348y8idj0qEHnvOi21lpkHWAvdmWSrZGW2Qjs1Azx2qrWyZoVMzQZwf2rWrhhKVZbHhGGivVTqsOWS0tfTeeKBGv+qjEMkJNdUaeNXigyCYjZIEKhNY0FQJVjBXHh+04nvicY/QOBM4VGUFhJHrwBWPDutV7aPKwslbU35Q8FCX/P+GJ4oB/T3hGpEU2m+ArfpnxytX2UEsF71abLhk9QxDzCzn7QCvVYeW7XuGyWSpH0eP6SyuxS75Eb/akOpn302LFYi8SiO8bJ5PK9DhFxV/j0yH8zOnzoWr6+SbhbifkMSwSsgByk1zzsoABFKZY2QNgGpiW57Pdrx2z3JCeI99Svvxh7g8muf2x)
 
+</details>
 </div>
 <div class="options-api">
 
@@ -284,68 +353,45 @@ Form 양식 입력 바인딩에 대해 배울 때 `v-model`에 `.trim`, `.number
 <MyComponent v-model.capitalize="myText" />
 ```
 
-
-`v-model` 컴포넌트에 추가되는 수정자는 `modelModifiers` 프로퍼티를 통해 컴포넌트에 제공됩니다. 아래 예시에서는 기본적으로 빈 객체로 설정된 `modelModifiers` 프로퍼티를 포함하는 컴포넌트를 생성했습니다:
-
 <div class="composition-api">
 
-```vue{4,9}
-<script setup>
-const props = defineProps({
-  modelValue: String,
-  modelModifiers: { default: () => ({}) }
-})
+컴포넌트 `v-model`에 추가된 수정자(modifiers)는 자식 컴포넌트에서 `defineModel()` 반환값을 구조 분해하여 다음과 같이 접근할 수 있습니다:
 
-defineEmits(['update:modelValue'])
+```vue{4}
+<script setup>
+const [model, modifiers] = defineModel()
 
-console.log(props.modelModifiers) // { capitalize: true }
+console.log(modifiers) // { capitalize: true }
 </script>
 
 <template>
-  <input
-    type="text"
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
-  />
+  <input type="text" v-model="model" />
 </template>
 ```
 
-</div>
-<div class="options-api">
+수정자에 기반하여 값을 어떻게 읽거나 쓸지 조건적으로 조정하려면, `defineModel()`에 `get`과 `set` 옵션을 전달할 수 있습니다. 이 두 옵션은 모델 ref의 get / set에서 값을 받아 변환된 값을 반환해야 합니다. 다음은 `set` 옵션을 사용하여 `capitalize` 수정자를 구현하는 방법입니다:
 
-```vue{11}
-<script>
-export default {
-  props: {
-    modelValue: String,
-    modelModifiers: {
-      default: () => ({})
+```vue{6-8}
+<script setup>
+const [model, modifiers] = defineModel({
+  set(value) {
+    if (modifiers.capitalize) {
+      return value.charAt(0).toUpperCase() + value.slice(1)
     }
-  },
-  emits: ['update:modelValue'],
-  created() {
-    console.log(this.modelModifiers) // { capitalize: true }
+    return value
   }
-}
+})
 </script>
 
 <template>
-  <input
-    type="text"
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
-  />
+  <input type="text" v-model="model" />
 </template>
 ```
 
-</div>
-
-컴포넌트의 `modelModifiers` 프로퍼티에 `capitalize`가 포함되어 있고 그 값은 `v-model` 바인딩 `v-model.capitalize="myText"`에 설정되어 있기 때문에 `true`인 것을 알 수 있습니다.
-
-
-이제 prop이  설정되었으므로 `modelModifiers` 객체 키를 확인하고 발신된 값을 변경하는 핸들러를 작성할 수 있습니다. 아래 코드에서는 `<input />` 앨리먼트가 `input` 이벤트를 실행할 때마다 문자열을 대문자로 표시합니다.
+[Try it in the Playground](https://play.vuejs.org/#eNp9UsFu2zAM/RVClzhY5mzoLUgHdEUPG9Bt2LLTtIPh0Ik6WxIkyosb5N9LybFrFG1OkvgeyccnHsWNtXkbUKzE2pdOWQKPFOwnqVVjjSM4gsMKTlA508CMqbMRuu9uDd80ajrD+XISi3WZDCB1abQnaLoNHgiuY8VsNptLvV72TbkdPwgbWxeE/ALY7JUHpW0gKAurqKjVI3rAFl1He6V30JkA3AbdKvLXUzXt+8Zssc6fM6+l6NtLAUtusF6O3cRCvFB9yY2SiYFw+8KSYcY/qfEC+FCVQuf/8rxbrJTG+4hkxyiWq2ZtUQecQ3oDqAqyMWeieyQAu0bBaUh5ebkv3A1lH+Y5md/WorstPGZzeHfGfa1KzD6yxzH11B/TCjHC4dPlX1j3P0CdjQ5S79/Z3WhpPF91lDz7Uald/uCNZj/TFFJE91SN7rslxX5JsRrmk6Koa/P/a4qRC7gY4uUey3+vxB/8Icak+OHQo2tRihGjwu2QtUb47te3pHsEWXWomX0B/Ine1CFq7Gmfg96y7Akvqf2StoKXcePvDoTaD0NFocnhxJeClyRu2FujP8u9yq+GnxGnJxSEO+M=)
 
-<div class="composition-api">
+<details>
+<summary>Pre 3.4 Usage</summary>
 
 ```vue{11-13}
 <script setup>
@@ -370,11 +416,44 @@ function emitValue(e) {
 </template>
 ```
 
-[Try it in the Playground](https://play.vuejs.org/#eNp9Us1Og0AQfpUJF5ZYqV4JNTaNxyYmVi/igdCh3QR2N7tDIza8u7NLpdU0nmB+v5/ZY7Q0Jj10GGVR7iorDYFD6sxDoWRrtCU4gsUaBqitbiHm1ngqrfuV5j+Fik7ldH6R83u5uVCVVo6g7Tf4SbDw+0QcJ4XK5yMkg3FA2JqmJOQIYLOXDqQyHUFVGkllI7/QAR7Q9rSXage97oBB0Ga+P7/kcrht9Rab9Dy5KKIRvohgzgD5fEKLZtEfzle8GBUYq41jAVuspcJnH4mjRw9wb2XTYQYvZJnebEqv9VbWEq3L2EqeLLuGMhAJLB5AHIcEhkINbMYPCLbSmzRiPHHgxHvcmS1zzc448UcYqTtVkdQqTIWCwAQCpwbZCJ/hZZhSaXfI6nzCV2UNIshJf5O88Oy0B6Yt4ZtW+9IuSdwlKelXY9CuSocs5+ZUd42sUNwzPfDSIFATVxTMxgFu5LZ/nkI+PgPqjT8jjUfMwqw/67SQs4+hlbOTHVfuPXwD3nsMBg==)
+[Try it in the Playground](https://play.vuejs.org/#eNp9Us1Og0AQfpUJF5ZYqV4JNTaNxyYmVi/igdCh3QR2N7tDIza8u7NLpdU0nmB+v5/ZY7Q0Jj10GGVR7iorDYFD6sxDoWRrtCU4gsUaBqitbiHm1ngqrfuV5j+Fik7ldH6R83u5GaBQlVaOoO03+Emw8BtFHCeFyucjKMNxQNiapiTkCGCzlw6kMh1BVRpJZSO/0AEe0Pa0l2oHve6AYdBmvj+/ZHO4bfUWm/Q8uSiiEb6IYM4A+XxCi2bRH9ZX3BgVGKuNYwFbrKXCZx+Jo0cPcG9l02EGL2SZ3mxKr/VW1hKty9hMniy7hjIQCSweQByHBIZCDWzGDwi20ps0Yjxx4MR73Jktc83OOPFHGKk7VZHUKkyFgsAEAqcG2Qif4WWYUml3yOp8wldlDSLISX+TvPDstAemLeGbVvvSLkncJSnpV2PQrkqHLOfmVHeNrFDcMz3w0iBQE1cUzMYBbuS2f55CPj4D6o0/I41HzMKsP+u0kLOPoZWzkx1X7j18A8s0DEY=)
 
+</details>
 </div>
+
 <div class="options-api">
 
+컴포넌트 `v-model`에 추가된 수정자는 `modelModifiers` prop을 통해 컴포넌트에 제공됩니다. 아래 예제에서는 빈 객체로 기본 설정된 `modelModifiers` prop이 포함된 컴포넌트를 만들었습니다:
+
+```vue{11}
+<script>
+export default {
+  props: {
+    modelValue: String,
+    modelModifiers: {
+      default: () => ({})
+    }
+  },
+  emits: ['update:modelValue'],
+  created() {
+    console.log(this.modelModifiers) // { capitalize: true }
+  }
+}
+</script>
+
+<template>
+  <input
+    type="text"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+```
+
+컴포넌트의 `modelModifiers` 프로퍼티에 `capitalize`가 포함되어 있고 그 값은 `v-model` 바인딩 `v-model.capitalize="myText"`에 설정되어 있기 때문에 `true`인 것을 알 수 있습니다.
+
+이제 prop이  설정되었으므로 `modelModifiers` 객체 키를 확인하고 발신된 값을 변경하는 핸들러를 작성할 수 있습니다. 아래 코드에서는 `<input />` 앨리먼트가 `input` 이벤트를 실행할 때마다 문자열을 대문자로 표시합니다.
+
 ```vue{13-15}
 <script>
 export default {
@@ -408,6 +487,8 @@ export default {
 
 ### 인자와 수정자가 있는 `v-model`에 대한 수정자들 {#modifiers-for-v-model-with-arguments}
 
+<div class="options-api">
+
 인자와 수정자가 모두 있는 `v-model` 바인딩의 경우, 생성된 prop 이름은 `arg + "수정자"`가 됩니다. 예를 들어
 
 ```vue-html
@@ -416,18 +497,6 @@ export default {
 
 해당 선언은 다음과 같아야 합니다:
 
-<div class="composition-api">
-
-```js
-const props = defineProps(['title', 'titleModifiers'])
-defineEmits(['update:title'])
-
-console.log(props.titleModifiers) // { capitalize: true }
-```
-
-</div>
-<div class="options-api">
-
 ```js
 export default {
   props: ['title', 'titleModifiers'],
@@ -437,6 +506,7 @@ export default {
   }
 }
 ```
+
 </div>
 
 다음은 다른 인자를 가진 여러 `v-model`에 수정자를 사용한 예시입니다:
@@ -450,6 +520,19 @@ export default {
 
 <div class="composition-api">
 
+```vue
+<script setup>
+const [firstName, firstNameModifiers] = defineModel('firstName')
+const [lastName, lastNameModifiers] = defineModel('lastName')
+
+console.log(firstNameModifiers) // { capitalize: true }
+console.log(lastNameModifiers) // { uppercase: true}
+</script>
+```
+
+<details>
+<summary>Pre 3.4 Usage</summary>
+
 ```vue{5,6,10,11}
 <script setup>
 const props = defineProps({
@@ -465,6 +548,7 @@ console.log(props.lastNameModifiers) // { uppercase: true}
 </script>
 ```
 
+</details>
 </div>
 <div class="options-api">
 
@@ -489,4 +573,5 @@ export default {
 }
 </script>
 ```
+
 </div>
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 215f1688..220ce5b3 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -1,10 +1,16 @@
 # 계산된 속성 {#computed-properties}
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/computed-properties-in-vue-3" title="Free Vue.js Computed Properties Lesson"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-computed-properties-in-vue-with-the-composition-api" title="Free Vue.js Computed Properties Lesson"/>
+</div>
+
 ## 기본 예제 {#basic-example}
 
-템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것입니다.
-템플릿에 너무 많은 논리를 넣으면 비대해져 유지 관리가 어려워질 수 있습니다.
-예를 들어 객체 내 배열이 있는 경우:
+템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것입니다. 템플릿에 너무 많은 논리를 넣으면 비대해져 유지 관리가 어려워질 수 있습니다. 예를 들어 객체 내 배열이 있는 경우:
 
 <div class="options-api">
 
@@ -48,12 +54,9 @@ const author = reactive({
 <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
 ```
 
-이 시점에서 템플릿이 약간 복잡해집니다.
-우리가 여기서 인지해야 할 요점은 템플릿의 반응형 결과가 `author.books`에 의해 계산된다는 점보다,
-템플릿 내에서 이 코드를 두 번 이상 반복하고 싶지 않다는 것입니다.
+이 시점에서 템플릿이 약간 복잡해집니다. 우리가 여기서 인지해야 할 요점은 템플릿의 반응형 결과가 `author.books`에 의해 계산된다는 점보다, 템플릿 내에서 이 코드를 두 번 이상 반복하고 싶지 않다는 것입니다.
 
-따라서 반응형 데이터를 포함하는 복잡한 논리의 경우, **계산된 속성**을 사용하는 것이 좋습니다.
-다음은 개선된 동일한 예제입니다:
+따라서 반응형 데이터를 포함하는 복잡한 논리의 경우, **계산된 속성**을 사용하는 것이 좋습니다. 다음은 개선된 동일한 예제입니다:
 
 <div class="options-api">
 
@@ -92,9 +95,7 @@ export default {
 
 `data`에 있는 `books` 배열의 값을 변경하면, 그에 따라 `publishedBooksMessage`가 어떻게 변경되는지 확인할 수 있습니다.
 
-일반 속성처럼 템플릿의 계산된 속성에 데이터를 바인딩할 수 있습니다.
-Vue는 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로,
-`author.books`가 변경되면 `publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트합니다.
+일반 속성처럼 템플릿의 계산된 속성에 데이터를 바인딩할 수 있습니다. Vue는 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로, `author.books`가 변경되면 `publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트합니다.
 
 참고: [계산된 속성에 타입 지정하기](/guide/typescript/options-api.html#typing-computed-properties) <sup class="vt-badge ts" />
 
@@ -129,14 +130,9 @@ const publishedBooksMessage = computed(() => {
 
 [온라인 연습장으로 실행하기](https://play.vuejs.org/#eNp1kM1Kw0AUhV/lkE1aqI2oq5BGWgRBqCsRxLhIk9sm2MwMmUmhhECRCoIbH0DFheC20rdq8xDO1LYr3c2d+3O+c0qrK0R7UpDlWp6M8lQoSFKF8AOWZoLnCiVyCiOVTqiFiGeiUBSjwjDnGWy9aQcsYBFnUiEsVMJzdPYbjTJgAAszcmFf8IThjJPdMp8Dzu+li1vzBuzrgnCEA3TjScgirXBepPF2dNs+1u1eKNPoj96J7l0lhP5UKsqnmgm4C1jVNHCOg9VyXj8s1i+vGm24wxXFYJzKhOKeYemTlOGINP3OZaPRRMfHxkOuQ8nZ1mF7A98eExupBD4OcQr7hqQNbfOSa3Uj7Dm/geoodaEoE+NQka4AT/j192P9NsdqMau/ZqvlB+r3p/Xzp+s5Jns9IkXI/LL8h7Kq9HkzYXT2t63qB4hTpdc=)
 
-여기에서 계산된 속성 `publishedBooksMessage`를 선언했습니다.
-`computed()` 함수에는 getter로 사용될 함수가 전달돼야 하며, 반환되는 값은 **computed ref**입니다.
-일반 ref와 유사하게 계산된 결과를 `publishedBooksMessage.value`로 접근할 수 있습니다.
-계산된 ref는 템플릿에서 자동으로 언래핑되므로, 템플릿 표현식에서 `.value` 없이 참조할 수 있습니다.
+여기에서 계산된 속성 `publishedBooksMessage`를 선언했습니다. `computed()` 함수에는 getter로 사용될 함수가 전달돼야 하며, 반환되는 값은 **computed ref**입니다. 일반 ref와 유사하게 계산된 결과를 `publishedBooksMessage.value`로 접근할 수 있습니다. 계산된 ref는 템플릿에서 자동으로 언래핑되므로, 템플릿 표현식에서 `.value` 없이 참조할 수 있습니다.
 
-계산된 속성은 의존된 반응형을 자동으로 추적합니다.
-Vue는 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로,
-`author.books`가 변경되면 `publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트합니다.
+계산된 속성은 의존된 반응형을 자동으로 추적합니다. Vue는 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로, `author.books`가 변경되면 `publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트합니다.
 
 참고: [computed 타입 지정하기](/guide/typescript/composition-api.html#typing-computed) <sup class="vt-badge ts" />
 
@@ -174,11 +170,7 @@ function calculateBooksMessage() {
 
 </div>
 
-계산된 속성 대신 메서드로 동일한 기능을 정의할 수 있습니다.
-결과적으로 두 가지 접근 방식은 실제로 완전히 동일합니다.
-그러나 차이점은 **계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점**입니다.
-계산된 속성은 의존된 반응형 중 일부가 변경된 경우에만 재평가됩니다.
-즉, `author.books`가 변경되지 않은 한 여러 곳에서 `publishedBooksMessage`에 접근할 경우, getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 반환합니다.
+계산된 속성 대신 메서드로 동일한 기능을 정의할 수 있습니다. 결과적으로 두 가지 접근 방식은 실제로 완전히 동일합니다. 그러나 차이점은 **계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점**입니다. 계산된 속성은 의존된 반응형 중 일부가 변경된 경우에만 재평가됩니다. 즉, `author.books`가 변경되지 않은 한 여러 곳에서 `publishedBooksMessage`에 접근할 경우, getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 반환합니다.
 
 아래 예제는 `Date.now()`가 반응형으로써 의존된 것이 아니기 때문에 이후 계산된 속성이 업데이트되지 않음을 의미합니다:
 
@@ -204,17 +196,11 @@ const now = computed(() => Date.now())
 
 이와 반대로 메서드 호출은 **리렌더링이 발생할 때마다 항상 함수를 실행**합니다.
 
-캐싱이 필요한 이유는 무엇일까요?
-거대한 배열을 루프 하며 많은 계산을 해야 하는 값비싼 비용의 `list` 속성이 있다고 가정해봅시다.
-그리고 `list`에 의존하는 또 다른 계산된 속성이 있을 수 있습니다.
-캐싱이 없다면 우리는 `list`의 getter를 불필요하게 많이 실행할 것입니다!
-캐싱을 원하지 않는 경우에만 메서드 호출을 사용하십시오.
+캐싱이 필요한 이유는 무엇일까요? 거대한 배열을 루프 하며 많은 계산을 해야 하는 값비싼 비용의 `list` 속성이 있다고 가정해봅시다. 그리고 `list`에 의존하는 또 다른 계산된 속성이 있을 수 있습니다. 캐싱이 없다면 우리는 `list`의 getter를 불필요하게 많이 실행할 것입니다! 캐싱을 원하지 않는 경우에만 메서드 호출을 사용하십시오.
 
 ## 수정 가능한 계산된 속성 {#writable-computed}
 
-계산된 속성은 기본적으로 getter 전용입니다.
-계산된 속성에 새 값을 할당하려고 하면 런타임 에러가 발생합니다.
-드물게 "수정 가능한" 계산된 속성이 필요한 경우, getter와 setter를 모두 제공하여 속성을 만들 수 있습니다.
+계산된 속성은 기본적으로 getter 전용입니다. 계산된 속성에 새 값을 할당하려고 하면 런타임 에러가 발생합니다. 드물게 "수정 가능한" 계산된 속성이 필요한 경우, getter와 setter를 모두 제공하여 속성을 만들 수 있습니다.
 
 <div class="options-api">
 
@@ -277,20 +263,8 @@ const fullName = computed({
 
 ### getter에서 사이드 이펙트는 금물 {#getters-should-be-side-effect-free}
 
-계산된 속성의 getter 함수는 오로지 계산만 수행해야 함으로써, 사이드 이펙트는 없어야 함을 기억하는 것이 중요합니다.
-예를 들어, **getter에서 비동기 요청을 하거나 DOM을 변경하면 안됩니다!**
-계산된 속성은 다른 값을 기반으로 의도한 값을 도출하는 방법을 선언적으로 정의한 것으로 이해해야 합니다.
-이것의 유일한 기능은 해당 값을 계산하고 반환하는 것이어야 합니다.
-가이드의 뒷부분에서 상태 변경에 반응하는 [감시자](./watchers)를 사용하여 사이드 이펙트를 수행하는 방법에 대해 알아볼 것입니다.
-
-:::info 사이드 이펙트란?
-프로그래밍에서 함수가 결과값 이외에 다른 상태를 변경하는 행위
-:::
+계산된 getter 함수는 순수한 계산만을 수행하고 부작용이 없어야 한다는 것을 기억하는 것이 중요합니다. 예를 들어, **계산된 getter 안에서 다른 상태를 변형시키거나, 비동기 요청을 하거나, DOM을 변경하는 행위는 하지 마세요!** 계산된 속성은 다른 값들을 기반으로 값을 파생시키는 방법을 선언적으로 설명하는 것으로 생각해야 합니다 - 그것의 유일한 책임은 그 값을 계산하고 반환하는 것입니다. 가이드에서 나중에 우리는 상태 변화에 대한 반응으로 부작용을 수행하는 방법에 대해 [watchers](./watchers)를 사용하여 논의할 것입니다.
 
 ### 계산된 값을 변경하지 마십시오 {#avoid-mutating-computed-value}
 
-계산된 속성에서 반환된 값은 파생된 상태입니다.
-임시 스냅샷으로 생각하십시오.
-소스 상태가 변경될 때마다 새 스냅샷이 생성됩니다.
-스냅샷을 변경하는 것은 의미가 없으므로 계산된 반환 값은 읽기 전용으로 처리되어야 하며 변경되지 않아야 합니다.
-대신 새 계산을 트리거하기 위해 의존하는 소스 상태를 업데이트하십시오.
+계산된 속성에서 반환된 값은 파생된 상태입니다. 임시 스냅샷으로 생각하십시오. 소스 상태가 변경될 때마다 새 스냅샷이 생성됩니다. 스냅샷을 변경하는 것은 의미가 없으므로 계산된 반환 값은 읽기 전용으로 처리되어야 하며 변경되지 않아야 합니다. 대신 새 계산을 트리거하기 위해 의존하는 소스 상태를 업데이트하십시오.
diff --git a/src/guide/essentials/template-refs.md b/src/guide/essentials/template-refs.md
index 56c573f5..9c984eef 100644
--- a/src/guide/essentials/template-refs.md
+++ b/src/guide/essentials/template-refs.md
@@ -1,21 +1,18 @@
 # 템플릿 참조 {#template-refs}
 
-Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 해야하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있습니다.
-이러한 필요성을 충족시키기 위해 `ref`라는 특별한 속성을 사용할 수 있습니다:
+Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 해야하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있습니다. 이러한 필요성을 충족시키기 위해 `ref`라는 특별한 속성을 사용할 수 있습니다:
 
 ```vue-html
 <input ref="input">
 ```
 
-`ref`는 `v-for` 장에서 언급한 `key` 속성과 유사한 특수 속성입니다.
-이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있습니다.
-예를 들어 컴포넌트 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화하려는 경우, 프로그래밍 방식으로 조작하기 편리합니다.
+`ref`는 `v-for` 장에서 언급한 `key` 속성과 유사한 특수 속성입니다. 이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있습니다. 예를 들어 컴포넌트 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화하려는 경우, 프로그래밍 방식으로 조작하기 편리합니다.
 
 ## ref로 접근하기 {#accessing-the-refs}
 
 <div class="composition-api">
 
-컴포지션 API로 참조를 얻으려면 동일한 이름으로 `ref`를 선언해야 합니다:
+Composition API를 사용하여 참조를 얻으려면, 템플릿 ref 속성 값과 일치하는 이름으로 ref를 선언해야 합니다:
 
 ```vue
 <script setup>
@@ -160,24 +157,19 @@ ref 배열은 소스 배열과 **동일한 순서를 보장하지 않습니다**
 
 ## 함수로 참조하기 {#function-refs}
 
-문자열 키 대신 `ref` 속성을 함수에 바인딩할 수도 있습니다.
-이 함수는 각 컴포넌트 업데이트 시 호출되며, 엘리먼트 참조를 저장할 위치에 대한 완전한 유연성을 제공합니다.
-이 함수는 첫 번째 인자로 엘리먼트 참조를 받습니다:
+문자열 키 대신 `ref` 속성을 함수에 바인딩할 수도 있습니다. 이 함수는 각 컴포넌트 업데이트 시 호출되며, 엘리먼트 참조를 저장할 위치에 대한 완전한 유연성을 제공합니다. 이 함수는 첫 번째 인자로 엘리먼트 참조를 받습니다:
 
 ```vue-html
 <input :ref="(el) => { /* el을 속성이나 ref에 할당 */ }">
 ```
 
-`:ref`와 같이 동적 바인딩으로 사용하는 경우에는 ref의 이름 대신 함수를 전달할 수 있습니다
-엘리먼트가 마운트 해제되는 경우 인자는 `null`입니다.
-물론 인라인 함수 대신 메서드를 사용할 수 있습니다.
+`:ref`와 같이 동적 바인딩으로 사용하는 경우에는 ref의 이름 대신 함수를 전달할 수 있습니다. 엘리먼트가 마운트 해제되는 경우 인자는 `null`입니다. 물론 인라인 함수 대신 메서드를 사용할 수 있습니다.
 
 ## 컴포넌트에 ref 사용하기 {#ref-on-component}
 
 > 이 섹션에서는 [컴포넌트](/guide/essentials/component-basics)에 대한 지식이 있다고 가정하므로, 건너뛰고 나중에 읽어도 됩니다.
 
-`ref`는 자식 컴포넌트에 사용할 수도 있습니다.
-이 경우 ref는 컴포넌트 인스턴스를 참조합니다:
+`ref`는 자식 컴포넌트에 사용할 수도 있습니다. 이 경우 ref는 컴포넌트 인스턴스를 참조합니다:
 
 <div class="composition-api">
 
@@ -222,17 +214,11 @@ export default {
 
 </div>
 
-<span class="composition-api">자식 컴포넌트가 옵션 API를 사용하거나 `<script setup>`을 사용하지 않는 경우,</span>
-참조된 인스턴스는 자식 컴포넌트의 `this`와 동일합니다.
-즉, 부모 컴포넌트는 자식 컴포넌트의 모든 속성과 메서드에 대한 접근 권한을 갖습니다.
-이렇게 하면 상·하위(부모·자식) 간에 밀접하게 결합한 구현 세부 정보를 쉽게 만들 수 있으므로, 컴포넌트 참조는 반드시 필요할 때만 사용해야 합니다.
-대부분의 경우 우선적으로 표준 props를 사용하여 상·하위 상호 작용을 구현하고 인터페이스를 내보내야 합니다.
+<span class="composition-api">자식 컴포넌트가 옵션 API를 사용하거나 `<script setup>`을 사용하지 않는 경우,</span> 참조된 인스턴스는 자식 컴포넌트의 `this`와 동일합니다. 즉, 부모 컴포넌트는 자식 컴포넌트의 모든 속성과 메서드에 대한 접근 권한을 갖습니다. 이렇게 하면 상·하위(부모·자식) 간에 밀접하게 결합한 구현 세부 정보를 쉽게 만들 수 있으므로, 컴포넌트 참조는 반드시 필요할 때만 사용해야 합니다. 대부분의 경우 우선적으로 표준 props를 사용하여 상·하위 상호 작용을 구현하고 인터페이스를 내보내야 합니다.
 
 <div class="composition-api">
 
-여기서 예외는 `<script setup>`을 사용하는 컴포넌트가 **기본적으로 비공개**라는 점입니다.
-`<script setup>`을 사용하는 자식 컴포넌트를 부모 컴포넌트에서 참조하려는 경우,
-자식 컴포넌트가 `defineExpose` 컴파일러 매크로를 사용하여 선택한 인터페이스를 노출하지 않는 한 그 무엇에도 접근할 수 없습니다. (역자주: 컴파일러 매크로이기 때문에 개발 환경 설정에 따라 lint 에러나 경고가 나올수 있습니다)
+여기서 예외는 `<script setup>`을 사용하는 컴포넌트가 **기본적으로 비공개**라는 점입니다. `<script setup>`을 사용하는 자식 컴포넌트를 부모 컴포넌트에서 참조하려는 경우, 자식 컴포넌트가 `defineExpose` 컴파일러 매크로를 사용하여 선택한 인터페이스를 노출하지 않는 한 그 무엇에도 접근할 수 없습니다. (역자주: 컴파일러 매크로이기 때문에 개발 환경 설정에 따라 lint 에러나 경고가 나올수 있습니다)
 
 ```vue
 <script setup>
@@ -241,6 +227,7 @@ import { ref, defineExpose } from 'vue'
 const a = 1
 const b = ref(2)
 
+// 컴파일러 매크로, 예를 들어 defineExpose 는 import 할 필요가 없습니다
 defineExpose({
   a,
   b
diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md
index 09a44b8f..1c501c4d 100644
--- a/src/guide/essentials/template-syntax.md
+++ b/src/guide/essentials/template-syntax.md
@@ -1,13 +1,10 @@
 # 템플릿 문법 {#template-syntax}
 
-Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용합니다.
-모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML입니다.
+Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용합니다. 모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML입니다.
 
-내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다.
-반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 합니다.
+내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 합니다.
 
-가상 DOM 개념에 익숙하고 JavaScript의 원시적인 작동법을 선호하는 경우, JSX 지원 옵션을 사용하여 템플릿 대신 [렌더링 함수를 직접 작성](/guide/extras/render-function)할 수도 있습니다.
-그러나 템플릿과 동일한 수준의 컴파일 시간 최적화를 기대할 수 없다는 점에 유의하십시오.
+가상 DOM 개념에 익숙하고 JavaScript의 원시적인 작동법을 선호하는 경우, JSX 지원 옵션을 사용하여 템플릿 대신 [렌더링 함수를 직접 작성](/guide/extras/render-function)할 수도 있습니다. 그러나 템플릿과 동일한 수준의 컴파일 시간 최적화를 기대할 수 없다는 점에 유의하십시오.
 
 ## 텍스트 보간법 {#text-interpolation}
 
@@ -17,13 +14,11 @@ Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DO
 <span>메세지: {{ msg }}</span>
 ```
 
-이중 중괄호 태그 내 `msg`는 [해당 컴포넌트 인스턴스](/guide/essentials/reactivity-fundamentals#declaring-reactive-state)의 `msg` 속성의 값으로 대체됩니다.
-또한 `msg` 속성이 변경될 때마다 업데이트됩니다.
+이중 중괄호 태그 내 `msg`는 [해당 컴포넌트 인스턴스](/guide/essentials/reactivity-fundamentals#declaring-reactive-state)의 `msg` 속성의 값으로 대체됩니다. 또한 `msg` 속성이 변경될 때마다 업데이트됩니다.
 
 ## HTML 출력 {#raw-html}
 
-이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다.
-실제 HTML을 출력하려면 [`v-html` 디렉티브](/api/built-in-directives.html#v-html)을 사용해야 합니다:
+이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 [`v-html` 디렉티브](/api/built-in-directives.html#v-html)을 사용해야 합니다:
 
 ```vue-html
 <p>텍스트 보간법 사용: {{ rawHtml }}</p>
@@ -39,31 +34,23 @@ Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DO
   <p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>
 </div>
 
-여기서 우리가 보고있는 `v-html`이라는 새로운 속성은 **디렉티브**라고 합니다.
-디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 `v-`를 사용하며, 짐작했듯이 디렉티브는 렌더링된 DOM에 특별한 반응적 동작을 적용합니다.
-여기서 우리가 설명하고자 하는 것은 "현재 활성화 상태인 인스턴스의 `rawHtml` 속성을 사용하여 이 엘리먼트 내부의 HTML을 최신 상태로 유지합니다."입니다.
+여기서 우리가 보고있는 `v-html`이라는 새로운 속성은 **디렉티브**라고 합니다. 디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 `v-`를 사용하며, 짐작했듯이 디렉티브는 렌더링된 DOM에 특별한 반응적 동작을 적용합니다. 여기서 우리가 설명하고자 하는 것은 "현재 활성화 상태인 인스턴스의 `rawHtml` 속성을 사용하여 이 엘리먼트 내부의 HTML을 최신 상태로 유지합니다."입니다.
 
-`span` 내부의 컨텐츠는 `rawHtml` 속성 값을 일반 HTML로 해석한 것으로 대체됩니다.
-데이터 바인딩은 무시됩니다.
-Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 `v-html`을 사용하여 템플릿의 일부분을 작성할 수 없습니다.
-따라서 UI 재사용 및 구성을 위한 기본 단위로 컴포넌트가 선호됩니다.
+`span` 내부의 컨텐츠는 `rawHtml` 속성 값을 일반 HTML로 해석한 것으로 대체됩니다. 데이터 바인딩은 무시됩니다. Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 `v-html`을 사용하여 템플릿의 일부분을 작성할 수 없습니다. 따라서 UI 재사용 및 구성을 위한 기본 단위로 컴포넌트가 선호됩니다.
 
 :::warning 보안 경고
-웹사이트에서 임의의 HTML을 동적으로 렌더링하면 [XSS 취약점](https://en.wikipedia.org/wiki/Cross-site_scripting)이 쉽게 발생할 수 있으므로 매우 위험할 수 있습니다.
-신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고 사용자가 제공한 컨텐츠에는 **절대** 사용하지 마세요.
+웹사이트에서 임의의 HTML을 동적으로 렌더링하면 [XSS 취약점](https://en.wikipedia.org/wiki/Cross-site_scripting)이 쉽게 발생할 수 있으므로 매우 위험할 수 있습니다. 신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고 사용자가 제공한 컨텐츠에는 **절대** 사용하지 마세요.
 :::
 
 ## 속성 바인딩 {#attribute-bindings}
 
-이중 중괄호는 HTML 속성(attribute) 내에서 사용할 수 없습니다.
-대신 [`v-bind` 디렉티브](/api/built-in-directives.html#v-bind)를 사용하세요:
+이중 중괄호는 HTML 속성(attribute) 내에서 사용할 수 없습니다. 대신 [`v-bind` 디렉티브](/api/built-in-directives.html#v-bind)를 사용하세요:
 
 ```vue-html
 <div v-bind:id="dynamicId"></div>
 ```
 
-`v-bind` 디렉티브는 엘리먼트의 `id` 속성을 컴포넌트의 `dynamicId` 속성과 동기화된 상태로 유지하도록 Vue에 지시합니다.
-바인딩된 값이 `null` 또는 `undefined`이면 엘리먼트의 속성이 제거된 상태로 렌더링 됩니다.
+`v-bind` 디렉티브는 엘리먼트의 `id` 속성을 컴포넌트의 `dynamicId` 속성과 동기화된 상태로 유지하도록 Vue에 지시합니다. 바인딩된 값이 `null` 또는 `undefined`이면 엘리먼트의 속성이 제거된 상태로 렌더링 됩니다.
 
 ### 단축 문법 {#shorthand}
 
@@ -73,16 +60,27 @@ Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 `v-html`을 사
 <div :id="dynamicId"></div>
 ```
 
-`:`로 시작하는 속성은 일반 HTML과 약간 다르게 보일 수 있지만, 실제로는 유효한 속성명 문자열이며, Vue를 지원하는 모든 브라우저에서 올바르게 파싱 할 수 있습니다.
-또한 최종 렌더링된 마크업에는 표시되지 않습니다.
-단축 문법은 선택 사항이지만 사용할 경우 유용할 것입니다.
+`:`로 시작하는 속성은 일반 HTML과 약간 다르게 보일 수 있지만, 실제로는 유효한 속성명 문자열이며, Vue를 지원하는 모든 브라우저에서 올바르게 파싱 할 수 있습니다. 또한 최종 렌더링된 마크업에는 표시되지 않습니다. 단축 문법은 선택 사항이지만 사용할 경우 유용할 것입니다.
 
 > 이후 가이드 내용에서는 Vue 개발자에게 가장 일반적으로 사용되는 단축 문법을 코드 예제에서 사용할 것입니다.
 
+### 동일 이름 축약 <sup class="vt-badge" data-text="3.4+" /> {#same-name-shorthand}
+
+속성의 이름이 바인딩 되는 자바스크립트 값과 같을 경우, 속성 값 생략을 통해 문법을 더욱 간소화할 수 있습니다:
+
+```vue-html
+<!-- :id="id" 와 동일 -->
+<div :id></div>
+
+<!-- 이것도 작동합니다 -->
+<div v-bind:id></div>
+```
+
+이는 자바스크립트에서 객체를 선언할 때 사용하는 속성 축약 문법과 유사합니다. 이 기능은 Vue 3.4 이상에서만 사용 가능합니다.
+
 ### 불리언(Boolean) 속성 {#boolean-attributes}
 
-[불리언 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes)은 엘리먼트에 표기했는지 여부로 참/거짓 값을 나타내는 속성입니다.
-예를 들어, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)는 가장 일반적으로 사용되는 불리언 속성 중 하나입니다.
+[불리언 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes)은 엘리먼트에 표기했는지 여부로 참/거짓 값을 나타내는 속성입니다. 예를 들어, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)는 가장 일반적으로 사용되는 불리언 속성 중 하나입니다.
 
 `v-bind`는 이러한 경우 약간 다르게 작동합니다:
 
@@ -90,9 +88,7 @@ Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 `v-html`을 사
 <button :disabled="isButtonDisabled">버튼</button>
 ```
 
-`isButtonDisabled`에 [truthy 값](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)이 있는 경우, `disabled` 속성이 표기됩니다.
-값이 빈 문자열인 경우 `<button disabled="">`의 일관성을 유지하므로 속성이 표기됩니다.
-그 외 [falsy 값](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)의 경우 속성이 생략됩니다.
+`isButtonDisabled`에 [truthy 값](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)이 있는 경우, `disabled` 속성이 표기됩니다. 값이 빈 문자열인 경우 `<button disabled="">`의 일관성을 유지하므로 속성이 표기됩니다. 그 외 [falsy 값](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)의 경우 속성이 생략됩니다.
 
 ### 여러 속성을 동적으로 바인딩 {#dynamically-binding-multiple-attributes}
 
@@ -131,8 +127,7 @@ data() {
 
 ## JavaScript 표현식 사용 {#using-javascript-expressions}
 
-지금까지는 템플릿의 간단한 속성 키에만 바인딩했습니다.
-그러나 Vue는 실제로 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다:
+지금까지는 템플릿의 간단한 속성 키에만 바인딩했습니다. 그러나 Vue는 실제로 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다:
 
 ```vue-html
 {{ number + 1 }}
@@ -153,9 +148,7 @@ Vue 템플릿에서 JavaScript 표현식은 다음과 같은 위치에 사용할
 
 ### 하나의 표현식만 가능 {#expressions-only}
 
-각 바인딩에는 **하나의 단일 표현식**만 포함될 수 있습니다.
-표현식은 값으로 평가할 수 있어야 하는 코드 조각입니다.
-쉽게 말해 `return` 뒤에 사용할 수 있는 코드여야 하는 것입니다.  
+각 바인딩에는 **하나의 단일 표현식**만 포함될 수 있습니다. 표현식은 값으로 평가할 수 있어야 하는 코드 조각입니다. 쉽게 말해 `return` 뒤에 사용할 수 있는 코드여야 하는 것입니다.
 
 따라서 다음 코드들은 **작동하지 않습니다**:
 
@@ -183,20 +176,15 @@ Vue 템플릿에서 JavaScript 표현식은 다음과 같은 위치에 사용할
 
 ### 제한된 전역 접근 {#restricted-globals-access}
 
-템플릿 표현식은 샌드박스 처리되어 [제한된 전역 리스트](https://github.com/vuejs/core/blob/main/packages/shared/src/globalsAllowList.ts#L3)에만 접근할 수 있습니다.
-이 목록은 `Math` 및 `Date` 등 일반적으로 사용되는 기본 제공 전역 객체를 표시합니다.
+템플릿 표현식은 샌드박스 처리되어 [제한된 전역 리스트](https://github.com/vuejs/core/blob/main/packages/shared/src/globalsAllowList.ts#L3)에만 접근할 수 있습니다. 이 목록은 `Math` 및 `Date` 등 일반적으로 사용되는 기본 제공 전역 객체를 표시합니다.
 
-리스트에 명시적으로 포함되지 않은 `window`와 같은 전역 속성은 템플릿 표현식에서 접근할 수 없습니다.
-그러나 [`app.config.globalProperties`](/api/application.html#app-config-globalproperties)에 추가하여, Vue 내부의 모든 표현식에서 전역 속성에 접근 할 수 있도록 명시적으로 정의할 수 있습니다.
+리스트에 명시적으로 포함되지 않은 `window`와 같은 전역 속성은 템플릿 표현식에서 접근할 수 없습니다. 그러나 [`app.config.globalProperties`](/api/application.html#app-config-globalproperties)에 추가하여, Vue 내부의 모든 표현식에서 전역 속성에 접근 할 수 있도록 명시적으로 정의할 수 있습니다.
 
 ## 디렉티브 {#directives}
 
-`v-` 접두사가 있는 특수한 속성을 디렉티브라 합니다.
-Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디렉티브](/api/built-in-directives)를 제공합니다.
+`v-` 접두사가 있는 특수한 속성을 디렉티브라 합니다. Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디렉티브](/api/built-in-directives)를 제공합니다.
 
-디렉티브 속성 값은 단일 JavaScript 표현식이어야 합니다(나중에 해당 섹션에서 설명할 `v-for`, `v-on` 및 `v-slot` 제외).
-디렉티브의 역할은 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용하는 것입니다.
-[`v-if`](/api/built-in-directives.html#v-if)를 예로 들어 보겠습니다.
+디렉티브 속성 값은 단일 JavaScript 표현식이어야 합니다(나중에 해당 섹션에서 설명할 `v-for`, `v-on` 및 `v-slot` 제외). 디렉티브의 역할은 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용하는 것입니다. [`v-if`](/api/built-in-directives.html#v-if)를 예로 들어 보겠습니다.
 
 ```vue-html
 <p v-if="seen">이제 이것을 볼 수 있습니다.</p>
@@ -206,8 +194,7 @@ Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디
 
 ### 인자 {#arguments}
 
-일부 디렉티브는 디렉티브 뒤에 콜론(`:`)으로 표시되는 "인자"를 사용할 수 있습니다.
-예를 들어 `v-bind` 디렉티브는 HTML 속성을 반응적으로 업데이트하는 데 사용됩니다:
+일부 디렉티브는 디렉티브 뒤에 콜론(`:`)으로 표시되는 "인자"를 사용할 수 있습니다. 예를 들어 `v-bind` 디렉티브는 HTML 속성을 반응적으로 업데이트하는 데 사용됩니다:
 
 ```vue-html
 <a v-bind:href="url"> ... </a>
@@ -216,8 +203,7 @@ Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디
 <a :href="url"> ... </a>
 ```
 
-여기서 `href`는 `v-bind` 디렉티브의 인자로서, 엘리먼트의 속성인 `href`에 `url`의 값을 바인딩한 것입니다.
-간단하게 인자 앞의 `v-bind:`는 `:`로 줄여 쓸 수 있습니다.
+여기서 `href`는 `v-bind` 디렉티브의 인자로서, 엘리먼트의 속성인 `href`에 `url`의 값을 바인딩한 것입니다. 간단하게 인자 앞의 `v-bind:`는 `:`로 줄여 쓸 수 있습니다.
 
 또 다른 예로는 DOM 이벤트를 수신하는 `v-on` 디렉티브입니다:
 
@@ -228,9 +214,7 @@ Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디
 <a @click="doSomething"> ... </a>
 ```
 
-여기서 `click`의 인자는 수신할 이벤트 이름입니다.
-`v-on`은 단축형으로 `@`를 대신 사용할 수 있습니다.
-이벤트 처리에 대해서는 나중에 더 자세히 설명하겠습니다.
+여기서 `click`의 인자는 수신할 이벤트 이름입니다. `v-on`은 단축형으로 `@`를 대신 사용할 수 있습니다. 이벤트 처리에 대해서는 나중에 더 자세히 설명하겠습니다.
 
 ### 동적인 인자 {#dynamic-arguments}
 
@@ -247,8 +231,7 @@ Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디
 <a :[attributeName]="url"> ... </a>
 ```
 
-여기서 `attributeName`은 JavaScript 표현식으로 동적으로 평가되며, 평가된 값은 인자의 최종값으로 사용됩니다.
-예를 들어 컴포넌트 인스턴스의 데이터에 `attributeName` 속성값이 `"href"`인 경우, 이 바인딩은 `v-bind:href`와 같습니다.
+여기서 `attributeName`은 JavaScript 표현식으로 동적으로 평가되며, 평가된 값은 인자의 최종값으로 사용됩니다. 예를 들어 컴포넌트 인스턴스의 데이터에 `attributeName` 속성값이 `"href"`인 경우, 이 바인딩은 `v-bind:href`와 같습니다.
 
 마찬가지로 동적인 인자를 사용하여, 핸들러에 이벤트 이름을 동적으로 바인딩할 수 있습니다:
 
@@ -263,22 +246,18 @@ Vue는 위에서 소개한 `v-html`과 `v-bind`를 포함하여 [빌트인 디
 
 #### 동적인 인자 값 제약 조건 {#dynamic-argument-value-constraints}
 
-동적인 인자는 `null` 또는 문자열로 평가되어야 합니다.
-값이 `null`일 경우, 바인딩을 명시적으로 제거합니다.
-문자열이 아닌 다른 값은 에러를 트리거합니다.
+동적인 인자는 `null` 또는 문자열로 평가되어야 합니다. 값이 `null`일 경우, 바인딩을 명시적으로 제거합니다. 문자열이 아닌 다른 값은 에러를 트리거합니다.
 
 #### 동적인 인자 문법 제약 조건 {#dynamic-argument-syntax-constraints}
 
-동적인 인자 표현식에는 공백 및 따옴표와 같은 특정 문자가 HTML 속성 이름 내에서 유효하지 않기 때문에 문법에 일부 제약 조건이 있습니다.
-예를 들어 다음은 유효하지 않습니다:
+동적인 인자 표현식에는 공백 및 따옴표와 같은 특정 문자가 HTML 속성 이름 내에서 유효하지 않기 때문에 문법에 일부 제약 조건이 있습니다. 예를 들어 다음은 유효하지 않습니다:
 
 ```vue-html
 <!-- 이렇게 하면 컴파일러 경고가 트리거됩니다. -->
 <a :['foo' + bar]="value"> ... </a>
 ```
 
-복잡한 동적인 인자를 전달해야 하는 경우 [computed 속성](./computed)을 사용하는 것이 더 나을 것입니다.
-이에 대해서는 곧 다룰 것입니다.
+복잡한 동적인 인자를 전달해야 하는 경우 [computed 속성](./computed)을 사용하는 것이 더 나을 것입니다. 이에 대해서는 곧 다룰 것입니다.
 
 DOM 내 템플릿(HTML 파일에 직접 작성된 템플릿)을 사용할 때, 브라우저가 속성 이름을 소문자로 강제 변환하므로 대문자로 키 이름을 지정하는 것도 피해야 합니다:
 
@@ -286,14 +265,11 @@ DOM 내 템플릿(HTML 파일에 직접 작성된 템플릿)을 사용할 때, 
 <a :[someAttr]="value"> ... </a>
 ```
 
-위의 내용은 DOM 내 템플릿에서 `:[someattr]`로 변환됩니다.
-컴포넌트에 `someattr` 대신 `someAttr` 속성을 사용했다면 코드가 작동하지 않습니다.
-싱글 파일 컴포넌트 내의 템플릿은 이 제약 조건에 해당하지 않습니다.
+위의 내용은 DOM 내 템플릿에서 `:[someattr]`로 변환됩니다. 컴포넌트에 `someattr` 대신 `someAttr` 속성을 사용했다면 코드가 작동하지 않습니다. 싱글 파일 컴포넌트 내의 템플릿은 이 제약 조건에 해당하지 않습니다.
 
 ### 수식어 {#modifiers}
 
-수식어는 점(`.`)으로 시작하는 특수한 접미사로, 디렉티브가 특별한 방식으로 바인딩되어야 함을 나타냅니다.
-예를 들어 `.prevent` 수식어는 트리거된 이벤트에서 `event.preventDefault()`를 호출하도록 `v-on` 디렉티브에 지시합니다.
+수식어는 점(`.`)으로 시작하는 특수한 접미사로, 디렉티브가 특별한 방식으로 바인딩되어야 함을 나타냅니다. 예를 들어 `.prevent` 수식어는 트리거된 이벤트에서 `event.preventDefault()`를 호출하도록 `v-on` 디렉티브에 지시합니다.
 
 ```vue-html
 <form @submit.prevent="onSubmit">...</form>
@@ -305,5 +281,4 @@ DOM 내 템플릿(HTML 파일에 직접 작성된 템플릿)을 사용할 때, 
 
 ![디렉티브 문법 그래프](./images/directive.png)
 
-<!-- https://www.figma.com/file/BGWUknIrtY9HOmbmad0vFr/Directive -->
-<!-- https://www.figma.com/file/al5C8iirhnfOKZ6izKwDw4/Directive-(ko-kr) -->
+<!-- https://www.figma.com/file/BGWUknIrtY9HOmbmad0vFr/Directive OR https://www.figma.com/file/al5C8iirhnfOKZ6izKwDw4/Directive-(ko-kr) -->
diff --git a/src/guide/extras/reactivity-transform.md b/src/guide/extras/reactivity-transform.md
index 8aeedb64..cf4bbbdd 100644
--- a/src/guide/extras/reactivity-transform.md
+++ b/src/guide/extras/reactivity-transform.md
@@ -1,12 +1,9 @@
 # Reactivity Transform {#reactivity-transform}
 
-:::danger 실험적 기능 폐기됨
-Reactivity Transform은 실험적인 기능이었으며 폐기되었습니다. [여기](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028)에서 폐기된 이유에 대해 읽어보세요.
+:::danger 실험적 기능 제거
+Reactivity Transform은 실험적 기능이었으며, 최신 3.4 릴리스에서 제거되었습니다. [이유에 대해서는 여기에서 확인하십시오](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028).
 
-Vue 코어에서는 향후 마이너 릴리스에서 이 기능이 완전히 제거될 예정입니다.
-
-- 이를 이용한 마이그레이션을 위해 [이 명령줄 도구](https://github.com/edison1105/drop-reactivity-transform)를 확인해보세요.
-- 여전히 사용하려는 경우 [Vue Macros](https://vue-macros.sxzz.moe/features/reactivity-transform.html) 플러그인을 통해 사용할 수 있습니다.
+여전히 사용하고자 한다면, 이제 [Vue Macros](https://vue-macros.sxzz.moe/features/reactivity-transform.html) 플러그인을 통해 사용할 수 있습니다.
 :::
 
 :::tip Composition API에 특화됨
@@ -286,8 +283,8 @@ Vue는 이러한 매크로에 대한 타이핑을 제공합니다(전역으로 
 
 ## 명시적으로 사용하기 {#explicit-opt-in}
 
-:::warning
-다음 내용은 Vue 3.3 버전 및 이하 버전에서만 적용됩니다. 3.4 버전 이상에서는 핵심 지원이 제거될 예정입니다. 변환을 계속 사용하려면 [Vue Macros](https://vue-macros.sxzz.moe/features/reactivity-transform.html)로 마이그레이션하십시오.
+:::danger 코어에서 지원 중단
+다음 내용은 Vue 버전 3.3 이하까지만 적용됩니다. Vue 코어 3.4 이상 및 `@vitejs/plugin-vue` 5.0 이상에서는 지원이 제거되었습니다. 변환을 계속 사용하려면 [Vue Macros](https://vue-macros.sxzz.moe/features/reactivity-transform.html)로 마이그레이션하는 것이 좋습니다.
 :::
 
 ### Vite {#vite}
diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 741292af..c936fffb 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -43,7 +43,8 @@ h('div', { class: 'bar', innerHTML: 'hello' })
 // 접두사인 `.`와 `^`를 사용하여 추가합니다.
 h('div', { '.name': 'some-name', '^width': '100' })
 
-// class와 style은 템플릿과 동일한 객체/배열 값을 지원합니다.
+// class와 style은 템플릿과 동일한
+// 객체/배열 값을 지원합니다.
 h('div', { class: [foo, { bar }], style: { color: 'red' } })
 
 // 이벤트 리스너는 onXxx로 전달해야 합니다.
@@ -240,11 +241,23 @@ Vue의 타입 정의는 TSX 사용에 대한 타입 추론을 제공합니다. T
 
 ### JSX 타입 추론 {#jsx-type-inference}
 
-JSX를 변환하는 것과 동일한 방식으로 Vue의 JSX도 다른 타입 정의가 필요합니다. 현재 Vue의 타입은 자동으로 Vue의 JSX 타입을 전역으로 등록합니다. 이는 전역 JSX 네임스페이스가 존재하는 것에 의존하는 코드와 충돌을 일으킬 수 있으므로, 특히 React와 같이 JSX 타입 추론이 필요한 다른 라이브러리와 함께 사용할 때 문제가 될 수 있습니다. 3.3 버전부터 Vue는 TypeScript의 [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) 옵션을 통해 JSX 네임스페이스를 지정할 수 있는 기능을 지원합니다. 3.4 버전에서는 기본적인 전역 JSX 네임스페이스 등록을 제거할 예정입니다.
+Vue의 JSX도 변환과 마찬가지로 다른 타입 정의가 필요합니다.
 
-TSX 사용자의 경우, 3.3 버전으로 업그레이드한 후에 `tsconfig.json`에서 [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource)를 `'vue'`로 설정하는 것이 좋습니다. 이렇게 하면 새로운 동작으로 전환할 수 있으며, 3.4 버전이 출시될 때 원활하게 업그레이드할 수 있습니다.
+Vue 3.4부터 Vue는 더 이상 전역 `JSX` 네임스페이스를 암시적으로 등록하지 않습니다. TypeScript에 Vue의 JSX 타입 정의를 사용하도록 지시하려면 `tsconfig.json`에 다음을 포함시켜야 합니다:
 
-전역 `JSX` 네임스페이스의 존재에 의존하는 코드가 있는 경우 `vue/jsx`를 명시적으로 참조하여 정확한 3.4 버전 이전의 전역 동작을 유지할 수 있습니다.
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+    // ...
+  }
+}
+```
+
+파일 상단에 `/* @jsxImportSource vue */` 주석을 추가하여 파일별로 선택적으로 사용할 수도 있습니다.
+
+전역 `JSX` 네임스페이스의 존재에 의존하는 코드가 있다면, 프로젝트에서 `vue/jsx`를 명시적으로 가져오거나 참조하여 3.4 이전의 정확한 전역 동작을 유지할 수 있습니다. 이는 전역 `JSX` 네임스페이스를 등록합니다.
 
 ## 렌더 함수 레시피 {#render-function-recipes}
 
diff --git a/src/guide/extras/ways-of-using-vue.md b/src/guide/extras/ways-of-using-vue.md
index 4bd9d93c..68d783bd 100644
--- a/src/guide/extras/ways-of-using-vue.md
+++ b/src/guide/extras/ways-of-using-vue.md
@@ -77,7 +77,7 @@ Vue는 주로 웹 앱을 구축하기 위해 설계되었지만,
 브라우저에만 국한되지는 않습니다.
 다음을 수행할 수 있습니다:
 
-- [Electron](https://www.electronjs.org/) 또는 [Tauri](https://tauri.studio/en/)로 데스톱 앱 생성.
+- [Electron](https://www.electronjs.org/) 또는 [Tauri](https://tauri.app)로 데스톱 앱 생성.
 - [Ionic Vue](https://ionicframework.com/docs/vue/overview)로 모바일 앱 생성.
 - 동일한 코드를 기반으로 [Quasar](https://quasar.dev/)를 사용하여 데스크톱 및 모바일 앱 생성.
 - Vue의 [Custom Renderer API](/api/custom-renderer)를 사용하여 [WebGL](https://troisjs.github.io/) 또는 [터미널](https://github.com/ycmjason/vuminal)을 대상으로 하는 커스텀 렌더러를 생성할 수 있습니다!
diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index f252a4e9..6ec8887a 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -5,10 +5,10 @@ footer: false
 # 소개 {#introduction}
 
 :::info 당신은 현재 Vue 3에 대한 문서를 읽고 있습니다!
-- Vue 2 지원이 2023년 12월 31일에 종료됩니다. 자세한 내용은 [Vue 2 Extended LTS](https://v2.vuejs.org/lts/)에서 확인하세요.
-- Vue 2 문서가 [v2.ko.vuejs.org](https://v2.ko.vuejs.org/)로 이동되었습니다.
-- Vue 2에서 업그레이드 하시려면 [마이그레이션 가이드](https://v3-migration.vuejs.org/)를 확인하십시오.
-:::
+
+- Vue 2 지원은 **2023년 12월 31일**에 종료되었습니다. [Vue 2 EOL](https://v2.vuejs.org/eol/)에 대해 자세히 알아보세요.
+- Vue 2에서 업그레이드 중이신가요? [마이그레이션 가이드](https://v3-migration.vuejs.org/)를 확인하세요.
+  :::
 
 <style src="@theme/styles/vue-mastery.css"></style>
 <div class="vue-mastery-link">
@@ -25,8 +25,7 @@ footer: false
 
 ## Vue는 무엇일까요? {#what-is-vue}
 
-Vue( **view** 와 마찬가지로 /vjuː/ 라고 발음합니다 )는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다.
-표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다.
+Vue( **view** 와 마찬가지로 /vjuː/ 라고 발음합니다 )는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다.
 
 아주 단순한 예제를 한번 볼까요:
 
@@ -88,9 +87,7 @@ const count = ref(0)
 
 - **반응성(Reactivity)**: Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.
 
-이미 Vue에 대해 궁금한 점이 있을 수 있으나 조급해하지 마세요.
-이후 문서에서 모든 세부 사항을 다 다룰 것입니다.
-지금은 Vue가 제공하는 것에 대한 기본적인 수준의 이해를 할 수 있도록 따라 읽어보시기를 바랍니다.
+이미 Vue에 대해 궁금한 점이 있을 수 있으나 조급해하지 마세요. 이후 문서에서 모든 세부 사항을 다 다룰 것입니다. 지금은 Vue가 제공하는 것에 대한 기본적인 수준의 이해를 할 수 있도록 따라 읽어보시기를 바랍니다.
 
 :::tip 전제조건
 나머지 문서는 HTML, CSS, JavaScript에 대한 기본적인 지식을 가정합니다. 프론트엔드 개발이 처음이라면, 첫 단계로 프레임워크에 바로 뛰어드는 것은 좋지 않을 수 있습니다 - 기본을 익힌 다음 돌아오세요! 필요한 경우 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML), [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)에 대한 이 개요를 통해 지식 수준을 확인할 수 있습니다. 다른 프레임워크에 대한 경험은 도움이 되지만 필수는 아닙니다.
@@ -98,10 +95,7 @@ const count = ref(0)
 
 ## 프로그레시브 프레임워크 {#the-progressive-framework}
 
-Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루는 프레임워크이자 생태계입니다.
-그러나 웹은 매우 다양해 구축하려는 것의 형태와 규모가 크게 다를 수 있습니다.
-이를 염두에 두고 Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다.
-사용 사례에 따라 Vue를 다양한 방식으로 사용할 수 있습니다:
+Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루는 프레임워크이자 생태계입니다. 그러나 웹은 매우 다양해 구축하려는 것의 형태와 규모가 크게 다를 수 있습니다. 이를 염두에 두고 Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다. 사용 사례에 따라 Vue를 다양한 방식으로 사용할 수 있습니다:
 
 - 빌드 과정 없이 정적 HTML에 적용
 - 모든 페이지에 웹 컴포넌트로 추가
@@ -110,23 +104,15 @@ Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루
 - Jamstack / 정적 사이트 생성 (SSG: Static-Site-Generation)
 - 데스크톱, 모바일, WebGL 또는 터미널을 대상으로 하는 경우
 
-이러한 개념이 두렵더라도 걱정하지 마십시오!
-튜토리얼과 가이드는 HTML과 JavaScript의 기본적인 지식만 요구하며 전문가가 아니더라도 따라 할 수 있습니다.
+이러한 개념이 두렵더라도 걱정하지 마십시오! 튜토리얼과 가이드는 HTML과 JavaScript의 기본적인 지식만 요구하며 전문가가 아니더라도 따라 할 수 있습니다.
 
-위 목록에서 언급하는 용어들의 의미가 궁금하거나 어떻게 하면 당신의 기술 스택과 Vue를 잘 조합하여 사용할 수 있는지 관심이 있는 숙련된 개발자라면,
-이에 대해 자세히 설명된 [Vue 사용 방법](/guide/extras/ways-of-using-vue)을 살펴보세요.
+위 목록에서 언급하는 용어들의 의미가 궁금하거나 어떻게 하면 당신의 기술 스택과 Vue를 잘 조합하여 사용할 수 있는지 관심이 있는 숙련된 개발자라면, 이에 대해 자세히 설명된 [Vue 사용 방법](/guide/extras/ways-of-using-vue)을 살펴보세요.
 
-이러한 유연성에도 불구하고 Vue 작동 방식에 대한 핵심 지식은 이러한 모든 사용 사례에서 공유됩니다.
-비록 지금은 초보자일지라도 미래에 더 야심 찬 목표를 달성하기 위해 성장함에 따라 그 과정에서 얻은 지식은 계속 유용할 것입니다.
-베테랑이라면 해결하려는 문제를 기반으로 Vue를 활용하는 최적의 방법을 선택하면서 같은 생산성을 유지할 수 있습니다.
-이러한 이유로 Vue를 "프로그레시브 프레임워크(Progressive Framework)"라고 부릅니다.
-이것은 당신과 함께 성장하고 당신의 요구에 적응할 수 있는 프레임워크입니다.
+이러한 유연성에도 불구하고 Vue 작동 방식에 대한 핵심 지식은 이러한 모든 사용 사례에서 공유됩니다. 비록 지금은 초보자일지라도 미래에 더 야심 찬 목표를 달성하기 위해 성장함에 따라 그 과정에서 얻은 지식은 계속 유용할 것입니다. 베테랑이라면 해결하려는 문제를 기반으로 Vue를 활용하는 최적의 방법을 선택하면서 같은 생산성을 유지할 수 있습니다. 이러한 이유로 Vue를 "프로그레시브 프레임워크(Progressive Framework)"라고 부릅니다. 이것은 당신과 함께 성장하고 당신의 요구에 적응할 수 있는 프레임워크입니다.
 
 ## 싱글 파일 컴포넌트 {#single-file-components}
 
-빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 **싱글 파일 컴포넌트**(Single-File Component: **SFC**, `*.vue` 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성합니다.
-Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화합니다.
-이전에 보았던 예제는 다음과 같이 SFC 형식으로 작성할 수 있습니다:
+빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 **싱글 파일 컴포넌트**(Single-File Component: **SFC**, `*.vue` 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성합니다. Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화합니다. 이전에 보았던 예제는 다음과 같이 SFC 형식으로 작성할 수 있습니다:
 
 <div class="options-api">
 
@@ -174,9 +160,7 @@ button {
 
 </div>
 
-SFC는 Vue를 빌드 방식으로 사용하는 경우, 컴포넌트를 만들고 정의하는데 권장되는 방법입니다.
-[SFC를 왜 그리고 어떻게 사용해야 할까](/guide/scaling-up/sfc)에서 자세히 알아볼 수 있습니다.
-하지만 지금은 Vue가 모든 빌드 도구 설정을 처리한다는 점만 알아두세요.
+SFC는 Vue를 빌드 방식으로 사용하는 경우, 컴포넌트를 만들고 정의하는데 권장되는 방법입니다. [SFC를 왜 그리고 어떻게 사용해야 할까](/guide/scaling-up/sfc)에서 자세히 알아볼 수 있습니다. 하지만 지금은 Vue가 모든 빌드 도구 설정을 처리한다는 점만 알아두세요.
 
 ## API 스타일 {#api-styles}
 
@@ -184,13 +168,13 @@ Vue 컴포넌트는 **옵션(Options) API**와 **컴포지션(Composition) API**
 
 ### 옵션 API {#options-api}
 
-옵션 API를 사용하여 옵션의  `data`, `methods` 및 `mounted` 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다.
-옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 `this`에 노출됩니다:
+옵션 API를 사용하여 옵션의  `data`, `methods` 및 `mounted` 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 `this`에 노출됩니다:
 
 ```vue
 <script>
 export default {
-  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
+  // data()에서 반환된 속성들은 반응적인 상태가 되어
+  // `this`에 노출됩니다.
   data() {
     return {
       count: 0
@@ -205,7 +189,8 @@ export default {
     }
   },
 
-  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
+  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의
+  // 여러 단계에서 호출됩니다.
   // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
   mounted() {
     console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
@@ -222,14 +207,9 @@ export default {
 
 ### 컴포지션 API {#composition-api}
 
-컴포지션 API를 사용하는 경우, `import`해서 가져온 API 함수들을 사용하여 컴포넌트의 로직를 정의합니다.
-SFC에서 컴포지션 API는 일반적으로 [`<script setup>`](/api/sfc-script-setup)과 함께 사용됩니다.
-`setup` 속성은 Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고,
-컴파일 시 의도한대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트입니다.
-예를 들어 `<script setup>`에 `import` 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있습니다.
+컴포지션 API를 사용하는 경우, `import`해서 가져온 API 함수들을 사용하여 컴포넌트의 로직를 정의합니다. SFC에서 컴포지션 API는 일반적으로 [`<script setup>`](/api/sfc-script-setup)과 함께 사용됩니다. `setup` 속성은 Vue가 더 적은 코드 문맥으로 컴포지션 API를 사용하고, 컴파일 시 의도한대로 올바르게 동작할 수 있게 코드를 변환하도록 하는 힌트입니다. 예를 들어 `<script setup>`에 `import` 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있습니다.
 
-아래 예제는 위 예제와 완전히 동일한 템플릿을 사용하는 동일한 컴포넌트 이지만,
-Composition API와 `<script setup>`을 사용했습니다:
+아래 예제는 위 예제와 완전히 동일한 템플릿을 사용하는 동일한 컴포넌트 이지만, Composition API와 `<script setup>`을 사용했습니다:
 
 ```vue
 <script setup>
@@ -258,25 +238,17 @@ onMounted(() => {
 
 ### 무엇을 선택해야 할까요? {#which-to-choose}
 
-두 API 스타일 모두 일반적인 사용 사례를 완벽하게 다룰 수 있습니다.
-이것들은 정확히 동일한 기본 시스템에 의해 구동되는 서로 다른 인터페이스입니다.
-사실, 옵션 API는 컴포지션 API 위에 구현됩니다!
-Vue에 대한 기본 개념과 지식은 두 스타일과 상관없이 동일합니다.
+두 API 스타일 모두 일반적인 사용 사례를 완벽하게 다룰 수 있습니다. 이것들은 정확히 동일한 기본 시스템에 의해 구동되는 서로 다른 인터페이스입니다. 사실, 옵션 API는 컴포지션 API 위에 구현됩니다! Vue에 대한 기본 개념과 지식은 두 스타일과 상관없이 동일합니다.
 
-옵션 API는 일반적으로 OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는 "컴포넌트 인스턴스"(예제에서 볼 수 있는 `this`)의 개념을 중심으로 합니다.
-또한 반응형 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행하여 초보자에게 더 친숙합니다.
+옵션 API는 일반적으로 OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는 "컴포넌트 인스턴스"(예제에서 볼 수 있는 `this`)의 개념을 중심으로 합니다. 또한 반응형 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행하여 초보자에게 더 친숙합니다.
 
-컴포지션 API는 함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둡니다.
-보다 자유로운 형식이며 Vue에서 반응형이 효과적으로 사용되는 방식에 대한 이해가 필요합니다.
-그 대가로 이 유연성은 로직을 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 합니다.
+컴포지션 API는 함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둡니다. 보다 자유로운 형식이며 Vue에서 반응형이 효과적으로 사용되는 방식에 대한 이해가 필요합니다. 그 대가로 이 유연성은 로직을 구성하고 재사용하기 위한 보다 강력한 패턴을 가능하게 합니다.
 
 [컴포지션 API FAQ](/guide/extras/composition-api-faq)에서 두 스타일의 비교 및 컴포지션 API의 잠재적 이점에 대해 자세히 알아볼 수 있습니다.
 
 Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습니다:
 
-- 학습을 목적으로 하는 경우, 당신이 쉽게 이해할 수 있어보이는 스타일로 가십시오.
-  다시 말하지만, 대부분의 핵심 개념은 두 스타일 간에 공유됩니다.
-  나중에 언제든지 다른 스타일을 선택할 수 있습니다.
+- 학습을 목적으로 하는 경우, 당신이 쉽게 이해할 수 있어보이는 스타일로 가십시오. 다시 말하지만, 대부분의 핵심 개념은 두 스타일 간에 공유됩니다. 나중에 언제든지 다른 스타일을 선택할 수 있습니다.
 
 - 제품용(production)으로 사용하는 경우:
 
@@ -284,8 +256,7 @@ Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습
 
   - Vue로 규모가 있는 앱의 전체를 구축하려는 경우 컴포지션 API + 단일파일 컴포넌트(SFC)를 사용하십시오.
 
-학습 단계에서 한 가지 스타일만 고집할 필요는 없습니다.
-이후 문서에서는 두 가지 스타일의 코드 샘플을 제공하며, 왼쪽 사이드바의 상단에 있는 **API 스타일 설정**을 사용하여 언제든지 두 스타일 사이를 전환할 수 있습니다.
+학습 단계에서 한 가지 스타일만 고집할 필요는 없습니다. 이후 문서에서는 두 가지 스타일의 코드 샘플을 제공하며, 왼쪽 사이드바의 상단에 있는 **API 스타일 설정**을 사용하여 언제든지 두 스타일 사이를 전환할 수 있습니다.
 
 ## 여전히 궁금한 것이 있나요? {#still-got-questions}
 
@@ -293,9 +264,7 @@ Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습
 
 ## 학습 방법 선택 {#pick-your-learning-path}
 
-개발자마다 학습 스타일이 다릅니다.
-선호하는 학습 방법을 자유롭게 선택하세요.
-가능하면 모든 컨텐츠를 살펴보는 것이 좋습니다.
+개발자마다 학습 스타일이 다릅니다. 선호하는 학습 방법을 자유롭게 선택하세요. 가능하면 모든 컨텐츠를 살펴보는 것이 좋습니다.
 
 <div class="vt-box-container next-steps">
   <a class="vt-box" href="/tutorial/">
diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md
index 05c9aa68..3e25aaa9 100644
--- a/src/guide/quick-start.md
+++ b/src/guide/quick-start.md
@@ -2,6 +2,10 @@
 footer: false
 ---
 
+<script setup>
+import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
+</script>
+
 # 빠른 시작 {#quick-start}
 
 사용 사례 및 기본 설정에 따라 빌드 과정을 포함하거나 포함하지 않고 Vue를 사용할 수 있습니다.
@@ -25,9 +29,38 @@ footer: false
 
 이 섹션에서는 로컬 컴퓨터에서 Vue [싱글 페이지 애플리케이션](/guide/extras/ways-of-using-vue.html#single-page-application-spa)을 스캐폴드하는 방법을 소개합니다. 생성된 프로젝트는 [Vite](https://vitejs.dev)를 기반으로 빌드 설정을 사용하고 Vue [싱글 파일 컴포넌트](/guide/scaling-up/sfc)(SFC)를 사용할 수 있도록 합니다.
 
-최신 버전의 [Node.js](https://nodejs.org/)가 설치되어 있고 현재 작업 디렉터리가 프로젝트를 만들려는 디렉터리인지 확인하세요. 명령줄에서 다음 명령을 실행합니다(`>` 기호 제외):
+최신 버전의 [Node.js](https://nodejs.org/)가 설치되어 있고 현재 작업 디렉터리가 프로젝트를 만들려는 디렉터리인지 확인하세요. 명령줄에서 다음 명령을 실행합니다(`$` 기호 제외):
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="npm">
+
+  ```sh
+  $ npm create vue@latest
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="pnpm">
+
+  ```sh
+  $ pnpm create vue@latest
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="yarn">
 
-<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt;</span> <span style="color:#A6ACCD;">npm init vue@latest</span></span></code></pre></div>
+  ```sh
+  $ yarn create vue@latest
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="bun">
+
+  ```sh
+  $ bun create vue@latest
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
 
 이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 [create-vue](https://github.com/vuejs/create-vue)를 설치 및 실행합니다. TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다:
 
@@ -46,23 +79,84 @@ footer: false
 
 옵션에 대해 확신이 서지 않는다면 일단 엔터키를 눌러 `No`를 선택하면 됩니다. 프로젝트가 생성되면 지침에 따라 종속 요소를 설치하고 개발 서버를 시작합니다:
 
-<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#888;">your-project-name</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm install</span></span>
-<span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run dev</span></span>
-<span class="line"></span></code></pre></div>
+<VTCodeGroup>
+  <VTCodeGroupTab label="npm">
 
-이제 첫 번째 Vue 프로젝트가 실행 중일 것입니다! 생성된 프로젝트의 예제 컴포넌트는 [Options API](/guide/introduction.html#composition-api) 대신  `<script setup>`과 [Composition API](/guide/introduction.html#options-api)를 사용하여 작성되었음을 유의하세요. 다음은 몇 가지 추가 팁입니다:
+  ```sh
+  $ cd <your-project-name>
+  $ npm install
+  $ npm run dev
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="pnpm">
+
+  ```sh
+  $ cd <your-project-name>
+  $ pnpm install
+  $ pnpm run dev
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="yarn">
 
+  ```sh
+  $ cd <your-project-name>
+  $ yarn
+  $ yarn dev
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="bun">
+
+  ```sh
+  $ cd <your-project-name>
+  $ bun install
+  $ bun run dev
+  ```
+
+  </VTCodeGroupTab>
+</VTCodeGroup>
+
+이제 첫 번째 Vue 프로젝트가 실행 중일 것입니다! 생성된 프로젝트의 예제 컴포넌트는 [Options API](/guide/introduction.html#composition-api) 대신  `<script setup>`과 [Composition API](/guide/introduction.html#options-api)를 사용하여 작성되었음을 유의하세요. 다음은 몇 가지 추가 팁입니다:
 
 - 권장 IDE 설정은 [Visual Studio Code](https://code.visualstudio.com/) + [Volar extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)입니다. 다른 편집기를 사용하는 경우 [IDE 지원 섹션](/guide/scaling-up/tooling.html#ide-support)을 확인하세요.
 - 백엔드 프레임워크와의 통합을 포함한 자세한 툴링 내용은 [툴링 가이드](/guide/scaling-up/tooling)에서 확인할 수 있습니다.
 - 기본 빌드 도구인 Vite에 대해 자세히 알아보려면 [Vite 문서](https://vitejs.dev)를 확인하세요.
 - 타입스크립트를 사용하기로 선택한 경우 [타입스크립트 사용 가이드](typescript/overview)를 확인하세요.
 
-When you are ready to ship your app to production, run the following:
+앱을 프로덕션으로 출시할 준비가 되면 다음을 실행하세요:
+
+<VTCodeGroup>
+  <VTCodeGroupTab label="npm">
+
+  ```sh
+  $ npm run build
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="pnpm">
+
+  ```sh
+  $ pnpm run build
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="yarn">
+
+  ```sh
+  $ yarn build
+  ```
+
+  </VTCodeGroupTab>
+  <VTCodeGroupTab label="bun">
+
+  ```sh
+  $ bun run build
+  ```
 
-<div class="language-sh"><pre><code><span class="line"><span style="color:var(--vt-c-green);">&gt; </span><span style="color:#A6ACCD;">npm run build</span></span>
-<span class="line"></span></code></pre></div>
+  </VTCodeGroupTab>
+</VTCodeGroup>
 
 이렇게 하면 프로젝트의 `./dist` 디렉터리에 프로덕션에 사용할 수 있는 앱 빌드가 생성됩니다. 프로덕션 배포 가이드](/guide/best-practices/production-deployment)를 확인하여 앱을 프로덕션에 배포하는 방법에 대해 자세히 알아보세요.
 
diff --git a/src/guide/typescript/overview.md b/src/guide/typescript/overview.md
index 2d156af5..df5e8db2 100644
--- a/src/guide/typescript/overview.md
+++ b/src/guide/typescript/overview.md
@@ -42,12 +42,14 @@ Vite 기반 설정을 사용하면 개발 서버와 번들러가 트랜스파일
 
 `tsconfig.json` 을 수동으로 구성할 때 몇 가지 알고 있으면 좋은 옵션들은 다음과 같습니다.
 
-- [`compilerOptions.isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) 옵션은 `true`로 설정됩니다. 이는 Vite가 TypeScript를 변환하기 위해 [esbuild](https://esbuild.github.io/)를 사용하며, 단일 파일 변환 제한에 영향을 받기 때문입니다. [`compilerOptions.verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)는 [`isolatedModules`](https://github.com/microsoft/TypeScript/issues/53601)의 상위 집합이며 좋은 선택이 될 수 있습니다 - 이것은 `[@vue/tsconfig](https://github.com/vuejs/tsconfig)`에서 사용하는 것입니다.
+- [`compilerOptions.isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) 옵션은 `true`로 설정됩니다. 이는 Vite가 TypeScript를 변환하기 위해 [esbuild](https://esbuild.github.io/)를 사용하며, 단일 파일 변환 제한에 영향을 받기 때문입니다. [`compilerOptions.verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)는 [`isolatedModules`](https://github.com/microsoft/TypeScript/issues/53601)의 상위 집합이며 좋은 선택이 될 수 있습니다 - 이것은 [`@vue/tsconfig`](https://github.com/vuejs/tsconfig)에서 사용하는 것입니다.
 
 - 옵션 API를 사용하는 경우 컴포넌트 옵션에서 <code>this</code> 타입 검사를 사용 하려면 [`compilerOptions.strict`](https://www.typescriptlang.org/tsconfig#strict) 를 <code>true</code> 로 설정해야 합니다(또는 `strict` 플래그의 일부인 [`compilerOptions.noImplicitThis`](https://www.typescriptlang.org/tsconfig#noImplicitThis) 활성화). 그렇지 않으면 `this`는  `any` 로 취급 됩니다.
 
 - 빌드 도구에서 resolver aliases를 설정한 경우(예: `create-vue` 프로젝트에서 기본적으로 설정된 `@/*` ) 타입스크립트 [`compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths) 설정도 필요합니다.
 
+- Vue와 함께 TSX를 사용하려는 경우, [`compilerOptions.jsx`](https://www.typescriptlang.org/tsconfig#jsx)를 `"preserve"`로 설정하고, [`compilerOptions.jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource)를 `"vue"`로 설정하세요.
+
 참고항목
 
 - [공식 타입스크립트 컴파일러 옵션 문서](https://www.typescriptlang.org/docs/handbook/compiler-options)
@@ -127,7 +129,8 @@ export default defineComponent({
 })
 ```
 
-참고사항: 
+참고사항:
+
 - [웹팩에서 트리쉐이킹](/api/general.html#note-on-webpack-treeshaking)
 - [`defineComponent`를 위한 타입 테스트](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
 
diff --git a/src/partners/partners.json b/src/partners/partners.json
index 787fe3ba..59ba336d 100644
--- a/src/partners/partners.json
+++ b/src/partners/partners.json
@@ -53,6 +53,7 @@
   {
     "name": "Monterail",
     "logo": "monterail.png",
+    "hero": "monterail-hero.png",
     "flipLogo": true,
     "intro": "Monterail is a full-service software development company from Poland. Since 2010, we have been building innovative software for start-ups, SMBs, and enterprises from various industries globally. Our Vue experts, using battle-tested technologies and frameworks, have delivered more than 30 Vue-based projects.",
     "description": [
@@ -113,26 +114,6 @@
     "hiring": "https://www.curotec.com/careers?source=vuejs-partner",
     "platinum": true
   },
-  {
-    "name": "Tighten",
-    "logo": "tighten.svg",
-    "flipLogo": true,
-    "intro": "Treat people well, solve the right problems, build spectacular software—that's how we roll. We're ultra-focused and deeply experienced in the technology powering modern business, including Vue.js. Via our signature method, our meticulously assembled team delivers unparalleled service, helping you do more with your software, and do right by your business.",
-    "description": [
-      "Empathetically opinionated, expertly executed development. That's what we deliver.",
-      "At Tighten, we sweat the hell out of the details to give your app the fit-and-finish today's users expect, while giving you the clarity and confidence to charge ahead.",
-      "Whether you’re looking to simply enhance a user interface or build a sophisticated JavaScript-based application, we’ve got you covered. Vue.js is a flexible and robust framework, capable of powering a complex single-page application. We typically combine it with a Laravel-based API.",
-      "If you're building a development team, you know it takes time and diligence, and it could be the make-or-break factor for your business. Companies turn to Tighten at key turning points, to propel their technology forward while they assemble the <b>right</b> team for their business."
-    ],
-    "region": ["North America", "Europe", "Latin America"],
-    "proficiencies": ["Vue", "Nuxt", "Laravel", "Inertia", "Tailwind"],
-    "website": {
-      "text": "tighten.com",
-      "url": "https://tighten.com/vue"
-    },
-    "contact": "hello@tighten.co",
-    "platinum": true
-  },
   {
     "name": "Redberry",
     "logo": "redberry.png",
diff --git a/src/public/images/partners/monterail-hero.jpg b/src/public/images/partners/monterail-hero.jpg
deleted file mode 100644
index 48fc7d48..00000000
Binary files a/src/public/images/partners/monterail-hero.jpg and /dev/null differ
diff --git a/src/public/images/partners/monterail-hero.png b/src/public/images/partners/monterail-hero.png
new file mode 100644
index 00000000..7f869a55
Binary files /dev/null and b/src/public/images/partners/monterail-hero.png differ
diff --git a/src/style-guide/rules-strongly-recommended.md b/src/style-guide/rules-strongly-recommended.md
index f023a88f..6e85f6ae 100644
--- a/src/style-guide/rules-strongly-recommended.md
+++ b/src/style-guide/rules-strongly-recommended.md
@@ -158,36 +158,6 @@ components/
 
 </div>
 
-
-## 단일 인스턴스 컴포넌트 이름 {#single-instance-component-names}
-
-**활성 인스턴스가 하나만 있어야 하는 컴포넌트는 `The` 접두사로 시작하여 하나만 있을 수 있음을 나타내야 합니다.
-
-이는 컴포넌트가 단일 페이지에서만 사용된다는 뜻이 아니라 _페이지당_ 한 번만 사용된다는 뜻입니다. 이러한 컴포넌트는 앱 내 컨텍스트가 아닌 앱에 고유한 것이므로 어떤 prop도 허용하지 않습니다. prop을 추가해야 할 필요가 있다면, 이 컴포넌트가 실제로 페이지당 _현재_ 한 번만 사용되는 재사용 가능한 컴포넌트라는 것을 나타내는 좋은 신호입니다.
-
-
-<div class="style-example style-example-bad">
-<h3>Bad</h3>
-
-```
-components/
-|- Heading.vue
-|- MySidebar.vue
-```
-
-</div>
-
-<div class="style-example style-example-good">
-<h3>Good</h3>
-
-```
-components/
-|- TheHeading.vue
-|- TheSidebar.vue
-```
-
-</div>
-
 ## 긴밀하게 결합된 컴포넌트 이름 {#tightly-coupled-component-names}
 
 **부모 컴포넌트와 긴밀하게 결합된 자식 컴포넌트는 부모 컴포넌트 이름을 접두사로 포함해야 합니다.**