/src/guide/reusability

 - 용어 변경 (지시문 → 디렉티브)

Author: niceplugin

ko-KR/src/guide/reusability/custom-directives.md

@@ -1,4 +1,4 @@
-# 커스텀 지시문
+# 커스텀 디렉티브
 
 <script setup>
 const vFocus = {
@@ -10,15 +10,15 @@ const vFocus = {
 
 ## 소개
 
-코어에 포함된 기본 지시문 세트(예: `v-model` 또는 `v-show`) 외에도 Vue를 사용하면 커스텀 지시문을 정의할 수 있습니다.
+코어에 포함된 기본 디렉티브 세트(예: `v-model` 또는 `v-show`) 외에도 Vue를 사용하면 커스텀 디렉티브를 정의할 수 있습니다.
 
 우리는 Vue에서 [컴포넌트 기초](/guide/essentials/component-basics.html)와 [구성화](./composables)라는 두 가지 형태의 코드 재사용을 도입했습니다.
 컴포넌트는 주요 구성-요소(building-block)이고, 구성화는 상태 저장 로직을 재사용하는 데 중점을 둡니다.
-반면에 커스텀 지시문은 주로 일반 엘리먼트에 대한 저수준(low-level) DOM 접근과 관련된 로직을 재사용하기 위한 것입니다.
+반면에 커스텀 디렉티브는 주로 일반 엘리먼트에 대한 저수준(low-level) DOM 접근과 관련된 로직을 재사용하기 위한 것입니다.
 
-커스텀 지시문은 컴포넌트의 수명주기 훅을 포함하는 객체처럼 정의됩니다.
-훅은 지시문이 바인딩된 엘리먼트를 수신합니다.
-다음은 엘리먼트가 Vue에 의해 DOM에 삽입될 때, `<input>`에 포커스 되는 커스텀 지시문 구현의 예제입니다:
+커스텀 디렉티브는 컴포넌트의 수명주기 훅을 포함하는 객체처럼 정의됩니다.
+훅은 디렉티브가 바인딩된 엘리먼트를 수신합니다.
+다음은 엘리먼트가 Vue에 의해 DOM에 삽입될 때, `<input>`에 포커스 되는 커스텀 디렉티브 구현의 예제입니다:
 
 <div class="composition-api">
 
@@ -63,14 +63,14 @@ export default {
 </div>
 
 페이지의 다른 곳을 클릭하지 않았다고 가정하면, 위의 인풋은 자동으로 포커스 되어야 합니다.
-이 지시문은 페이지 로드 시 뿐만 아니라, Vue에서 동적으로 엘리먼트를 삽입할 때도 작동하기 때문에 `autofocus` 속성보다 더 유용합니다.
+이 디렉티브는 페이지 로드 시 뿐만 아니라, Vue에서 동적으로 엘리먼트를 삽입할 때도 작동하기 때문에 `autofocus` 속성보다 더 유용합니다.
 
 <div class="composition-api">
 
-`<script setup>`에서 `v` 접두사로 시작하는 모든 camelCase 변수를 커스텀 지시문으로 사용할 수 있습니다.
+`<script setup>`에서 `v` 접두사로 시작하는 모든 camelCase 변수를 커스텀 디렉티브로 사용할 수 있습니다.
 위의 예에서 `vFocus`는 템플릿에서 `v-focus`로 사용할 수 있습니다.
 
-`<script setup>`을 사용하지 않는 경우, `directives` 옵션을 사용하여 커스텀 지시문을 등록할 수 있습니다:
+`<script setup>`을 사용하지 않는 경우, `directives` 옵션을 사용하여 커스텀 디렉티브를 등록할 수 있습니다:
 
 ```js
 export default {
@@ -90,12 +90,12 @@ export default {
 
 <div class="options-api">
 
-컴포넌트와 마찬가지로 커스텀 지시문은 템플릿에서 사용할 수 있도록 등록해야 합니다.
+컴포넌트와 마찬가지로 커스텀 디렉티브는 템플릿에서 사용할 수 있도록 등록해야 합니다.
 위의 예에서는 `directives` 옵션을 통해 로컬 등록을 사용하고 있습니다.
 
 </div>
 
-앱 수준에서 커스텀 지시문을 전역적으로 등록하는 것도 일반적입니다:
+앱 수준에서 커스텀 디렉티브를 전역적으로 등록하는 것도 일반적입니다:
 
 ```js
 const app = createApp({})
@@ -107,13 +107,13 @@ app.directive('focus', {
 ```
 
 :::tip
-커스텀 지시문은 원하는 기능을 직접 DOM 조작을 통해서만 달성할 수 있는 경우에만 사용해야 합니다.
-가능하면 `v-bind`와 같은 내장 지시문을 사용하여 선언적 템플릿을 사용하는 것이 더 효율적이고 서버 렌더링에 친숙하기 때문입니다.
+커스텀 디렉티브는 원하는 기능을 직접 DOM 조작을 통해서만 달성할 수 있는 경우에만 사용해야 합니다.
+가능하면 `v-bind`와 같은 내장 디렉티브를 사용하여 선언적 템플릿을 사용하는 것이 더 효율적이고 서버 렌더링에 친숙하기 때문입니다.
 :::
 
-## 지시문 훅
+## 디렉티브 훅
 
-지시문을 정의하는 객체는 다음과 같은 여러 훅 기능을 제공할 수 있습니다(모두 선택 사항):
+디렉티브를 정의하는 객체는 다음과 같은 여러 훅 기능을 제공할 수 있습니다(모두 선택 사항):
 
 ```js
 const myDirective = {
@@ -141,23 +141,23 @@ const myDirective = {
 
 ### 훅 인자
 
-지시문 훅에는 다음 인자가 전달됩니다:
+디렉티브 훅에는 다음 인자가 전달됩니다:
 
-- `el`: 지시문이 바인딩된 엘리먼트입니다. DOM을 직접 조작하는 데 사용할 수 있습니다.
+- `el`: 디렉티브가 바인딩된 엘리먼트입니다. DOM을 직접 조작하는 데 사용할 수 있습니다.
 
 - `binding`: 다음 속성을 포함하는 객체입니다.
 
-  - `value`: 지시문에 전달된 값입니다. 예를 들어 `v-my-directive="1 + 1"`에서 value는 `2`입니다.
+  - `value`: 디렉티브에 전달된 값입니다. 예를 들어 `v-my-directive="1 + 1"`에서 value는 `2`입니다.
   - `oldValue`: 이것은 `beforeUpdate` 및 `updated`에서만 사용할 수 있습니다. 값이 변경되었는지 여부에 관계없이 사용 가능합니다.
-  - `arg`: 지시문에 전달된 인자(있는 경우). 예를 들어 `v-my-directive:foo`에서 인자는 `"foo"`입니다.
+  - `arg`: 디렉티브에 전달된 인자(있는 경우). 예를 들어 `v-my-directive:foo`에서 인자는 `"foo"`입니다.
   - `modifiers`: 수식어가 있는 경우 수식어를 포함하는 객체입니다. 예를 들어 `v-my-directive.foo.bar`에서 수식어 객체는 `{ foo: true, bar: true }`입니다.
-  - `instance`: 지시문이 사용되는 컴포넌트의 인스턴스입니다.
-  - `dir`: 지시문을 정의하는 객체
+  - `instance`: 디렉티브가 사용되는 컴포넌트의 인스턴스입니다.
+  - `dir`: 디렉티브를 정의하는 객체
 
 - `vnode`: 바인딩된 엘리먼트를 나타내는 기본 VNode.
 - `prevNode`: 이전 렌더링에서 바인딩된 엘리먼트를 나타내는 VNode입니다. `beforeUpdate` 및 `updated` 훅에서만 사용할 수 있습니다.
 
-다음과 같은 지시문을 사용한다고 가정한 예제를 살펴봅시다:
+다음과 같은 디렉티브를 사용한다고 가정한 예제를 살펴봅시다:
 
 ```vue-html
 <div v-example:foo.bar="baz">
@@ -174,14 +174,14 @@ const myDirective = {
 }
 ```
 
-내장 지시문과 유사하게 커스텀 지시문 인수는 동적일 수 있습니다.
+내장 디렉티브와 유사하게 커스텀 디렉티브 인수는 동적일 수 있습니다.
 예를 들어:
 
 ```vue-html
 <div v-example:[arg]="value"></div>
 ```
 
-여기서 지시문 인자는 컴포넌트 상태의 `arg` 속성을 기반으로 반응형으로 업데이트됩니다.
+여기서 디렉티브 인자는 컴포넌트 상태의 `arg` 속성을 기반으로 반응형으로 업데이트됩니다.
 
 :::tip 참고
 `el`을 제외하고 이러한 인수들은 읽기 전용으로 처리하고 절대 수정해서는 안 됩니다.
@@ -190,8 +190,8 @@ const myDirective = {
 
 ## 간단하게 함수로 사용하기
 
-커스텀 지시문이 `mounted` 및 `updated`에 대해 동일한 동작을 갖는 것이 일반적이며, 다른 훅은 필요하지 않습니다.
-이러한 경우 지시문을 객체가 아닌 함수로 정의할 수 있습니다:
+커스텀 디렉티브가 `mounted` 및 `updated`에 대해 동일한 동작을 갖는 것이 일반적이며, 다른 훅은 필요하지 않습니다.
+이러한 경우 디렉티브를 객체가 아닌 함수로 정의할 수 있습니다:
 
 ```vue-html
 <div v-color="color"></div>
@@ -206,8 +206,8 @@ app.directive('color', (el, binding) => {
 
 ## 객체를 값으로 전달하기
 
-지시문에 여러 값이 필요한 경우, JavaScript 객체 리터럴을 전달할 수도 있습니다.
-지시문은 모든 유효한 JavaScript 표현식을 사용할 수 있음을 기억하십시오.
+디렉티브에 여러 값이 필요한 경우, JavaScript 객체 리터럴을 전달할 수도 있습니다.
+디렉티브는 모든 유효한 JavaScript 표현식을 사용할 수 있음을 기억하십시오.
 
 ```vue-html
 <div v-demo="{ color: 'white', text: '안녕!' }"></div>
@@ -222,7 +222,7 @@ app.directive('demo', (el, binding) => {
 
 ## 컴포넌트에서 사용
 
-컴포넌트에 사용될 때 커스텀 지시문은 [폴스루 속성](/guide/components/attrs.html)과 유사하게 항상 컴포넌트의 루트 노드에 적용됩니다.
+컴포넌트에 사용될 때 커스텀 디렉티브는 [폴스루 속성](/guide/components/attrs.html)과 유사하게 항상 컴포넌트의 루트 노드에 적용됩니다.
 
 ```vue-html
 <MyComponent v-demo="test" />
@@ -231,12 +231,12 @@ app.directive('demo', (el, binding) => {
 ```vue-html
 <!-- MyComponent 템플릿에서 -->
 
-<div> <!-- 여기에 v-demo 지시문이 적용됩니다. -->
+<div> <!-- 여기에 v-demo 디렉티브가 적용됩니다. -->
   <span>컴포넌트 컨텐츠...</span>
 </div>
 ```
 
 컴포넌트에는 잠재적으로 둘 이상의 루트 노드가 있을 수 있습니다.
-다중 루트 컴포넌트에 적용하려고 하면 지시문이 무시되고 애러가 발생합니다.
-속성과 달리 지시문은 `v-bind="$attrs"`를 사용하여 다른 엘리먼트에 전달할 수 없습니다.
-일반적으로 컴포넌트에 커스텀 지시문을 사용하는 것은 **권장되지 않습니다**.
+다중 루트 컴포넌트에 적용하려고 하면 디렉티브가 무시되고 애러가 발생합니다.
+속성과 달리 디렉티브는 `v-bind="$attrs"`를 사용하여 다른 엘리먼트에 전달할 수 없습니다.
+일반적으로 컴포넌트에 커스텀 디렉티브를 사용하는 것은 **권장되지 않습니다**.

ko-KR/src/guide/reusability/plugins.md

@@ -28,7 +28,7 @@ const myPlugin = {
 
 플러그인에 대해 엄격하게 정의된 범위는 없지만 플러그인이 유용한 일반적인 시나리오는 다음과 같습니다:
 
-1. [`app.component()`](/api/application.html#app-component) 및 [`app.directive()`](/api/application.html#app-directive)를 사용하여 하나 이상의 전역 컴포넌트 또는 커스텀 지시문을 등록합니다.
+1. [`app.component()`](/api/application.html#app-component) 및 [`app.directive()`](/api/application.html#app-directive)를 사용하여 하나 이상의 전역 컴포넌트 또는 커스텀 디렉티브를 등록합니다.
 
 2. [`app.provide()`](/api/application.html#app-provide)를 호출하여 앱 전체에 리소스를 [주입 가능](/guide/components/provide-inject.html)하게 만듭니다.