diff --git a/packages/vue-language-service/data/template/ko.json b/packages/vue-language-service/data/template/ko.json
index 2f367ce8ec..2b64676fa8 100644
--- a/packages/vue-language-service/data/template/ko.json
+++ b/packages/vue-language-service/data/template/ko.json
@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "value": "\n**싱글** 엘리먼트 또는 컴포넌트에 애니메이션 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 트랜지션 CSS 클래스 이름 자동 생성에 사용.\n     * 예를 들어 `name: 'fade'`는 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됨.\n     */\n    name?: string\n    /**\n     * CSS 트랜지션 클래스를 적용할지 여부입니다.\n     * 기본 값: true\n     */\n    css?: boolean\n    /**\n     * 트랜지션 종료 타이밍을 결정하기 위해,\n     * 대기할 트랜지션 이벤트의 유형을 지정.\n     * 기본 동작은 지속 시간이 더 긴 유형을\n     * 자동으로 감지.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 명시적으로 트랜지션의 지속 시간을 지정.\n     * 기본 동작은 루트 트랜지션 엘리먼트의 첫 번째\n     * `transitionend` 또는 `animationend` 이벤트를 기다리는 것.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 진입/진출 트랜지션의 타이밍 순서를 제어.\n     * 기본 동작은 동시.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 최초 렌더링에 트랜지션을 적용할지 여부.\n     * 기본 값: false\n     */\n    appear?: boolean\n\n    /**\n     * 트랜지션 클래스를 커스텀하기 위한 props.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예제**:\n\n  간단한 엘리먼트:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 강제로 트랜지션(전환):\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n  \n  트랜지션 모드 + 등장 애니메이션을 가진 동적 컴포넌트:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  트랜지션 이벤트 수신:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n- **참고**: [가이드 - `<Transition>`](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
+        "value": "\n**싱글** 엘리먼트 또는 컴포넌트에 애니메이션 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 트랜지션 CSS 클래스 이름 자동 생성에 사용.\n     * 예를 들어 `name: 'fade'`는 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됨.\n     */\n    name?: string\n    /**\n     * CSS 트랜지션 클래스를 적용할지 여부입니다.\n     * 기본 값: true\n     */\n    css?: boolean\n    /**\n     * 트랜지션 종료 타이밍을 결정하기 위해,\n     * 대기할 트랜지션 이벤트의 유형을 지정.\n     * 기본 동작은 지속 시간이 더 긴 유형을\n     * 자동으로 감지.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 명시적으로 트랜지션의 지속 시간을 지정.\n     * 기본 동작은 루트 트랜지션 엘리먼트의 첫 번째\n     * `transitionend` 또는 `animationend` 이벤트를 기다리는 것.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 진입/진출 트랜지션의 타이밍 순서를 제어.\n     * 기본 동작은 동시.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 최초 렌더링에 트랜지션을 적용할지 여부.\n     * 기본 값: false\n     */\n    appear?: boolean\n\n    /**\n     * 트랜지션 클래스를 커스텀하기 위한 props.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예제**\n\n  간단한 엘리먼트:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 강제로 트랜지션(전환):\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n  \n  트랜지션 모드 + 등장 애니메이션을 가진 동적 컴포넌트:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  트랜지션 이벤트 수신:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n- **참고** [가이드 - `<Transition>`](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": [
@@ -39,7 +39,7 @@
       "name": "TransitionGroup",
       "description": {
         "kind": "markdown",
-        "value": "\n리스트의 **여러** 엘리먼트 또는 컴포넌트에 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 props에서 `mode`를 제외하고 두 개의 추가 props를 허용합니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면, 렌더는 프래그먼트처럼 취급함.\n     */\n    tag?: string\n    /**\n     * 이동중 트랜지션에 적용될 CSS 클래스를 커스텀.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **세부 사항**:\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 엘리먼트를 렌더링하지 않지만 `tag` prop을 통해 정의할 수 있습니다.\n\n  애니메이션이 제대로 작동하려면 `<transition-group>`의 모든 자식이 [**고유 키**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)를 가져야 합니다.\n\n  `<TransitionGroup>`은 CSS `transform`으로 이동 트랜지션을 지원합니다.\n  업데이트 후 화면에서 자식의 위치가 변경되면,\n  움직이는 CSS 클래스가 적용됩니다(`name` 속성에서 자동 생성되거나 `move-class` prop으로 구성됨).\n  이동 클래스가 적용될 때 CSS의 `transform` 속성이 \"트랜지션 가능\"이면,\n  [FLIP 기술](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 엘리먼트가 목적지까지 부드럽게 애니메이션됩니다.\n\n- **예제**:\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **참고**: [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
+        "value": "\n리스트의 **여러** 엘리먼트 또는 컴포넌트에 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 props에서 `mode`를 제외하고 두 개의 추가 props를 허용합니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면, 렌더는 프래그먼트처럼 취급함.\n     */\n    tag?: string\n    /**\n     * 이동중 트랜지션에 적용될 CSS 클래스를 커스텀.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **세부 사항**:\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 엘리먼트를 렌더링하지 않지만 `tag` prop을 통해 정의할 수 있습니다.\n\n  애니메이션이 제대로 작동하려면 `<transition-group>`의 모든 자식이 [**고유 키**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)를 가져야 합니다.\n\n  `<TransitionGroup>`은 CSS `transform`으로 이동 트랜지션을 지원합니다.\n  업데이트 후 화면에서 자식의 위치가 변경되면,\n  움직이는 CSS 클래스가 적용됩니다(`name` 속성에서 자동 생성되거나 `move-class` prop으로 구성됨).\n  이동 클래스가 적용될 때 CSS의 `transform` 속성이 \"트랜지션 가능\"이면,\n  [FLIP 기술](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 엘리먼트가 목적지까지 부드럽게 애니메이션됩니다.\n\n- **예제**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **참고** [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
       "attributes": [],
       "references": [
@@ -73,7 +73,7 @@
       "name": "KeepAlive",
       "description": {
         "kind": "markdown",
-        "value": "\n내부에 래핑된 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * `include`와 이름이 일치하는 컴포넌트만 캐시됨.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`와 이름이 일치하는 컴포넌트는 캐시되지 않음.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 수.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **세부 사항**:\n\n  `<KeepAlive>`로 래핑된 동적 컴포넌트는 비활성화 되면,\n  컴포넌트 인스턴스가 파괴되지 않고 캐시됩니다.\n\n  `<KeepAlive>`에는 언제나 활성화된 직계 자식의 컴포넌트 인스턴스가 하나만 있을 수 있습니다.\n\n  컴포넌트가 `<KeepAlive>` 내에서 토글되면,\n  `mounted` 및 `unmounted` 대신 `activated` 및 `deactivated` 생명 주기 훅이 호출됩니다.\n  이는 `<KeepAlive>`의 직계 자식과 모든 하위 항목에 적용됩니다.\n\n- **예제**:\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else`를 사용할 때,\n  한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 쉼표로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`를 활용한 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **참고**: [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
+        "value": "\n내부에 래핑된 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * `include`와 이름이 일치하는 컴포넌트만 캐시됨.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`와 이름이 일치하는 컴포넌트는 캐시되지 않음.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 수.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **세부 사항**:\n\n  `<KeepAlive>`로 래핑된 동적 컴포넌트는 비활성화 되면,\n  컴포넌트 인스턴스가 파괴되지 않고 캐시됩니다.\n\n  `<KeepAlive>`에는 언제나 활성화된 직계 자식의 컴포넌트 인스턴스가 하나만 있을 수 있습니다.\n\n  컴포넌트가 `<KeepAlive>` 내에서 토글되면,\n  `mounted` 및 `unmounted` 대신 `activated` 및 `deactivated` 생명 주기 훅이 호출됩니다.\n  이는 `<KeepAlive>`의 직계 자식과 모든 하위 항목에 적용됩니다.\n\n- **예제**\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else`를 사용할 때,\n  한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 쉼표로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`를 활용한 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **참고** [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
       "attributes": [],
       "references": [
@@ -107,7 +107,7 @@
       "name": "Teleport",
       "description": {
         "kind": "markdown",
-        "value": "\n슬롯 컨텐츠를 DOM 내 다른 위치에서 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상이 될 컨테이너를 지정.\n     * 셀렉터 또는 실제 엘리먼트일 수 있음.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면 컨텐츠가 대상이 될 컨테이너로\n     * 이동하지 않고 원래 위치에 남아 있음.\n     * 동적으로 변경할 수 있음.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **예제**:\n\n  대상이 될 컨테이너 지정:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **참고**: [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
+        "value": "\n슬롯 컨텐츠를 DOM 내 다른 위치에서 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상이 될 컨테이너를 지정.\n     * 셀렉터 또는 실제 엘리먼트일 수 있음.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면 컨텐츠가 대상이 될 컨테이너로\n     * 이동하지 않고 원래 위치에 남아 있음.\n     * 동적으로 변경할 수 있음.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **예제**\n\n  대상이 될 컨테이너 지정:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **참고** [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
       },
       "attributes": [],
       "references": [
@@ -141,7 +141,7 @@
       "name": "Suspense",
       "description": {
         "kind": "markdown",
-        "value": "\n컴포넌트 트리에서 중첩된 비동기 의존성을 조정하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **이벤트**:\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **세부 사항**:\n\n  `<Suspense>`는 `#default` 슬롯과 `#fallback` 슬롯이라는 두 개의 슬롯을 사용합니다.\n  메모리에서 기본 슬롯을 렌더링하는 동안,\n  폴백 슬롯의 대체 컨텐츠를 노출합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면,\n  기본 슬롯을 표시하기 전에 모든 것이 해결될 때까지 대기합니다.\n\n- **참고**: [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
+        "value": "\n컴포넌트 트리에서 중첩된 비동기 의존성을 조정하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **이벤트**:\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **세부 사항**:\n\n  `<Suspense>`는 `#default` 슬롯과 `#fallback` 슬롯이라는 두 개의 슬롯을 사용합니다.\n  메모리에서 기본 슬롯을 렌더링하는 동안,\n  폴백 슬롯의 대체 컨텐츠를 노출합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면,\n  기본 슬롯을 표시하기 전에 모든 것이 해결될 때까지 대기합니다.\n\n- **참고** [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
       },
       "attributes": [],
       "references": [
@@ -175,7 +175,7 @@
       "name": "component",
       "description": {
         "kind": "markdown",
-        "value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **세부 사항**:\n\n  `is`라는 prop의 값으로 렌더링할 실제 컴포넌트가 결정됩니다:\n\n  - 문자열인 경우, HTML 태그 이름 또는 컴포넌트로 등록된 이름일 수 있음.\n\n  - 컴포넌트의 정의에 직접 바인딩될 수도 있음.\n\n- **예제**:\n\n  등록된 이름으로 컴포넌트 렌더링(옵션 API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  정의에 따른 컴포넌트 렌더링(`<script setup>`이 있는 컴포지션 API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [빌트인 컴포넌트](./built-in-components)는 모두 `is`에 전달할 수 있지만,\n  이름으로 전달하려면 등록해야 합니다.\n  예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  이름이 아닌 컴포넌트 자체를 `is`에 전달하는 경우,\n  등록이 필요하지 않습니다(예를 들어 `<script setup>`에서).\n\n  `v-model`이 `<component>` 태그에 사용되면, 템플릿 컴파일러는 다른 컴포넌트와 마찬가지로 이를 `modelValue` prop 및 `update:modelValue` 이벤트 리스너로 확장합니다.\n  그러나 이것은 `<input>` 또는 `<select>`와 같은 기본 HTML 엘리먼트와 호환되지 않습니다.\n  결과적으로 동적으로 생성된 기본 엘리먼트와 함께 `v-model`을 사용하면 작동하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n  \n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 'input'이 기본 HTML 엘리먼트이므로 작동하지 않음 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  실제로는 기본 양식(form) 필드가 일반적으로 실제 앱의 컴포넌트에 래핑되기 때문에 이러한 예외적인 경우는 일반적이지 않습니다.\n  네이티브 엘리먼트를 직접 사용해야 하는 경우, `v-model`을 속성과 이벤트로 수동으로 분할할 수 있습니다.\n\n- **참고**: [가이드 - 컴포넌트 기초: 동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
+        "value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **세부 사항**:\n\n  `is`라는 prop의 값으로 렌더링할 실제 컴포넌트가 결정됩니다:\n\n  - 문자열인 경우, HTML 태그 이름 또는 컴포넌트로 등록된 이름일 수 있음.\n\n  - 컴포넌트의 정의에 직접 바인딩될 수도 있음.\n\n- **예제**\n\n  등록된 이름으로 컴포넌트 렌더링(옵션 API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  정의에 따른 컴포넌트 렌더링(`<script setup>`이 있는 컴포지션 API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [빌트인 컴포넌트](./built-in-components)는 모두 `is`에 전달할 수 있지만,\n  이름으로 전달하려면 등록해야 합니다.\n  예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  이름이 아닌 컴포넌트 자체를 `is`에 전달하는 경우,\n  등록이 필요하지 않습니다(예를 들어 `<script setup>`에서).\n\n  `v-model`이 `<component>` 태그에 사용되면, 템플릿 컴파일러는 다른 컴포넌트와 마찬가지로 이를 `modelValue` prop 및 `update:modelValue` 이벤트 리스너로 확장합니다.\n  그러나 이것은 `<input>` 또는 `<select>`와 같은 기본 HTML 엘리먼트와 호환되지 않습니다.\n  결과적으로 동적으로 생성된 기본 엘리먼트와 함께 `v-model`을 사용하면 작동하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n  \n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 'input'이 기본 HTML 엘리먼트이므로 작동하지 않음 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  실제로는 기본 양식(form) 필드가 일반적으로 실제 앱의 컴포넌트에 래핑되기 때문에 이러한 예외적인 경우는 일반적이지 않습니다.\n  네이티브 엘리먼트를 직접 사용해야 하는 경우, `v-model`을 속성과 이벤트로 수동으로 분할할 수 있습니다.\n\n- **참고**: [가이드 - 컴포넌트 기초: 동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
       "attributes": [],
       "references": [
@@ -279,7 +279,7 @@
       "name": "v-text",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트의 텍스트 컨텐츠를 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로,\n  엘리먼트 내부의 기존 컨텐츠를 덮어씁니다.\n  `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우,\n  [이중 중괄호](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)를 사용해야 합니다.\n\n- **예제**:\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 같음 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고**: [템플릿 문법 - 텍스트 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
+        "value": "\n엘리먼트의 텍스트 컨텐츠를 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-text`는 엘리먼트의 [텍스트 컨텐츠](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하므로,\n  엘리먼트 내부의 기존 컨텐츠를 덮어씁니다.\n  `텍스트 컨텐츠`의 일부를 업데이트해야 하는 경우,\n  [이중 중괄호](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)를 사용해야 합니다.\n\n- **예제**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 같음 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고**: [템플릿 문법 - 텍스트 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
       },
       "references": [
         {
@@ -312,7 +312,7 @@
       "name": "v-html",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다.\n  `v-html`을 사용하여 템플릿을 작성하려고 한다면,\n  이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.\n\n  ::: warning 보안 참고 사항\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다.\n  신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고,\n  사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.\n  :::\n\n  [싱글 파일 컴포넌트(SFC)](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다.\n  왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다.\n  범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우,\n  [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.\n\n- **예제**:\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고**: [템플릿 문법 - HTML 출력](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
+        "value": "\n엘리먼트의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **요구되는 값**: `string`\n\n- **세부 사항**:\n\n  `v-html`의 내용은 Vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입됩니다.\n  `v-html`을 사용하여 템플릿을 작성하려고 한다면,\n  이 방법 대신 컴포넌트를 사용하여 해결하는 방법을 고민해봐야 합니다.\n\n  ::: warning 보안 참고 사항\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 쉽게 이어질 수 있기 때문에 매우 위험할 수 있습니다.\n  신뢰할 수 있는 컨텐츠에만 `v-html`을 사용하고,\n  사용자가 제공하는 컨텐츠에는 **절대** 사용하면 안됩니다.\n  :::\n\n  [싱글 파일 컴포넌트(SFC)](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서 `scoped`(범위를 지정한) Style은 `v-html` 내부 컨텐츠에 적용되지 않습니다.\n  왜냐하면 해당 HTML은 Vue의 템플릿 컴파일러에서 처리되지 않기 때문입니다.\n  범위를 지정한 CSS로 `v-html` 컨텐츠를 대상으로 지정하려는 경우,\n  [CSS 모듈](./sfc-css-features#css-modules) 또는 BEM과 같은 수동 범위 지정 방법과 함께 전역 `<style>` 엘리먼트를 사용할 수 있습니다.\n\n- **예제**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고**: [템플릿 문법 - HTML 출력](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
       },
       "references": [
         {
@@ -412,7 +412,7 @@
       "valueSet": "v",
       "description": {
         "kind": "markdown",
-        "value": "\n`v-if` 또는 `v-else-if` 체인에 대한 `else`입니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n- **예제**:\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    이제 나를 볼 수 있어요!\n  </div>\n  <div v-else>\n    아직이에요!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)\n"
+        "value": "\n`v-if` 또는 `v-else-if` 체인에 대한 `else`입니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n- **예제**\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    이제 나를 볼 수 있어요!\n  </div>\n  <div v-else>\n    아직이에요!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)\n"
       },
       "references": [
         {
@@ -445,7 +445,7 @@
       "name": "v-else-if",
       "description": {
         "kind": "markdown",
-        "value": "\n`v-if`에 대한 `else if` 블록을 나타냅니다.\n`v-else-if`는 계속 이어서 사용할 수 있습니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n- **예제**:\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    A/B/C 가 아니야!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
+        "value": "\n`v-if`에 대한 `else if` 블록을 나타냅니다.\n`v-else-if`는 계속 이어서 사용할 수 있습니다.\n\n- **요구되는 값**: `any`\n\n- **세부 사항**:\n\n  - 제한사항: 이전 형제 엘리먼트에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있습니다.\n\n- **예제**\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    A/B/C 가 아니야!\n  </div>\n  ```\n\n- **참고**: [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
       },
       "references": [
         {
@@ -511,7 +511,7 @@
       "name": "v-on",
       "description": {
         "kind": "markdown",
-        "value": "\n엘리먼트에 이벤트 리스너를 연결합니다.\n\n- **단축 문법:** `@`\n\n- **요구되는 값**: `Function | Inline Statement | Object (without argument)`\n\n- **인자:** `event` (선택사항: 객체 문법을 사용하는 경우)\n\n- **수식어:**\n\n  - `.stop` - `event.stopPropagation()` 호출.\n  - `.prevent` - `event.preventDefault()` 호출.\n  - `.capture` - 캡처 모드로 이벤트 등록.\n  - `.self` - 이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨.\n  - `.{keyAlias}` - 이벤트가 특정 키에 대해서만 트리거 됨.\n  - `.once` - 이벤트가 한 번만 트리거 됨(일회용처럼).\n  - `.left` - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.\n  - `.right` - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.\n  - `.middle` - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.\n  - `.passive` - `{ passive: true }` 옵션으로 DOM 이벤트를 등록.\n\n- **세부 사항**:\n\n  이벤트 타입은 인자로 표시됩니다.\n  표현식은 메서드 이름 또는 인라인 명령문이거나,\n  수식어가 있는 경우 생략될 수 있습니다.\n\n  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다.\n  커스텀 엘리먼트 컴포넌트에서 사용되는 경우,\n  해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.\n\n  네이티브 DOM 이벤트를 수신할 때,\n  메서드의 인자는 네이티브 이벤트 뿐 입니다.\n  인라인 명령문을 사용하는 경우,\n  명령문은 특수 속성인 `$event`로 `v-on:click=\"handle('ok', $event)\"`와 같이 이벤트 객체에 접근할 수 있습니다.\n\n  `v-on`은 인자 없이 `이벤트(키): 리스너(값)` 형식의 객체 바인딩도 지원합니다.\n  수식어는 객체 문법을 사용할 때는 지원하지 않습니다.\n\n- **예제**:\n\n  ```html\n  <!-- 메서드 핸들러 -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- 동적 이벤트 -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- 인라인 표현식 -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- 단축 문법 -->\n  <button @click=\"doThis\"></button>\n\n  <!-- 단축 문법 동적 이벤트 -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- event.preventDefault() 작동 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 event.preventDefault()만 사용 -->\n  <form @submit.prevent></form>\n\n  <!-- 수식어 이어서 사용 -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- 키 별칭을 수식어로 사용 -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- 클릭 이벤트 단 한 번만 트리거 -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- 객체 문법 -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  자식 컴포넌트의 커스텀 이벤트 수신 대기(자식에서  \"my-event\"가 발생하면 핸들러가 호출됨):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- 인라인 표현식 -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **참고**:\n  - [이벤트 핸들링](https://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 이벤트 청취하기](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
+        "value": "\n엘리먼트에 이벤트 리스너를 연결합니다.\n\n- **단축 문법:** `@`\n\n- **요구되는 값**: `Function | Inline Statement | Object (without argument)`\n\n- **인자:** `event` (선택사항: 객체 문법을 사용하는 경우)\n\n- **수식어:**\n\n  - `.stop` - `event.stopPropagation()` 호출.\n  - `.prevent` - `event.preventDefault()` 호출.\n  - `.capture` - 캡처 모드로 이벤트 등록.\n  - `.self` - 이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨.\n  - `.{keyAlias}` - 이벤트가 특정 키에 대해서만 트리거 됨.\n  - `.once` - 이벤트가 한 번만 트리거 됨(일회용처럼).\n  - `.left` - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.\n  - `.right` - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.\n  - `.middle` - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.\n  - `.passive` - `{ passive: true }` 옵션으로 DOM 이벤트를 등록.\n\n- **세부 사항**:\n\n  이벤트 타입은 인자로 표시됩니다.\n  표현식은 메서드 이름 또는 인라인 명령문이거나,\n  수식어가 있는 경우 생략될 수 있습니다.\n\n  일반 엘리먼트에 사용되면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 수신합니다.\n  커스텀 엘리먼트 컴포넌트에서 사용되는 경우,\n  해당 자식 컴포넌트에서 발송(emit)하는 **커스텀 이벤트**를 수신합니다.\n\n  네이티브 DOM 이벤트를 수신할 때,\n  메서드의 인자는 네이티브 이벤트 뿐 입니다.\n  인라인 명령문을 사용하는 경우,\n  명령문은 특수 속성인 `$event`로 `v-on:click=\"handle('ok', $event)\"`와 같이 이벤트 객체에 접근할 수 있습니다.\n\n  `v-on`은 인자 없이 `이벤트(키): 리스너(값)` 형식의 객체 바인딩도 지원합니다.\n  수식어는 객체 문법을 사용할 때는 지원하지 않습니다.\n\n- **예제**\n\n  ```html\n  <!-- 메서드 핸들러 -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- 동적 이벤트 -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- 인라인 표현식 -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- 단축 문법 -->\n  <button @click=\"doThis\"></button>\n\n  <!-- 단축 문법 동적 이벤트 -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- event.preventDefault() 작동 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 event.preventDefault()만 사용 -->\n  <form @submit.prevent></form>\n\n  <!-- 수식어 이어서 사용 -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- 키 별칭을 수식어로 사용 -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- 클릭 이벤트 단 한 번만 트리거 -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- 객체 문법 -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  자식 컴포넌트의 커스텀 이벤트 수신 대기(자식에서  \"my-event\"가 발생하면 핸들러가 호출됨):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- 인라인 표현식 -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **참고**:\n  - [이벤트 핸들링](https://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 이벤트 청취하기](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)\n"
       },
       "references": [
         {
@@ -544,7 +544,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\n하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **단축 문법:** `:` 또는 `.`(`.prop` 수식어를 사용할 때)\n\n- **요구되는 값**: `any (인자 있이) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (optional)`\n\n- **수식어:**\n\n  - `.camel` - kebab-case 속성 이름을 camelCase로 변환.\n  - `.prop` - 바인딩을 [DOM 속성(property: 이하 프로퍼티)](https://developer.mozilla.org/en-US/docs/Web/API/Element#properties)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 바인딩을 [DOM 속성(attribute)](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n\n- **사용법**:\n\n  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우,\n  `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다.\n  자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.\n\n  엘리먼트에 바인딩을 설정할 때,\n  Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여,\n  엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다.\n  프로퍼티가 정의되면,\n  Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다.\n  이것은 대부분의 경우 작동하지만,\n  `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다.\n  이것은 특히 [커스텀 엘리먼트로 작업](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.\n\n  컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.\n\n  인자 없이 사용하는 경우,\n  속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다.\n  이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.\n\n- **예제**:\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적인 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 단축 문법 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 단축 문법과 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인으로 문자열 결합 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 바인딩 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 속성을 객체로 바인딩 -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어 있어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->\n  <MyComponent v-bind=\"$props\" />\n  ```\n\n  `.prop` 수식어에는 전용 단축 문법 `.`가 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 위 코드는 아래와 같이 단축할 수 있음 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 DOM 내 템플릿을 사용할 때,\n  `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다.\n  예를 들면, SVG `viewBox` 속성:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  문자열 템플릿을 사용하거나 템플릿을 빌드 과정으로 미리 컴파일하는 경우에는 `.camel`이 필요하지 않습니다.\n\n- **참고**:\n  - [가이드 - 클래스와 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [가이드 - Props: Props 전달에 관한 심화](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\n하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **단축 문법:** `:` 또는 `.`(`.prop` 수식어를 사용할 때)\n\n- **요구되는 값**: `any (인자 있이) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (optional)`\n\n- **수식어:**\n\n  - `.camel` - kebab-case 속성 이름을 camelCase로 변환.\n  - `.prop` - 바인딩을 [DOM 속성(property: 이하 프로퍼티)](https://developer.mozilla.org/en-US/docs/Web/API/Element#properties)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 바인딩을 [DOM 속성(attribute)](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)으로 강제 설정. <sup class=\"vt-badge\">3.2+</sup>\n\n- **사용법**:\n\n  `class` 또는 `style` 속성을 바인딩하는 데 사용되는 경우,\n  `v-bind`는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원합니다.\n  자세한 내용은 아래 링크된 가이드 섹션을 참고합시다.\n\n  엘리먼트에 바인딩을 설정할 때,\n  Vue는 기본적으로 연산자 검사를 위한 `in`을 사용하여,\n  엘리먼트에 프로퍼티로 정의된 키가 있는지 확인합니다.\n  프로퍼티가 정의되면,\n  Vue는 속성 대신 DOM 프로퍼티로 값을 설정합니다.\n  이것은 대부분의 경우 작동하지만,\n  `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 재정의할 수 있습니다.\n  이것은 특히 [커스텀 엘리먼트로 작업](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties)할 때 필요합니다.\n\n  컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언되어야 합니다.\n\n  인자 없이 사용하는 경우,\n  속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용할 수 있습니다.\n  이 모드에서 `class`와 `style`은 배열 또는 객체를 지원하지 않습니다.\n\n- **예제**\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적인 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 단축 문법 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 단축 문법과 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인으로 문자열 결합 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 바인딩 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 속성을 객체로 바인딩 -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어 있어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->\n  <MyComponent v-bind=\"$props\" />\n  ```\n\n  `.prop` 수식어에는 전용 단축 문법 `.`가 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 위 코드는 아래와 같이 단축할 수 있음 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 DOM 내 템플릿을 사용할 때,\n  `v-bind`의 속성명을 카멜라이징(camelizing)할 수 있습니다.\n  예를 들면, SVG `viewBox` 속성:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  문자열 템플릿을 사용하거나 템플릿을 빌드 과정으로 미리 컴파일하는 경우에는 `.camel`이 필요하지 않습니다.\n\n- **참고**:\n  - [가이드 - 클래스와 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [가이드 - Props: Props 전달에 관한 심화](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {
@@ -610,7 +610,7 @@
       "name": "v-slot",
       "description": {
         "kind": "markdown",
-        "value": "\n이름이 있는 슬롯 또는 props를 받을 것으로 예상되는 범위형 (Scoped) 슬롯을 나타냅니다.\n\n- **단축 문법:** `#`\n\n- **요구되는 값**: JavaScript expression that is valid in a function argument position, including support for destructuring. Optional - only needed if expecting props to be passed to the slot.\n\n- **인자:** 슬롯 이름 (선택적, 기본값은 `default`)\n\n- **다음으로 제한됨**:\n\n  - `<template>`\n  - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props를 수신할 기본 슬롯만 있는 경우)\n\n- **예제**:\n\n  ```html\n  <!-- 이름이 있는 슬롯 -->\n  <BaseLayout>\n    <template v-slot:header>\n      해더 컨텐츠\n    </template>\n\n    <template v-slot:default>\n      기본 슬롯 컨텐츠\n    </template>\n\n    <template v-slot:footer>\n      푸터 컨텐츠\n    </template>\n  </BaseLayout>\n\n  <!-- props를 수신할 기본 슬롯 -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- props를 수신할 기본 슬롯, 분해할당을 사용 -->\n  <Mouse v-slot=\"{ x, y }\">\n    마우스 위치: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **참고**:\n  - [가이드 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
+        "value": "\n이름이 있는 슬롯 또는 props를 받을 것으로 예상되는 범위형 (Scoped) 슬롯을 나타냅니다.\n\n- **단축 문법:** `#`\n\n- **요구되는 값**: JavaScript expression that is valid in a function argument position, including support for destructuring. Optional - only needed if expecting props to be passed to the slot.\n\n- **인자:** 슬롯 이름 (선택적, 기본값은 `default`)\n\n- **다음으로 제한됨**:\n\n  - `<template>`\n  - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props를 수신할 기본 슬롯만 있는 경우)\n\n- **예제**\n\n  ```html\n  <!-- 이름이 있는 슬롯 -->\n  <BaseLayout>\n    <template v-slot:header>\n      해더 컨텐츠\n    </template>\n\n    <template v-slot:default>\n      기본 슬롯 컨텐츠\n    </template>\n\n    <template v-slot:footer>\n      푸터 컨텐츠\n    </template>\n  </BaseLayout>\n\n  <!-- props를 수신할 기본 슬롯 -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- props를 수신할 기본 슬롯, 분해할당을 사용 -->\n  <Mouse v-slot=\"{ x, y }\">\n    마우스 위치: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **참고**:\n  - [가이드 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
       },
       "references": [
         {
@@ -643,7 +643,7 @@
       "name": "v-pre",
       "description": {
         "kind": "markdown",
-        "value": "\n이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다.\n  가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예제**:\n\n  ```html\n  <span v-pre>{{ 이곳은 컴파일되지 않습니다. }}</span>\n  ```\n"
+        "value": "\n이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략합니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  `v-pre`가 있는 엘리먼트 내에서 모든 Vue 템플릿 구문은 그대로 유지되고 렌더링됩니다.\n  가장 일반적인 사용 사례는 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예제**\n\n  ```html\n  <span v-pre>{{ 이곳은 컴파일되지 않습니다. }}</span>\n  ```\n"
       },
       "references": [
         {
@@ -742,7 +742,7 @@
       "name": "v-cloak",
       "description": {
         "kind": "markdown",
-        "value": "\n준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사용됩니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  **이 디렉티브는 빌드 과정이 없는 설정에서만 필요합니다**.\n\n  DOM 내 템플릿을 사용할 때,\n  \"컴파일되지 않은 템플릿이 순간 보이는 현상\"이 있을 수 있습니다.\n  이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.\n\n  `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.\n  `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여,\n  컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.\n\n- **예제**:\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  `<div>`는 컴파일이 완료될 때까지 표시되지 않습니다.\n"
+        "value": "\n준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사용됩니다.\n\n- **표현식을 허용하지 않습니다**.\n\n- **세부 사항**:\n\n  **이 디렉티브는 빌드 과정이 없는 설정에서만 필요합니다**.\n\n  DOM 내 템플릿을 사용할 때,\n  \"컴파일되지 않은 템플릿이 순간 보이는 현상\"이 있을 수 있습니다.\n  이러면 사용자는 컴포넌트가 렌더링된 컨텐츠로 대체할 때까지 이중 중괄호 태그를 볼 수 있습니다.\n\n  `v-cloak`은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.\n  `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여,\n  컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.\n\n- **예제**\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  `<div>`는 컴파일이 완료될 때까지 표시되지 않습니다.\n"
       },
       "references": [
         {