custom anchor 변경

Author: narusas

ko-KR/src/guide/best-practices/performance.md

@@ -45,7 +45,7 @@ Vue는 수동 최적화가 크게 필요하지 않은 가장 일반적인 사용
 
 - [크롬 개발자도구 성능(Performance) 패널](https://developer.chrome.com/docs/devtools/evaluate-performance/)
   - [`app.config.performance`](/api/application.html#app-config-performance)는 크롬 개발자도구의 성능 타임라인에서 Vue 관련 성능 마커를 활성화합니다.
-- [Vue 개발자도구 확장](/guide/scaling-up/tooling.html#브라우저-개발자-도구)은 성능 프로파일링 기능도 제공합니다.
+- [Vue 개발자도구 확장](/guide/scaling-up/tooling.html#browser-devtools)은 성능 프로파일링 기능도 제공합니다.
 
 ## 페이지 로드 최적화 {#page-load-optimizations}
 
@@ -213,7 +213,7 @@ shallowArray.value = [
 ### 불필요한 컴포넌트 추상화 방지 {#avoid-unnecessary-component-abstractions}
 
 때때로 우리는 더 나은 추상화 또는 코드 구성을 위해,
-[렌더리스 컴포넌트](/guide/components/slots.html#렌더리스-컴포넌트) 또는 고차 컴포넌트(예: 다른 컴포넌트를 추가 props로 렌더링하는 컴포넌트)를 만들 수 있습니다.
+[렌더리스 컴포넌트](/guide/components/slots.html#renderless-components) 또는 고차 컴포넌트(예: 다른 컴포넌트를 추가 props로 렌더링하는 컴포넌트)를 만들 수 있습니다.
 여기에는 아무런 문제가 없지만,
 컴포넌트 인스턴스는 일반 DOM 노드보다 훨씬 비싸고,
 추상화 패턴으로 인해 컴포넌트 인스턴스를 너무 많이 생성하면 성능 비용이 발생한다는 점을 명심하십시오.

ko-KR/src/guide/best-practices/security.md

@@ -164,7 +164,7 @@ URL이 `javascript:`를 사용하여 JavaScript 실행하는 것을 방지하기
 ```
 
 사용자를 클릭 재킹으로부터 완전히 보호하려면 샌드박스 처리된 iframe 내에서 CSS에 대한 제어만 허용하는 것이 좋습니다.
-또는 스타일 바인딩을 통해 사용자 제어를 제공할 때 [객체 구문](/guide/essentials/class-and-style.html#객체로-바인딩)을 사용하고,
+또는 스타일 바인딩을 통해 사용자 제어를 제공할 때 [객체 구문](/guide/essentials/class-and-style.html#binding-to-objects)을 사용하고,
 다음과 같이 사용자가 제어하기에 안전한 특정 속성에 대한 값만 제공하도록 허용하는 것이 좋습니다:
 
 ```vue-html
@@ -208,7 +208,7 @@ Vue로 `<script>` 엘리먼트를 렌더링하지 않는 것이 좋습니다.
 기본 규칙은 가공되지 않은 사용자 제공 콘텐츠(HTML, JavaScript 또는 CSS)를 실행하도록 허용하면 공격에 노출될 수 있다는 것입니다.
 이것은 Vue를 사용하든 다른 프레임워크를 사용하든 프레임워크를 사용하지 않든 동일하게 적용됩니다.
 
-[잠재적 위험](#잠재적-위험)에 대해 위에서 설명한 권장 사항 외에도 다음 리소스를 숙지하는 것이 좋습니다:
+[잠재적 위험](#potential-dangers)에 대해 위에서 설명한 권장 사항 외에도 다음 리소스를 숙지하는 것이 좋습니다:
 
 - [HTML5 보안 치트 시트](https://html5sec.org/)
 - [OWASP에서 제공하는 XSS(교차 사이트 스크립팅) 방지 치트 시트](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

ko-KR/src/guide/built-ins/keep-alive.md

@@ -8,7 +8,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 
 ## 기본 사용법 {#basic-usage}
 
-컴포넌트 기초의 [동적 컴포넌트](/guide/essentials/component-basics.html#동적-컴포넌트) 장에서 특별한 `<component>` 엘리먼트를 사용하는 문법을 소개했습니다:
+컴포넌트 기초의 [동적 컴포넌트](/guide/essentials/component-basics.html#dynamic-components) 장에서 특별한 `<component>` 엘리먼트를 사용하는 문법을 소개했습니다:
 
 ```vue-html
 <component :is="activeComponent" />
@@ -51,7 +51,7 @@ A에는 카운터가 포함되고 B에는 `v-model`을 통해 입력과 동기
 </div>
 
 :::tip
-[DOM 템플릿](/guide/essentials/component-basics.html#dom-템플릿-파싱-주의-사항)에서 사용할 때 `<keep-alive>`로 참조해야 합니다.
+[DOM 템플릿](/guide/essentials/component-basics.html#dom-template-parsing-caveats)에서 사용할 때 `<keep-alive>`로 참조해야 합니다.
 :::
 
 ## Include / Exclude {#include-exclude}

ko-KR/src/guide/built-ins/teleport.md

@@ -217,4 +217,4 @@ Props 전달() 및 이벤트 발신(emit)은 계속 동일한 방식으로 작
 **관련 문서**
 
 - [`<Teleport>` API 참고](/api/built-in-components.html#teleport)
-- [SSR에서 텔레포트 핸들링](/guide/scaling-up/ssr.html#텔레포트)
+- [SSR에서 텔레포트 핸들링](/guide/scaling-up/ssr.html#teleport)

ko-KR/src/guide/built-ins/transition-group.md

@@ -14,15 +14,15 @@ import ListStagger from './transition-demos/ListStagger.vue'
 
 - 기본적으로 래퍼 엘리먼트를 렌더링하지 않습니다. 그러나 `tag` prop으로 렌더링할 엘리먼트를 지정할 수 있습니다.
 
-- [트랜지션 모드](./transition.html#트랜지션-모드)는 더 이상 상호 배타적인 엘리먼트를 사용하지 않기 때문에 사용할 수 없습니다.
+- [트랜지션 모드](./transition.html#transition-mode)는 더 이상 상호 배타적인 엘리먼트를 사용하지 않기 때문에 사용할 수 없습니다.
 
 - 내부 엘리먼트는 고유한 `key` 속성을 **필수로 가져야** 합니다.
 
 - CSS 트랜지션 클래스는 그룹/컨테이너 자체가 아닌 **목록의 개별 엘리먼트에 적용**됩니다.
 
 
 :::tip
-[DOM 템플릿](/guide/essentials/component-basics.html#dom-템플릿-파싱-주의-사항)에서 사용할 때 `<transition-group>`으로 참조해야 합니다.
+[DOM 템플릿](/guide/essentials/component-basics.html#dom-template-parsing-caveats)에서 사용할 때 `<transition-group>`으로 참조해야 합니다.
 :::
 
 ## 진입/진출 트랜지션 {#enter-leave-transitions}

ko-KR/src/guide/built-ins/transition.md

@@ -72,9 +72,9 @@ Vue는 상태 변화에 대응하기 위해 트랜지션 및 애니메이션 작
 `<Transition>` 컴포넌트 안에 엘리먼트가 삽입되거나 제거되면 다음과 같은 일이 일어납니다:
 
 1. Vue는 대상 엘리먼트에 CSS 트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지합니다.
-   그리고 적절한 타이밍에 여러 [CSS 트랜지션 클레스](#트랜지션-클레스)가 추가/제거됩니다.
+   그리고 적절한 타이밍에 여러 [CSS 트랜지션 클레스](#transition-classes)가 추가/제거됩니다.
 
-2. [JavaScript 훅](#javascript-훅)에 대한 리스너가 있는 경우, 이 훅은 적절한 타이밍에 호출됩니다.
+2. [JavaScript 훅](#javascript-hook)에 대한 리스너가 있는 경우, 이 훅은 적절한 타이밍에 호출됩니다.
 
 3. CSS 트랜지션/애니메이션이 감지되지 않고 JavaScript 훅이 제공되지 않으면, DOM 삽입/제거 작업이 브라우저의 다음 애니메이션 프레임에서 실행됩니다.
 
@@ -582,7 +582,7 @@ Vue의 컴포넌트 시스템을 통해 트랜지션을 재사용할 수 있습
 
 ## 컴포넌트 간 트랜지션 {#transition-between-components}
 
-`<Transition>`은 [동적 컴포넌트](/guide/essentials/component-basics.html#동적-컴포넌트)에서도 사용할 수 있습니다:
+`<Transition>`은 [동적 컴포넌트](/guide/essentials/component-basics.html#dynamic-components)에서도 사용할 수 있습니다:
 
 ```vue-html
 <Transition name="fade" mode="out-in">
@@ -617,7 +617,7 @@ Vue의 컴포넌트 시스템을 통해 트랜지션을 재사용할 수 있습
 이것은 Vue의 트랜지션 클래스 규칙을 사용하여 CSS 트랜지션/애니메이션을 정의하고 둘 사이를 트랜지션하려는 경우에 유용할 수 있습니다.
 
 컴포넌트의 현재 상태를 기반으로 JavaScript 트랜지션 훅에서 다른 동작을 적용할 수도 있습니다.
-마지막으로, 동적 트랜지션을 만드는 궁극적인 방법은 사용할 트랜지션의 특성을 변경하기 위해 prop을 허용하는 [재사용 가능한 트랜지션 컴포넌트](#재사용-가능한-트랜지션)를 사용하는 것입니다.
+마지막으로, 동적 트랜지션을 만드는 궁극적인 방법은 사용할 트랜지션의 특성을 변경하기 위해 prop을 허용하는 [재사용 가능한 트랜지션 컴포넌트](#reusable-transitions)를 사용하는 것입니다.
 진부하게 들릴지 모르지만, 실제로 한계는 당신의 상상력뿐입니다.
 
 ---

ko-KR/src/guide/components/async.md

@@ -21,7 +21,7 @@ const AsyncComp = defineAsyncComponent(() => {
 Promise의 `resolve` 콜백을 호출해 서버에서 가져온 정의되어 있는 컴포넌트를 반환합니다.
 로드가 실패했음을 나타내기 위해 `reject(reason)`를 호출할 수도 있습니다.
 
-[ES 모듈 동적으로 가져오기](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports)도 Promise를 반환하므로, 대부분의 경우 `defineAsyncComponent`와 함께 사용합니다.
+[ES 모듈 동적으로 가져오기](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic-imports)도 Promise를 반환하므로, 대부분의 경우 `defineAsyncComponent`와 함께 사용합니다.
 Vite 및 webpack과 같은 번들러에서도 이 문법을 지원하므로 Vue SFC를 가져오는 데 사용할 수 있습니다.
 
 ```js
@@ -37,7 +37,7 @@ const AsyncComp = defineAsyncComponent(() =>
 
 <div class="options-api">
 
-[컴포넌트를 로컬로 등록](/guide/components/registration.html#로컬-등록)할 때 `defineAsyncComponent`를 사용할 수도 있습니다:
+[컴포넌트를 로컬로 등록](/guide/components/registration.html#local-registration)할 때 `defineAsyncComponent`를 사용할 수도 있습니다:
 
 ```js
 import { defineAsyncComponent } from 'vue'

ko-KR/src/guide/components/attrs.md

@@ -118,7 +118,7 @@ export default {
 
 - `@click`과 같은 `v-on` 이벤트 리스너는 `$attrs.onClick` 속성에 노출 됩니다.
 
-[이전 섹션](#속성-상속)의 `<MyButton>` 컴포넌트 예제 사용 - 때로는 스타일 지정을 위해 실제 `<button>` 엘리먼트를 `<div>`로 추가 래핑해야 할 수도 있습니다:
+[이전 섹션](#attribute-inheritance)의 `<MyButton>` 컴포넌트 예제 사용 - 때로는 스타일 지정을 위해 실제 `<button>` 엘리먼트를 `<div>`로 추가 래핑해야 할 수도 있습니다:
 
 ```vue-html
 <div class="btn-wrapper">
@@ -135,7 +135,7 @@ export default {
 </div>
 ```
 
-[인자없는 `v-bind`](/guide/essentials/template-syntax.html#여러-속성을-동적으로-바인딩)는 객체의 모든 속성을 대상 엘리먼트의 속성으로 묶는다는 것을 기억하세요.
+[인자없는 `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes)는 객체의 모든 속성을 대상 엘리먼트의 속성으로 묶는다는 것을 기억하세요.
 
 ## 다중 루트 노드에서 속성 상속 {#attribute-inheritance-on-multiple-root-nodes}
 

ko-KR/src/guide/components/events.md

@@ -33,7 +33,7 @@
 
 컴포넌트 및 props와 마찬가지로 이벤트 이름은 자동 대소문자 변환을 제공합니다.
 우리는 camelCase 형식으로 이벤트를 발신했지만, 부모에서 kebab-case 표기로 리스너를 사용하여 이를 수신할 수 있습니다.
-[props 케이싱](/guide/components/props.html#props-이름-케이싱)과 마찬가지로 템플릿에서 kebab-case 형식의 이벤트 리스너를 사용하는 것이 좋습니다.
+[props 케이싱](/guide/components/props.html#prop-name-casing)과 마찬가지로 템플릿에서 kebab-case 형식의 이벤트 리스너를 사용하는 것이 좋습니다.
 
 :::tip
 네이티브 DOM 이벤트와 달리 컴포넌트 이벤트 발신은 버블링되지 않습니다.
@@ -186,7 +186,7 @@ export default {
 </div>
 
 선택 사항으로 컴포넌트가 작동하는 방식을 더 잘 문서화하기 위해 발신되는 모든 이벤트를 정의하는 것이 좋습니다.
-또한 상위로부터 전달된 리스너는 [폴스루 속성](/guide/components/attrs.html#v-on-리스터-상속)에 의해 제외할 수 있습니다.
+또한 상위로부터 전달된 리스너는 [폴스루 속성](/guide/components/attrs.html#v-on-listener-inheritance)에 의해 제외할 수 있습니다.
 
 :::tip
 네이티브 이벤트(예: `click`)가 `emits` 옵션에 정의된 경우 리스너는 이제 컴포넌트에서 발생하는 `click` 이벤트만 수신 대기하고 네이티브 `click` 이벤트에 더 이상 응답하지 않습니다.
@@ -459,7 +459,7 @@ export default {
 
 ### `v-model` 다중 바인딩 {#multiple-v-model-bindings}
 
-이전에 [`v-model` 인자](#v-model-인자)에서 배운 것처럼, 특정 prop과 이벤트를 대상으로 하는 기능을 활용하면 이제 단일 컴포넌트 인스턴스에 여러 `v-model` 바인딩을 만들 수 있습니다.
+이전에 [`v-model` 인자](#v-model-arguments)에서 배운 것처럼, 특정 prop과 이벤트를 대상으로 하는 기능을 활용하면 이제 단일 컴포넌트 인스턴스에 여러 `v-model` 바인딩을 만들 수 있습니다.
 
 각 `v-model`은 컴포넌트에 추가 옵션이 필요 없이 다른 prop과 동기화됩니다:
 
@@ -532,7 +532,7 @@ export default {
 
 ### `v-model` 수식어 핸들링 {#handling-v-model-modifiers)}
 
-폼 입력 바인딩에 대해 배울 때, `v-model`에 `.trim`, `.number` 및 `.lazy`와 같은 [빌트인 수식어](/guide/essentials/forms.html#수식어)가 있었습니다.
+폼 입력 바인딩에 대해 배울 때, `v-model`에 `.trim`, `.number` 및 `.lazy`와 같은 [빌트인 수식어](/guide/essentials/forms.html#modifiers)가 있었습니다.
 그러나 경우에 따라 고유한 사용자 지정 수식어를 추가할 수도 있습니다.
 
 `v-model` 바인딩으로 제공하는 문자열의 첫 글자를 대문자로 표시하는 사용자 지정 수식어 `capitalize`의 예를 만들어 보겠습니다:

ko-KR/src/guide/components/props.md

@@ -91,7 +91,7 @@ export default {
 객체 선언 문법의 각 객체 속성의 키는 props의 이름이 되며, 객체 속성의 값은 값이 될 데이터의 타입에 해당하는 생성자 함수(`Number`, `String`같은)여야 합니다.
 
 타입을 지정하는 것은 컴포넌트를 가독성이 좋게 문서화하는데 도움이 되며, 컴포넌트를 사용하는 다른 개발자가 잘못된 유형을 전달할 때에 브라우저 콘솔에 경고를 출력합니다.
-[prop 유효성 검사](#prop-유효성-검사)에 대한 자세한 내용은 이 페이지 아래에서 더 자세히 설명하겠습니다.
+[prop 유효성 검사](#prop-validation)에 대한 자세한 내용은 이 페이지 아래에서 더 자세히 설명하겠습니다.
 
 <div class="options-api">
 
@@ -148,7 +148,7 @@ export default {
 <span>{{ greetingMessage }}</span>
 ```
 
-기술적으로 props를 자식 컴포넌트에 전달할 때 camelCase를 사용할 수도 있습니다([DOM 템플릿](/guide/essentials/component-basics.html#dom-템플릿-파싱-주의-사항) 제외).
+기술적으로 props를 자식 컴포넌트에 전달할 때 camelCase를 사용할 수도 있습니다([DOM 템플릿](/guide/essentials/component-basics.html#dom-template-parsing-caveats) 제외).
 그러나 camelCase로 선언된 props 속성일지라도 관례적으로 HTML 속성 표기법과 동일하게 kebab-case로 표기해서 사용하도록 해야 합니다:
 
 ```vue-html
@@ -236,7 +236,7 @@ export default {
 
 If you want to pass all the properties of an object as props, you can use [`v-bind` without an argument](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes) (`v-bind` instead of `:prop-name`). For example, given a `post` object:
 
-객체의 모든 속성을 props로 전달하려면 [인자 없이 `v-bind`](/guide/essentials/template-syntax.html#여러-속성을-동적으로-바인딩)를 사용할 수 있습니다.
+객체의 모든 속성을 props로 전달하려면 [인자 없이 `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes)를 사용할 수 있습니다.
 예를 들어, `post` 객체가 주어지면:
 
 <div class="options-api">