Skip to content
14 changes: 7 additions & 7 deletions src/v2/guide/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Vue.component('my-component', {
})
```

<p class="tip">Vue는 사용자 지정 태그 이름에 대해 [W3C 규칙](http://www.w3.org/TR/custom-elements/#concepts)을 적용하지 않습니다 (모두 소문자이어야 하고 하이픈을 포함해야합니다). 그러나 이 규칙을 따르는 것이 좋습니다.</p>
<p class="tip">Vue는 사용자 지정 태그 이름에 대해 <a href="http://www.w3.org/TR/custom-elements/#concepts">W3C 규칙</a>을 적용하지 않습니다 (모두 소문자이어야 하고 하이픈을 포함해야합니다). 그러나 이 규칙을 따르는 것이 좋습니다.</p>

일단 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트,`<my-component></my-component>`로 사용할 수 있습니다. 루트 Vue 인스턴스를 인스턴스화하기 **전에** 컴포넌트가 등록되어 있는지 확인하십시오. 전체 예제는 다음과 같습니다.

Expand Down Expand Up @@ -403,7 +403,7 @@ todo: {
}
```

<p class="tip">자바 스크립트의 객체와 배열은 참조로 전달되므로 prop가 배열이나 객체인 경우 하위 객체 또는 배열 자체를 부모 상태로 변경하면 부모 상태에 **영향을 줍니다**.</p>
<p class="tip">자바 스크립트의 객체와 배열은 참조로 전달되므로 prop가 배열이나 객체인 경우 하위 객체 또는 배열 자체를 부모 상태로 변경하면 부모 상태에 <strong>영향을 줍니다</strong>.</p>

### Prop 검증

Expand Down Expand Up @@ -506,12 +506,12 @@ Props가 아닌 속성은 컴포넌트로 전달되지만 해당 props는 정의
- `$on(eventName)`을 사용하여 이벤트를 감지 하십시오.
- `$emit(eventName)`을 사용하여 이벤트를 트리거 하십시오.

<p class="tip">Vue의 이벤트 시스템은 브라우저의 [EventTarget API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)와 별개입니다. 비슷하게 작동하지만 `$on``$emit``addEventListener``dispatchEvent`의 별칭이 __아닙니다__.</p>
<p class="tip">Vue의 이벤트 시스템은 브라우저의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>와 별개입니다. 비슷하게 작동하지만 <code>$on</code><code>$emit</code><code>addEventListener</code><code>dispatchEvent</code>의 별칭이 <u>아닙니다</u>.</p>

또한, 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 `v-on` 을 사용하여 자식 컴포넌트에서 보내진 이벤트를 청취할 수 있습니다.


<p class="tip">`$on`은 자식에서 호출한 이벤트는 감지하지 않습니다. `v-on`을 템플릿에 반드시 지정해야 합니다. 아래의 예제를 보십시오.</p>
<p class="tip"><code>$on</code>은 자식에서 호출한 이벤트는 감지하지 않습니다. <code>v-on</code>을 템플릿에 반드시 지정해야 합니다. 아래의 예제를 보십시오.</p>

예제:

Expand Down Expand Up @@ -781,7 +781,7 @@ Vue.component('my-checkbox', {
</my-checkbox>
```

<p class="tip">`checked` prop를 명시적으로 선언해야 합니다.</p>
<p class="tip"><code>checked</code> prop를 명시적으로 선언해야 합니다.</p>

### 비 부모-자식간 통신

Expand Down Expand Up @@ -1134,7 +1134,7 @@ var child = parent.$refs.profile

`ref`가 `v-for`와 함께 사용될 때, 얻을 수 있는 ref는 데이터 소스를 미러링하는 자식 컴포넌트를 포함하는 배열이 될 것입니다.

<p class="tip">`$refs` 는 컴포넌트가 렌더링 된 후에만 채워지며 반응적이지 않습니다. 그것은 직접 자식 조작을 위한 escape 해치를 의미합니다 - 템플릿이나 계산 된 속성에서 `$refs`를 사용하지 말아야합니다.</p>
<p class="tip"><code>$refs</code> 는 컴포넌트가 렌더링 된 후에만 채워지며 반응적이지 않습니다. 그것은 직접 자식 조작을 위한 escape 해치를 의미합니다 - 템플릿이나 계산 된 속성에서 <code>$refs</code>를 사용하지 말아야합니다.</p>

### 비동기 컴포넌트

Expand Down Expand Up @@ -1183,7 +1183,7 @@ new Vue({
})
```

<p class="tip">비동기 컴포넌트를 사용하려는 <strong>Browserify</strong> 사용자인 경우, 작성자는 불행히도 비동기로드가 Browserify에서 지원하지 않는 것이라고 [분명하게 주장합니다.](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) 적어도 공식적으로. Browserify 커뮤니티는 기존 및 복잡한 응용 프로그램에 도움이 될 수있는 [몇 가지 해결 방법](https://github.com/vuejs/vuejs.org/issues/620)을 발견했습니다. 다른 모든 시나리오의 경우 기본 제공되는 비동기식 지원을 위해 Webpack을 사용하는 것이 좋습니다.</p>
<p class="tip">비동기 컴포넌트를 사용하려는 <strong>Browserify</strong> 사용자인 경우, 작성자는 불행히도 비동기로드가 Browserify에서 지원하지 않는 것이라고 <a href="https://github.com/substack/node-browserify/issues/58#issuecomment-21978224">분명하게 주장합니다.</a> 적어도 공식적으로. Browserify 커뮤니티는 기존 및 복잡한 응용 프로그램에 도움이 될 수있는 <a href="https://github.com/vuejs/vuejs.org/issues/620">몇 가지 해결 방법</a>을 발견했습니다. 다른 모든 시나리오의 경우 기본 제공되는 비동기식 지원을 위해 Webpack을 사용하는 것이 좋습니다.</p>

### 고급 비동기 컴포넌트

Expand Down
4 changes: 2 additions & 2 deletions src/v2/guide/conditional.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ new Vue({

차이점은 `v-show`가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아있다는 점입니다. `v-show`는 단순히 엘리먼트에 `display` CSS 속성을 토글합니다.

<p class="tip">`v-show`는 `<template>` 구문을 지원하지 않으며 `v-else`와도 작동하지 않습니다.</p>
<p class="tip"><code>v-show</code>는 <code>&lt;template&gt;</code> 구문을 지원하지 않으며 <code>v-else</code>와도 작동하지 않습니다.</p>

## `v-if` vs `v-show`

Expand All @@ -187,6 +187,6 @@ new Vue({

## `v-if` 와 `v-for`

<p class="tip">`v-if`와 `v-for`을 함께 사용하는 것을 권장하지 않습니다. 자세한 내용은[style guide](/v2/style-guide/#Avoid-v-if-with-v-for-essential)을 확인하십시오.</p>
<p class="tip"><code>v-if</code>와 <code>v-for</code>을 함께 사용하는 것을 권장하지 않습니다. 자세한 내용은 <a href="/v2/style-guide/#v-if와-v-for를-동시에-사용하지-마세요-필수">스타일 가이드</a>을 확인하십시오.</p>

`v-if`와 함께 사용하는 경우, `v-for`는 `v-if`보다 높은 우선순위를 갖습니다. 자세한 내용은 <a href="../guide/list.html#v-for-with-v-if">리스트 렌더링 가이드</a>를 확인하십시오.
20 changes: 10 additions & 10 deletions src/v2/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ methods: {
<div v-on:click.self="doThat">...</div>
```

<p class="tip">관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 `v-on:click.prevent.self`를 사용하면 **모든 클릭**을 막을 수 있으며 `v-on:click.self.prevent`는 엘리먼트 자체에 대한 클릭만 방지합니다.</p>
<p class="tip">관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 <code>v-on:click.prevent.self</code>를 사용하면 <strong>모든 클릭</strong>을 막을 수 있으며 <code>v-on:click.self.prevent</code>는 엘리먼트 자체에 대한 클릭만 방지합니다.</p>

> 2.1.4에 새로 추가됨

Expand All @@ -217,16 +217,16 @@ Vue는 [`addEventListener`의 `passive` option](https://developer.mozilla.org/en
<div v-on:scroll.passive="onScroll">...</div>
```

추가로, Vue는 `.passive` 수식어를 제공합니다. 특히 모바일 환경에서 성능향상에 도움이 됩니다. 예를 들어, 브라우저는 핸들러가 `event.preventDefault()`를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤 합니다. `.passive` 수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있습니다.
`.passive` 수식어는 특히 모바일 환경에서 성능향상에 도움이 됩니다. 예를 들어, 브라우저는 핸들러가 `event.preventDefault()`를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤 합니다. `.passive` 수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있습니다.

<p class="tip">`.passive`와 `.prevent`를 함께 사용하지 마세요.`.prevent`는 무시되고 브라우저는 오류를 발생시킬 것입니다. `.passive`는 당신이 이벤트의 기본 행동을 무시하지 _않기를 원하는_ 브라우저와 상호작용한다는 사실을 기억하세요.</p>
<p class="tip"><code>.passive</code>와 <code>.prevent</code>를 함께 사용하지 마세요. <code>.prevent</code>는 무시되고 브라우저는 오류를 발생시킬 것입니다. <code>.passive</code>는 당신이 이벤트의 기본 행동을 무시하지 <u>않기를 원하는</u> 브라우저와 상호작용한다는 사실을 기억하세요.</p>

## 키 수식어

키보드 이벤트를 청취할 때, 종종 공통 키 코드를 확인해야 합니다. Vue는 키 이벤트를 수신할 때 `v-on`에 대한 키 수식어를 추가할 수 있습니다.

``` html
<!-- only call `vm.submit()` when the `key` is `Enter` -->
<!-- `key`가 `Enter`일 때만 `vm.submit()`이 호출됩니다 -->
<input v-on:keyup.enter="submit">
```

Expand All @@ -238,17 +238,17 @@ Vue는 [`addEventListener`의 `passive` option](https://developer.mozilla.org/en

위의 예제에서 핸들러는 `$event.key === 'PageDown'` 일 때에만 호출됩니다.

### Key Codes
### 키 코드

<p class="tip">The use of `keyCode` events [is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and may not be supported in new browsers.</p>
<p class="tip"><code>keyCode</code> 이벤트의 사용은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">더 이상 권장되지 않으며</a> 새로운 브라우저에서는 지원되지 않을 수도 있습니다.</p>

Using `keyCode` attributes is also permitted:
`keyCode` 속성의 사용도 가능합니다:

``` html
<input v-on:keyup.13="submit">
```

Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:
Vue는 과거 브라우저 지원을 위해 필요 시 가장 많이 사용되는 키 코드들의 별칭(alias)들을 제공합니다.

- `.enter`
- `.tab`
Expand All @@ -260,7 +260,7 @@ Vue provides aliases for the most commonly used key codes when necessary for leg
- `.left`
- `.right`

<p class="tip">일부 키(`.esc`와 모든 화살표 키)는 IE9에서 일관성 없는 `key` 값을 가지고 있습니다. IE9를 지원해야하는 경우 내장 별칭이 선호됩니다.</p>
<p class="tip">일부 키(<code>.esc</code>와 모든 화살표 키)는 IE9에서 일관성 없는 <code>key</code> 값을 가지고 있습니다. IE9를 지원해야하는 경우 내장 별칭이 선호됩니다.</p>

또한 전역 `config.keyCodes` 객체를 통해 [사용자 지정 키 수식어 별칭을 지정할 수 있습니다.](../api/#keyCodes)

Expand Down Expand Up @@ -293,7 +293,7 @@ Vue.config.keyCodes.f1 = 112
```

<p class="tip">
수식어 키는 일반 키와 다르며 `keyup` 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,`keyup.ctrl`는 `ctrl`을 누른 상태에서 키를 놓으면 트리거됩니다. `ctrl` 키만 놓으면 트리거되지 않습니다.
수식어 키는 일반 키와 다르며 <code>keyup</code> 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉, <code>keyup.ctrl</code>는 <code>ctrl</code>을 누른 상태에서 키를 놓으면 트리거됩니다. <code>ctrl</code> 키만 놓으면 트리거되지 않습니다.
</p>

### `.exact` 수식어
Expand Down
10 changes: 5 additions & 5 deletions src/v2/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ order: 10

## 기본 사용법

`v-model` 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 `v-model`은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 "syntax sugar"이며 일부 경우에 특별한 주의를 해야합니다.
`v-model` 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 `v-model`은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 "편의 문법(syntax sugar)"이며 일부 경우에 특별한 주의를 해야합니다.

<p class="tip">
`v-model`은 모든 form 엘리먼트의 초기 `value`와 `checked` 그리고 `selected` 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.
<code>v-model</code>은 모든 form 엘리먼트의 초기 <code>value</code>와 <code>checked</code> 그리고 <code>selected</code> 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 <code>data</code> 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.
</p>

`v-model`은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송합니다 :
- text 와 textarea 태그는 `value`속성과 `input`이벤트를 사용합니다.
- 체크박스들과 라디오버튼들은 `checked` 속성과 `change` 이벤트를 사용합니다.
- Select 태그는 `value`를 prop으로, `change`를 이벤트로 사용합니다.

<p class="tip" id="vmodel-ime-tip">[IME](https://en.wikipedia.org/wiki/Input_method) (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 `v-model`이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 `input` 이벤트를 대신 사용하십시오.</p>
<p class="tip" id="vmodel-ime-tip"><a href="https://en.wikipedia.org/wiki/Input_method">IME</a> (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 <code>v-model</code>이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 <code>input</code> 이벤트를 대신 사용하십시오.</p>

### 문자열

Expand Down Expand Up @@ -211,7 +211,7 @@ new Vue({
</script>
{% endraw %}

<p class="tip">`v-model` 표현식의 초기 값이 어떤 옵션에도 없으면, `&lt;select&gt;` 엘리먼트는 "선택없음" 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.</p>
<p class="tip"><code>v-model</code> 표현식의 초기 값이 어떤 옵션에도 없으면, <code>&lt;select&gt;</code> 엘리먼트는 "선택없음" 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.</p>

다중 셀렉트 (배열을 바인딩 합니다):

Expand Down Expand Up @@ -329,7 +329,7 @@ vm.toggle === 'yes'
vm.toggle === 'no'
```

<p class="tip">`true-value``false-value` 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 `value` 속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : '예' 또는 '아니요') 라디오를 대신 사용하십시오.</p>
<p class="tip"><code>true-value</code><code>false-value</code> 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 <code>value</code> 속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : '예' 또는 '아니요') 라디오를 대신 사용하십시오.</p>

### 라디오

Expand Down