Merge pull request #122 from byunggilchoi/patch-3

computed와 watch에 대한 설명 수정

Author: ChangJoo-Park

src/v2/guide/computed.md

@@ -1,29 +1,29 @@
 ---
-title: 계산된 속성과 감시자
+title: computed와 watch
 type: guide
 order: 5
 ---
 
-## 계산된 속성
+## computed 속성
 
-템플릿 내에서 사용하는 표현식은 매우 편리하지만 단순한 연산에만 사용해야 합니다. 너무 많은 로직을 템플릿에 넣으면 유지보수가 어려워 질 수 있습니다.
+템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 아래의 예를 봅시다.
 
 ``` html
 <div id="example">
   {{ message.split('').reverse().join('') }}
 </div>
 ```
 
-이 시점에서, 템플릿은 더이상 간단하지 않고 장황합니다. `message`를 역순으로 표시한다는 것을 알기 전에 잠깐 다시 보아야 합니다. 템플릿에 뒤집힌 메시지를 두번 이상 포함하려는 경우 문제가 더욱 악화됩니다.
+이 템플릿은 더 이상 간단하고 명료하지 않습니다. `message`를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 하겠죠. 템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는 더 악화될 것입니다.
 
-이 때문에 복잡한 로직의 경우, 반드시 **계산된 속성** 을 사용해야합니다.
+복잡한 로직이라면 반드시 **computed 속성** 을 사용해야 하는 이유입니다.
 
 ### 기본 예제
 
 ``` html
 <div id="example">
   <p>원본 메시지: "{{ message }}"</p>
-  <p>뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p>
+  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
 </div>
 ```
 
@@ -48,7 +48,7 @@ var vm = new Vue({
 {% raw %}
 <div id="example" class="demo">
   <p>원본 메시지: "{{ message }}"</p>
-  <p>뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p>
+  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
 </div>
 <script>
 var vm = new Vue({
@@ -65,21 +65,21 @@ var vm = new Vue({
 </script>
 {% endraw %}
 
-여기서 우리는 계산된 속성인 `reversedMessage`를 선언했습니다. 우리가 제공하는 함수는 `vm.reversedMessage`속성에 대한 getter 함수로 사용됩니다.
+이 예제에서는 computed 속성인 `reversedMessage`를 선언했습니다. 우리가 작성한 함수는 `vm.reversedMessage`속성에 대한 getter 함수로 사용됩니다.
 
 ``` js
 console.log(vm.reversedMessage) // => '요세하녕안'
 vm.message = 'Goodbye'
 console.log(vm.reversedMessage) // => 'eybdooG'
 ```
 
-콘솔을 열고 예제를 직접 해볼 수 있습니다. `vm.reversedMessage`의 값은 항상 `vm.message`의 값에 의존합니다.
+콘솔에서 이 예제를 직접 해볼 수 있습니다. `vm.reversedMessage`의 값은 항상 `vm.message`의 값에 의존합니다.
 
-일반 속성처럼 템플릿의 계산된 속성에 데이터 바인딩 할 수 있습니다. Vue는 `vm.reversedMessage`가 `vm.message`에 의존하는 것을 알고 있기 때문에 `vm.message`가 바뀔 때 `vm.reversedMessage`에 의존하는 바인딩을 모두 업데이트할 것입니다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것입니다. 계산된 getter 함수는 사이드 이펙트가 없어 테스트와 추론하기에 쉬워집니다.
+일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딩 할 수 있습니다. Vue는 `vm.reversedMessage`가 `vm.message`에 의존하는 것을 알고 있기 때문에 `vm.message`가 바뀔 때 `vm.reversedMessage`에 의존하는 바인딩을 모두 업데이트할 것입니다. 그리고 가장 중요한 것은 우리가 선언적으로(역자 주: 선언형 프로그래밍 방식에 따라서(아래 computed와 watch 비교에 추가 설명)) 의존 관계를 만들었다는 것입니다. computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다.
 
-### 계산된 캐싱 vs 메소드
+### computed 속성의 캐싱 vs 메소드
 
-표현식에서 메소드를 호출하여 같은 결과를 얻을 수 있다는 사실을 알고 있을 것입니다.
+표현식에서 메소드를 호출하여 같은 결과를 얻을 수도 있습니다.
 
 ``` html
 <p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>
@@ -94,9 +94,9 @@ methods: {
 }
 ```
 
-계산된 속성 대신 메소드와 같은 함수를 정의할 수 있습니다. 최종 결과에 대해 두가지 접근 방식은 서로 동일합니다. 하지만 차이점은 **계산된 속성은 종속성에 따라 캐시된다는 것 입니다.**  계산된 속성은 종속성 중 일부가 변경된 경우에만 다시 계산 됩니다. 이것은 `message`가 변경되지 않는 한, 계산된 속성인 `reversedMessage`에 대한 다중 접근은 함수를 다시 수행할 필요 없이 이전에 계산된 결과를 즉시 반환한다는 것을 의미합니다.
+computed 속성 대신 메소드와 같은 함수를 정의할 수도 있습니다. 최종 결과에 대해 두 가지 접근 방식은 서로 동일합니다. 차이점은 **computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것**  입니다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다. 즉 `message`가 변경되지 않는 한, computed 속성인 `reversedMessage`를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.
 
-이것은 또한 `Date.now()`가 반응형 의존성을 가지지 않기 때문에 다음 계산된 속성이 절대로 업데이트 되지 않는 것을 의미합니다.
+또한 `Date.now()`처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않는다는 뜻입니다.
 
 ``` js
 computed: {
@@ -106,13 +106,13 @@ computed: {
 }
 ```
 
-비교해보면, 메소드 호출은 재 렌더링 할 때마다 **항상** 메소드를 호출합니다.
+이에 비해 메소드를 호출하면 렌더링을 다시 할 때마다 **항상** 함수를 실행합니다.
 
-캐싱이 왜 필요할까요? 우리가 시간이 많이 소요되는 **A** 속성을 가지고 있다고 가정하면 거대한 배열을 반복하고 많은 계산을 해야합니다. 그런 다음 우리는 **A** 에 의존하는 다른 계산된 속성을 가질 수 있습니다. 캐싱하지 않으면 **A** 의 getter를 필요한 것보다 더 많이 실행하게 됩니다! 캐싱을 원하지 않는 경우 메소드를 사용하십시오
+캐싱이 왜 필요할까요? 계산에 시간이 많이 걸리는 computed 속성인 **A**를 가지고 있다고 해봅시다. 이 속성을 계산하려면 거대한 배열을 반복해서 다루고 많은 계산을 해야 합니다. 그런데 **A** 에 의존하는 다른 computed 속성값도 있을 수 있습니다. 캐싱을 하지 않으면 **A** 의 getter 함수를 꼭 필요한 것보다 더 많이 실행하게 됩니다! 캐싱을 원하지 않는 경우 메소드를 사용하십시오.
 
-### 계산된 속성 vs 감시된 속성
+### computed 속성 vs watch 속성
 
-Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 **속성 감시** 방법을 제공합니다. 다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우, 특히 AngularJS를 사용하던 경우 `watch`를 남용하는 경우가 있습니다. 하지만 `watch` 콜백보다 계산된 속성을 사용하는 것이 더 좋습니다. 다음 예제를 고려하십시오.
+Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 **watch 속성**을 제공합니다. 다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우, 특히 AngularJS를 사용하던 경우 `watch`를 남용하는 경우가 있습니다. 하지만 명령적인 `watch` 콜백보다 계산된 속성을 사용하는 것이 더 좋습니다.(역자 주: watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 '명령형 프로그래밍' 방식. computed 속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 '선언형 프로그래밍' 방식.) 다음 예제를 살펴봅시다.
 
 ``` html
 <div id="demo">{{ fullName }}</div>
@@ -137,7 +137,7 @@ var vm = new Vue({
 })
 ```
 
-위의 코드는 반복이 필수적입니다. 계산된 속성을 사용하는 방식과 비교하십시오.
+위의 코드는 명령형이고 또 코드를 반복합니다. computed 속성을 사용하는 방식과 비교해 보세요.
 
 ``` js
 var vm = new Vue({
@@ -154,11 +154,11 @@ var vm = new Vue({
 })
 ```
 
-더 낫지 않나요?
+더 낫지 않나요?(역자 주: 일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있음.)
 
-### 계산된 Setter
+### computed 속성의 setter 함수
 
-계산된 속성은 기본적으로 getter만 가지고 있지만, 필요한 경우 setter를 제공할 수 있습니다.
+computed 속성은 기본적으로 getter 함수만 가지고 있지만, 필요한 경우 setter 함수를 만들어 쓸 수 있습니다.
 
 ``` js
 // ...
@@ -167,7 +167,7 @@ computed: {
     // getter
     get: function () {
       return this.firstName + ' ' + this.lastName
-    },
+    },/
     // setter
     set: function (newValue) {
       var names = newValue.split(' ')
@@ -181,9 +181,9 @@ computed: {
 
 이제 `vm.fullName = 'John Doe'`를 실행하면 설정자가 호출되고 `vm.firstName`과 `vm.lastName`이 그에 따라 업데이트 됩니다.
 
-## 감시자
+## watch 속성
 
-대부분의 경우 계산된 속성이 더 적합하지만 사용자 정의 감시자가 필요한 경우가 있습니다. 그래서 Vue는 `watch` 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.
+대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있습니다. 그래서 Vue는 `watch` 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.
 
 예제 입니다.