Header Anchor 추가

Author: narusas

ko-KR/src/guide/essentials/application.md

@@ -1,6 +1,6 @@
-# Vue 앱 만들기
+# Vue 앱 만들기 {#creating-a-vue-application}
 
-## 앱 인스턴스
+## 앱 인스턴스 {#the-application-instance}
 
 모든 Vue 앱은 [`createApp`](/api/application#createapp) 함수를 사용하여 새로운 **앱 인스턴스**를 생성하는 것으로 시작합니다:
 
@@ -12,7 +12,7 @@ const app = createApp({
 })
 ```
 
-## 최상위 컴포넌트
+## 최상위 컴포넌트 {#the-root-component}
 
 우리가 `createApp`에 전달하는 객체는 사실 컴포넌트입니다.
 모든 앱에는 다른 컴포넌트를 자식으로 포함할 수 있는 "최상위 컴포넌트"가 필요합니다.
@@ -44,7 +44,7 @@ App (최상위 컴포넌트)
 여러 컴포넌트를 함께 정의하고 구성하는 방법에 대해서는 가이드의 뒷부분에서 설명합니다.
 그 전에 우리는 싱글 컴포넌트 내부에서 일어나는 일에 초점을 맞출 것입니다.
 
-## 앱 마운트하기
+## 앱 마운트하기 {#mounting-the-app}
 
 앱 인스턴스는 `.mount()` 메서드가 호출될 때까지 아무 것도 렌더링하지 않습니다.
 "컨테이너"가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인수로 필요합니다.
@@ -63,7 +63,7 @@ app.mount('#app')
 `.mount()` 메서드는 반드시 앱의 환경설정 및 에셋(asset)이 모두 등록 완료된 후에 호출되어야 합니다.
 또한 에셋 등록 메서드와 달리 반환 값은 앱 인스턴스가 아닌 최상위 컴포넌트 인스턴스입니다.
 
-### DOM 내부의 최상위 컴포넌트 템플릿
+### DOM 내부의 최상위 컴포넌트 템플릿 {#in-dom-root-component-template}
 
 빌드 단계 없이 Vue를 사용할 때, 마운트 컨테이너 내부에 직접 최상위 컴포넌트의 템플릿을 작성할 수 있습니다:
 
@@ -89,7 +89,7 @@ app.mount('#app')
 
 최상위 컴포넌트에 아직 `template` 옵션이 없으면 Vue는 자동으로 컨테이너의 `innerHTML`을 템플릿으로 사용합니다.
 
-## 앱 환경설정
+## 앱 환경설정 {#app-configurations}
 
 앱 인스턴스는 몇 가지 앱 레벨의 옵션을 구성할 수 있는 `.config` 객체를 노출합니다.
 예를 들어 모든 자식 컴포넌트에서 애러를 캡처하는 앱 레벨의 애러 핸들러를 정의합니다.
@@ -113,7 +113,7 @@ app.component('TodoDeleteButton', TodoDeleteButton)
 
 앱을 마운트하기 전에 앱의 모든 환경설정을 적용했는지 확인하세요!
 
-## 멀티 앱 인스턴스
+## 멀티 앱 인스턴스 {#multiple-application-instances}
 
 앱 인스턴스는 동일한 페이지 내 하나로 제한되지 않습니다.
 `createApp` API를 사용하면 여러 Vue 앱이 동일한 페이지에 공존할 수 있으며, 각각은 구성 및 전역 자산에 대한 고유한 범위를 갖습니다.

ko-KR/src/guide/essentials/class-and-style.md

@@ -1,12 +1,12 @@
-# 클래스와 스타일 바인딩
+# 클래스와 스타일 바인딩 {#class-and-style-bindings}
 
 일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 해당 인라인 스타일을 조작하기 위함입니다.
 둘 다 속성이므로 `v-bind`를 사용하여 표현 식으로 처리할 경우, 최종적인 문자열만 산출을 위한 로직만 신경 쓰면 되지만, 이것은 성가시고 오류가 발생하기 쉽습니다.
 이러한 이유로 `class` 및 `style`에 `v-bind`를 사용할 경우, 표현 식 내에 문자열 외에도 객체 또는 배열을 평가할 수 있도록 개발 편의적인 능력을 제공합니다.
 
-## HTML 클래스 바인딩
+## HTML 클래스 바인딩 {#binding-html-classes}
 
-### 객체로 바인딩 하기
+### 객체로 바인딩 하기 {#binding-to-objects}
 
 클래스를 동적으로 토글하기 위해 객체를 `:class`(`v-bind:class`의 줄임말)에 전달할 수 있습니다:
 
@@ -135,7 +135,7 @@ computed: {
 <div :class="classObject"></div>
 ```
 
-### 배열로 바인딩 하기
+### 배열로 바인딩 하기 {#binding-to-arrays}
 
 `:class`를 배열로 바인딩하여 클래스 목록을 적용할 수 있습니다:
 
@@ -186,7 +186,7 @@ data() {
 <div :class="[{ active: isActive }, errorClass]"></div>
 ```
 
-### 컴포넌트에서 사용하기
+### 컴포넌트에서 사용하기 {#with-components}
 
 > 이 섹션은 [컴포넌트](/guide/essentials/component-basics)에 대한 지식이 있다고 가정하므로, 건너뛰고 나중에 읽어도 됩니다.
 
@@ -246,9 +246,9 @@ data() {
 
 컴포넌트 속성 상속에 대한 자세한 내용은 [폴스루 속성](/guide/components/attrs.html) 섹션에서 확인할 수 있습니다.
 
-## 인라인 스타일 바인딩
+## 인라인 스타일 바인딩 {#binding-inline-styles}
 
-### 객체로 바인딩
+### 객체로 바인딩 {#binding-to-objects-1}
 
 `:style`은 [HTML 엘리먼트의 `style` 속성](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)에 해당하는 JavaScript 객체에 대한 바인딩을 지원합니다:
 
@@ -319,7 +319,7 @@ data() {
 
 일반적으로 인라인 스타일에 바인딩 하는 경우, 객체를 반환하는 계산된 속성을 사용합니다.
 
-### 배열로 바인딩 하기
+### 배열로 바인딩 하기 {#binding-to-arrays-1}
 
 스타일 객체 여러 개로 이루어진 배열을 `:style`에 바인딩할 수 있습니다.
 객체들은 병합되어 엘리먼트에 적용됩니다:
@@ -328,12 +328,12 @@ data() {
 <div :style="[baseStyles, overridingStyles]"></div>
 ```
 
-### 접두사 자동완성
+### 접두사 자동완성 {#auto-prefixing}
 
 Vue가 실행되고 있을 때, 해당 브라우저에서 지원되지 않는 CSS 속성이 `:style`에 사용되면,
 자동으로 해당 속성과 [벤더 접두사](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)가 조합된 여러 개의 특수한 속성을 테스트하고 지원되는 속성을 찾아서 추가합니다.
 
-### 다중 값
+### 다중 값 {#multiple-values}
 
 스타일 속성에 다중 값을 배열로 제공할 수 있습니다.
 예를 들면 다음과 같습니다:

ko-KR/src/guide/essentials/component-basics.md

@@ -1,4 +1,4 @@
-# 컴포넌트 기초
+# 컴포넌트 기초 {#components-basics}
 
 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있습니다.
 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적입니다:
@@ -12,7 +12,7 @@ Vue는 각 컴포넌트에 사용자 정의 콘텐츠와 논리를 캡슐화할
 Vue는 기본 웹 컴포넌트와도 잘 작동합니다.
 Vue 컴포넌트와 기본 웹 컴포넌트 간의 관계가 궁금하시다면 [여기에서 자세히 읽어보세요](/guide/extras/web-components.html).
 
-## 컴포넌트 정의하기
+## 컴포넌트 정의하기 {#defining-a-component}
 
 빌드 방식을 사용할 때 일반적으로 [싱글 파일 컴포넌트](/guide/scaling-up/sfc.html)(줄여서 SFC)라고 하는 `.vue` 확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의합니다:
 
@@ -97,7 +97,7 @@ Vue는 해당 콘텐츠를 템플릿 소스로 사용합니다.
 위의 예는 싱글 컴포넌트를 정의하고 이를 `.js` 파일의 내보내기 기본 값으로 내보냅니다.
 그러나 명명된 내보내기를 사용하여 한 파일에서 여러 개의 컴포넌트로 내보낼 수 있습니다.
 
-## 컴포넌트 사용하기
+## 컴포넌트 사용하기 {#using-a-component}
 
 :::tip
 이 가이드의 나머지 부분에서는 SFC 문법을 사용할 것입니다.
@@ -192,7 +192,7 @@ SFC에서는 네이티브 HTML 엘리먼트와 구별하기 위해 자식 컴포
 
 자세한 내용은 [DOM 템플릿 파싱 주의 사항](#dom-템플릿-파싱-주의-사항)을 참조하세요.
 
-## Props 전달하기
+## Props 전달하기 {#passing-props}
 
 블로그를 구축하는 경우 블로그 게시물을 나타내는 컴포넌트가 필요할 수 있습니다.
 우리는 모든 블로그 게시물이 동일한 시각적 레이아웃을 공유하기를 원하지만 콘텐츠는 다릅니다.
@@ -327,7 +327,7 @@ const posts = ref([
 지금은 이것이 `props`에 대해 알아야 할 전부입니다.
 하지만 이 페이지를 다 읽고 내용에 익숙해지면 나중에 다시 돌아와 [Props](/guide/components/props.html)의 전체 가이드를 읽는 것이 좋습니다.
 
-## 이벤트 청취하기
+## 이벤트 청취하기 {#listening-to-events}
 
 `<BlogPost>` 컴포넌트를 개발할 때 일부 기능은 상위 항목과 다시 통신해야 할 수 있습니다.
 예를 들어, 페이지의 나머지 부분은 기본 크기로 유지하면서, 블로그 게시물의 텍스트를 확대하는 접근성 기능을 포함하기로 결정할 수 있습니다.
@@ -489,7 +489,7 @@ export default {
 지금은 이것이 사용자 정의 컴포넌트 이벤트에 대해 알아야 할 전부입니다.
 그러나 이 페이지를 다 읽고 내용에 익숙해지면 나중에 다시 돌아와 [사용자 정의 이벤트](/guide/components/events)의 전체 가이드를 읽는 것이 좋습니다.
 
-## 슬롯이 있는 콘텐츠 배포
+## 슬롯이 있는 콘텐츠 배포 {#content-distribution-with-slots}
 
 HTML 엘리먼트와 마찬가지로 다음과 같이 컴포넌트에 콘텐츠를 전달할 수 있으면 종종 유용합니다:
 
@@ -539,7 +539,7 @@ HTML 엘리먼트와 마찬가지로 다음과 같이 컴포넌트에 콘텐츠
 지금은 이것이 슬롯에 대해 알아야 할 전부입니다.
 그러나 이 페이지를 다 읽고 내용에 익숙해지면 나중에 다시 돌아와서 [Slots](/guide/components/slots)의 전체 가이드를 읽는 것이 좋습니다.
 
-## 동적 컴포넌트
+## 동적 컴포넌트 {#dynamic-components}
 
 때로는 탭 인터페이스와 같이 컴포넌트 간에 동적으로 전환하는 것이 유용할 수 있습니다:
 
@@ -583,7 +583,7 @@ HTML 엘리먼트와 마찬가지로 다음과 같이 컴포넌트에 콘텐츠
 `<component :is="...">`를 사용하여 여러 컴포넌트 간에 전환할 때, 다른 컴포넌트로 전환되면 컴포넌트가 마운트 해제됩니다.
 내장된 [`<KeepAlive>` 컴포넌트](/guide/built-ins/keep-alive.html)를 사용하여 비활성 컴포넌트를 "활성" 상태로 유지하도록 강제할 수 있습니다.
 
-## DOM 템플릿 파싱 주의 사항
+## DOM 템플릿 파싱 주의 사항 {#dom-template-parsing-caveats}
 
 Vue 템플릿을 DOM에서 직접 작성하는 경우, Vue는 DOM에서 템플릿 문자열을 검색해야 합니다.
 이것은 브라우저의 기본 HTML 파싱 동작으로 인해 몇 가지 주의 사항으로 이어집니다.
@@ -597,7 +597,7 @@ Vue 템플릿을 DOM에서 직접 작성하는 경우, Vue는 DOM에서 템플
 - `<script type="text/x-template">`
   :::
 
-### 대소문자를 구분하지 않음
+### 대소문자를 구분하지 않음 {#case-insensitivity}
 
 HTML 태그의 속성과 이름은 대소문자를 구분하지 않으므로 브라우저는 대문자를 소문자로 해석합니다.
 즉, DOM 내 템플릿을 사용할 때 PascalCase 컴포넌트 이름과 `props`의 camelCased 이름 또는 `v-on` 이벤트 이름은 모두 kebab-case(하이픈으로 구분된) 기반으로 사용해야 합니다:
@@ -618,7 +618,7 @@ const BlogPost = {
 <blog-post post-title="안녕!" @update-post="onUpdatePost"></blog-post>
 ```
 
-### 셀프 테그 닫기
+### 셀프 테그 닫기 {#self-closing-tags}
 
 컴포넌트에 자동 닫기 태그를 사용했습니다:
 
@@ -652,7 +652,7 @@ Vue의 템플릿 파서는 유형에 관계없이 모든 태그를 닫으라는
 </my-component> <!-- 그러나 브라우저는 여기에서 닫을 것입니다. -->
 ```
 
-### 엘리먼트 배치 제한
+### 엘리먼트 배치 제한 {#element-placement-restrictions}
 
 `<ul>`, `<ol>`, `<table>` 및 `<select>`와 같은 일부 HTML 엘리먼트에는 내부에 표시할 수 있는 엘리먼트에 대한 제한이 있습니다.
 또한 `<li>`, `<tr>` 및 `<option>`와 같은 일부 엘리먼트는 특정 다른 엘리먼트 내부에만 사용할 수 있습니다.

ko-KR/src/guide/essentials/computed.md

@@ -1,6 +1,6 @@
-# 계산된 속성
+# 계산된 속성 {#computed-properties}
 
-## 기본 예제
+## 기본 예제 {#basic-example}
 
 템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것입니다.
 템플릿에 너무 많은 논리를 넣으면 비대해져 유지 관리가 어려워질 수 있습니다.
@@ -142,7 +142,7 @@ Vue는 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것
 
 </div>
 
-## 계산된 캐싱 vs 메서드
+## 계산된 캐싱 vs 메서드 {#computed-caching-vs-methods}
 
 표현식에서 메소드를 호출하여 동일한 결과를 얻을 수도 있습니다:
 
@@ -210,7 +210,7 @@ const now = computed(() => Date.now())
 캐싱이 없다면 우리는 `list`의 getter를 불필요하게 많이 실행할 것입니다!
 캐싱을 원하지 않는 경우에만 메서드 호출을 사용하십시오.
 
-## 수정 가능한 계산된 속성
+## 수정 가능한 계산된 속성 {#writable-computed}
 
 계산된 속성은 기본적으로 getter 전용입니다.
 계산된 속성에 새 값을 할당하려고 하면 런타임 애러가 발생합니다.
@@ -273,9 +273,9 @@ const fullName = computed({
 
 </div>
 
-## 모범 사례
+## 모범 사례 {#best-practices}
 
-### getter에서 사이드 이펙트는 금물
+### getter에서 사이드 이펙트는 금물 {#getters-should-be-side-effect-free}
 
 계산된 속성의 getter 함수는 오로지 계산만 수행해야 함으로써, 사이드 이펙트는 없어야 함을 기억하는 것이 중요합니다.
 예를 들어, **getter에서 비동기 요청을 하거나 DOM을 변경하면 안됩니다!**
@@ -287,7 +287,7 @@ const fullName = computed({
 프로그래밍에서 함수가 결과값 이외에 다른 상태를 변경하는 행위
 :::
 
-### 계산된 값을 변경하지 마십시오
+### 계산된 값을 변경하지 마십시오 {#avoid-mutating-computed-value}
 
 계산된 속성에서 반환된 값은 파생된 상태입니다.
 임시 스냅샷으로 생각하십시오.

ko-KR/src/guide/essentials/conditional.md

@@ -1,4 +1,4 @@
-# 조건부 랜더링
+# 조건부 랜더링 {#conditional-rendering}
 
 <script setup>
 import { ref } from 'vue'
@@ -67,7 +67,7 @@ const awesome = ref(true)
 
 `v-else`와 마찬가지로 `v-else-if` 엘리먼트는 `v-if` 또는 `v-else-if` 엘리먼트 바로 다음에 와야 합니다.
 
-## `<template>`에서 `v-if`
+## `<template>`에서 `v-if` {#v-if-on-template}
 
 `v-if`는 디렉티브이므로 단일 엘리먼트에 연결해야 합니다.
 하지만 둘 이상의 엘리먼트를 전환하려면 어떻게 해야 할까요?

ko-KR/src/guide/essentials/event-handling.md

@@ -1,6 +1,6 @@
-# 이벤트 핸들링
+# 이벤트 핸들링 {#event-handling}
 
-## 이벤트 리스닝하기
+## 이벤트 리스닝하기 {#listening-to-events}
 
 일반적으로 `v-on` 디렉티브는 단축 문법으로 `@` 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있습니다.
 `v-on:click="handler"` 또는 줄여서 `@click="handler"`와 같이 사용합니다.
@@ -11,7 +11,7 @@
 
 2. **메서드 핸들러:** 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로.
 
-## 인라인 핸들러
+## 인라인 핸들러 {#inline-handlers}
 
 인라인 핸들러는 일반적으로 다음과 같이 간단한 경우에 사용됩니다:
 
@@ -50,7 +50,7 @@ data() {
 
 </div>
 
-## 메서드 핸들러
+## 메서드 핸들러 {#method-handlers}
 
 대부분의 이벤트 핸들러 논리는 복잡할 것이며, 인라인 핸들러에서는 실현 가능하지 않을 수 있습니다.
 그러므로 `v-on`은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행할 수 있게 구현되어 있습니다.
@@ -124,12 +124,12 @@ methods: {
 
 </div>
 
-### 메서드 vs 인라인 구분
+### 메서드 vs 인라인 구분 {#method-vs-inline-detection}
 
 템플릿 컴파일러는 `v-on` 값인 문자열이 유효한 JavaScript 식별자 또는 속성에 접근 가능한 경로인지를 확인해 매서드 핸들러를 감지합니다.
 예를 들어 `foo`, `foo.bar` 및 `foo['bar']`는 메서드 핸들러로 처리되는 반면, `foo()` 및 `count++`는 인라인 핸들러로 처리됩니다.
 
-## 인라인 핸들러에서 메서드 호출하기
+## 인라인 핸들러에서 메서드 호출하기 {#calling-methods-in-inline-handlers}
 
 메서드 이름을 직접 바인딩하는 대신, 인라인 핸들러에서 메서드를 호출할 수도 있습니다.
 이를 통해 네이티브 이벤트 객체 대신 사용자 지정 인수를 메서드에 전달할 수 있습니다:
@@ -171,7 +171,7 @@ methods: {
 
 </div>
 
-## 인라인 핸들러에서 이벤트 객체 접근하기
+## 인라인 핸들러에서 이벤트 객체 접근하기 {#accessing-event-argument-in-inline-handlers}
 
 때로는 인라인 핸들러에서 네이티브 DOM 이벤트 객체에 접근해야 하는 경우도 있습니다.
 특수한 키워드인 `$event`를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있습니다:
@@ -217,7 +217,7 @@ methods: {
 
 </div>
 
-## 이벤트 수식어
+## 이벤트 수식어 {#event-modifiers}
 
 이벤트 핸들러 내에서 `event.preventDefault()` 또는 `event.stopPropagation()`을 호출하는 것은 매우 흔한 일입니다.
 메서드 내에서 이 작업을 쉽게 수행할 수 있지만, 메서드가 DOM 이벤트에 대한 세부적인 처리 로직 없이 오로지 데이터 처리 로직만 있다면 코드 유지보수에 더 좋을 것입니다.
@@ -277,7 +277,7 @@ methods: {
 따라서 `.passive`와 `.prevent`를 함께 사용해서는 안되며, 그렇게 할 경우 브라우저(콘솔)에서 경고 메세지를 볼 수 있습니다.
 :::
 
-## 입력키 수식어
+## 입력키 수식어 {#key-modifiers}
 
 키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원합니다:
 
@@ -294,7 +294,7 @@ methods: {
 
 위의 예에서 핸들러는 `$event.key`가 `'PageDown'`일 경우에만 호출됩니다:
 
-### 입력키 별칭
+### 입력키 별칭 {#key-aliases}
 
 Vue는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니다:
 
@@ -308,7 +308,7 @@ Vue는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니
 - `.left`
 - `.right`
 
-### 시스템 입력키 수식어
+### 시스템 입력키 수식어 {#system-modifier-keys}
 
 마우스 또는 키보드 이벤트 리스너는 아래 수식어를 사용하여, 해당 입력키를 누를 때만 트리거 되도록 할 수 있습니다:
 
@@ -341,7 +341,7 @@ Symbolics 키보드에서 메타는 "META" 또는 "Meta"로 표시됩니다.
 `ctrl` 키만 땔 때는 트리거되지 않습니다.
 :::
 
-### `.exact` 수식어
+### `.exact` 수식어 {#exact-modifier}
 
 `.exact` 수식어를 사용하면 이벤트를 트리거하는 데 필요한 시스템 수식어의 정확한 조합을 제어할 수 있습니다.
 
@@ -356,7 +356,7 @@ Symbolics 키보드에서 메타는 "META" 또는 "Meta"로 표시됩니다.
 <button @click.exact="onClick">A</button>
 ```
 
-## 마우스 버튼 수식어
+## 마우스 버튼 수식어 {#mouse-button-modifiers}
 
 - `.left`
 - `.right`