Merge pull request #198 from wonny-log/translation/guide

Translate paragraphs in Guide

Author: ChangJoo-Park

src/v2/guide/computed.md

@@ -214,35 +214,34 @@ var watchExampleVM = new Vue({
     // 질문이 변경될 때 마다 이 기능이 실행됩니다.
     question: function (newQuestion) {
       this.answer = '입력을 기다리는 중...'
-      this.getAnswer()
+      this.debouncedGetAnswer()
     }
   },
-  methods: {
+  created: function () {
     // _.debounce는 lodash가 제공하는 기능으로
     // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
     // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
     // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
     // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
     // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
-    getAnswer: _.debounce(
-      function () {
-        if (this.question.indexOf('?') === -1) {
-          this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
-          return
-        }
-        this.answer = '생각중...'
-        var vm = this
-        axios.get('https://yesno.wtf/api')
-          .then(function (response) {
-            vm.answer = _.capitalize(response.data.answer)
-          })
-          .catch(function (error) {
-            vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
-          })
-      },
-      // 사용자가 입력을 기다리는 시간(밀리세컨드) 입니다.
-      500
-    )
+    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
+  },
+  methods: {
+    getAnswer: function () {
+      if (this.question.indexOf('?') === -1) {
+        this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
+        return
+      }
+      this.answer = '생각중...'
+      var vm = this
+      axios.get('https://yesno.wtf/api')
+        .then(function (response) {
+          vm.answer = _.capitalize(response.data.answer)
+        })
+        .catch(function (error) {
+          vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
+        })
+    }
   }
 })
 </script>

src/v2/guide/conditional.md

@@ -6,26 +6,17 @@ order: 7
 
 ## `v-if`
 
-Handlebars와 같은 문자열 템플릿에서는 다음과 같은 조건부 블록을 작성할 수 있습니다.
+`v-if` 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다.
 
 ``` html
-<!-- Handlebars 템플릿 -->
-{{#if ok}}
-  <h1>Yes</h1>
-{{/if}}
-```
-
-Vue에서는 `v-if` 디렉티브를 사용하여 같은 결과를 얻을 수 있습니다.
-
-``` html
-<h1 v-if="ok">Yes</h1>
+<h1 v-if="awesome">Vue is awesome!</h1>
 ```
 
 `v-else`와 함께 "else 블록"을 추가하는 것도 가능합니다.
 
 ``` html
-<h1 v-if="ok">Yes</h1>
-<h1 v-else>No</h1>
+<h1 v-if="awesome">Vue is awesome!</h1>
+<h1 v-else>Oh no 😢</h1>
 ```
 
 ### `<template>`에 `v-if`을 갖는 조건부 그룹 만들기
@@ -57,7 +48,7 @@ Vue에서는 `v-if` 디렉티브를 사용하여 같은 결과를 얻을 수 있
 
 ### `v-else-if`
 
-> 2.1.0부터 새롭게 추가됨
+> 2.1.0+부터 새롭게 추가됨
 
 `v-else-if`는 이름에서 알 수 있듯, `v-if`에 대한 "else if 블록" 역할을 합니다. 또한 여러 개를 사용할 수 있습니다.
 
@@ -196,4 +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>
+
 `v-if`와 함께 사용하는 경우, `v-for`는  `v-if`보다 높은 우선순위를 갖습니다. 자세한 내용은 <a href="../guide/list.html#v-for-with-v-if">리스트 렌더링 가이드</a>를 확인하십시오.

src/v2/guide/index.md

@@ -75,6 +75,8 @@ var app = new Vue({
 
 첫 Vue 앱을 성공적으로 만들었습니다! 이것은 문자열 템플릿을 렌더링하는 것과 매우 유사하지만, Vue.JS 내부에서는 더 많은 작업을 하고 있습니다. 이제 데이터와 DOM이 연결되었으며 모든 것이 **반응형**이 되었습니다. 우리는 그것을 어떻게 확인할 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 `app.message`를 다른 값으로 설정해 보십시오. 위 예제가 업데이트 변경된 값에 따라 업데이트되는 것을 볼 수 있습니다.
 
+더 이상 HTML과 직접 상호작용할 필요가 없습니다. Vue 앱은 단일 DOM 요소(우리의 경우 `#app`)에 연결되어 DOM 요소를 완전히 제어합니다. HTML는 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생합니다.
+
 텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할 수 있습니다.
 
 ``` html

src/v2/guide/instance.md

@@ -16,9 +16,8 @@ var vm = new Vue({
 
 엄격히 [MVVM 패턴](https://en.wikipedia.org/wiki/Model_View_ViewModel)과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다. 관례적으로, Vue 인스턴스를 참조하기 위해 종종 변수 `vm`(ViewModel의 약자)을 사용합니다.
 
-Vue 인스턴스를 인스턴스화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함 할 수있는 **options 객체**를 전달 해야합니다. 전체 옵션 목록은 [API reference](../api)에서 찾을 수 있습니다.
+Vue 인스턴스를 생성할 때는 **options 객체**를 전달해야 합니다. 이 가이드는 대부분 원하는 생성을 구현할 때 이런 옵션들을 사용하여 원하는 동작을 구현하는 방법에 대해 다룹니다. 전체 옵션 목록은 [API reference](../api/#Options-Data)에서 확인할 수 있습니다.
 
-`Vue` 생성자는 미리 정의 된 옵션으로 재사용 가능한 **컴포넌트 생성자**를 생성하도록 확장 될 수 있습니다
 Vue 앱은 `new Vue`를 통해 만들어진 `루트 Vue 인스턴스`로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다. 예를 들어 Todo 앱의 컴포넌트 트리는 다음과 같습니다.
 
 ```
@@ -32,11 +31,11 @@ Root Instance
       └─ TodoListStatistics
 ```
 
-확장된 인스턴스를 만들수는 있으나 대개 템플릿에서 사용자 지정 엘리먼트로 선언적으로 작성하는 것이 좋습니다. 나중에 [컴포넌트 시스템](components.html)에 대해 자세히 설명합니다. 지금은 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스라는 것을 알아야 합니다.
+나중에 [컴포넌트 시스템](components.html)에 대해 자세히 설명합니다. 지금은 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스이기에 모두 같은 옵션 객체(몇 가지 루트 인스턴스 전용 옵션 제외)를 전달해야 하는 것만 알면 됩니다.
 
-## 속성과 메소드
+## 데이터와 메소드
 
-각 Vue 인스턴스는 `data` 객체에 있는 모든 속성을 **프록시** 처리 합니다.
+Vue 인스턴스가 생성될 때 `data` 객체에 있는 모든 속성이 Vue의 **반응형 시스템**에 추가됩니다. 각 속성값이 변경될 때 뷰가 "반응"하여 새로운 값과 일치하도록 업데이트됩니다.
 
 ``` js
 // 데이터 객체
@@ -47,14 +46,16 @@ var vm = new Vue({
   data: data
 })
 
-// 같은 객체를 참조합니다!
+// 인스턴스에 있는 속성은
+// 원본 데이터에 있는 값을 반환합니다.
 vm.a === data.a // => true
 
-// 속성 설정은 원본 데이터에도 영향을 미칩니다.
+// 인스턴스에 있는 속성값을 변경하면
+// 원본 데이터에도 영향을 미칩니다.
 vm.a = 2
 data.a // => 2
 
-// ... 당연하게도
+// ... 반대로 마찬가지입니다.
 data.a = 3
 vm.a // => 3
 ```
@@ -145,7 +146,7 @@ new Vue({
 
 
 <p class="tip">options 속성이나 콜백에 `created: () => console.log(this.a)` 이나 `vm.$watch('a', newValue => this.myMethod())` 와 같은 [화살표 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98) 사용을 지양하기 바랍니다.
-화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, `this` 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 `Uncaught TypeError: Cannot read property of undefined` 또는 `Uncaught TypeError: this.myMethod is not a function`와 같은 오류가 발생하게 됩니다.</p>
+화살표 함수는 `this`를 가지지 않기 때문에 화살표 함수에서의 `this`는 다른 변수로 취급되거나 렉시컬하게 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾습니다. 이 때문에 `Uncaught TypeError: Cannot read property of undefined` 또는 `Uncaught TypeError: this.myMethod is not a function`와 같은 오류가 발생하게 됩니다.</p>
 
 ## 라이프사이클 다이어그램