Merge pull request #193 from blueStragglr/translate/async-component

Translate Async Components paragraphs

Author: ChangJoo-Park

src/v2/guide/components-dynamic-async.md

@@ -195,49 +195,54 @@ new Vue({
 </script>
 {% endraw %}
 
-이제 _Posts_ 탭은 (게시물이 선택된) 상태를 유지할 수 있고 심지어 렌더링하지 않습니다. 완성된 코드는 [this fiddle](https://jsfiddle.net/chrisvfritz/Lp20op9o/)에서 볼 수 있습니다.
+이제 _Posts_ 탭은 (게시물이 선택된) 상태를 유지할 수 있고 다시 렌더링하지도 않습니다. 완성된 코드는 [this fiddle](https://jsfiddle.net/chrisvfritz/Lp20op9o/)에서 볼 수 있습니다.
 
-<p class="tip">`<keep-alive>`가 컴포넌트에서 `name` 옵션을 사용하거나 로컬/글로벌 등록을 하여 정의된 모든 것들로 전환되고 있는 컴포넌트들을 요구한다는 것을 유의하세요.</p>
-더 자세한 내용은 [API reference](../api/#keep-alive)에서 `<keep-alive>` 확인해주세요.
+<p class="tip">`<keep-alive>`가 컴포넌트에서 `name` 옵션을 사용하거나 로컬/글로벌 등록을 하여 정의된 모든 것들로 전환되고 있는 컴포넌트들을 요구한다는 것에 유의하세요.</p>
 
-## Async Components
+더 자세한 내용은 [API reference](../api/#keep-alive)에서 `<keep-alive>` 항목을 확인해주세요.
+
+
+
+
+
+## 비동기 컴포넌트
 
 <div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Async Components lesson">Watch a free video lesson on Vue School</a></div>
-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
+커다란 어플리케이션의 경우, 앱을 작은 조각들로 나누어 두고 필요한 경우에만 서버로부터 필요한 컴포넌트를 로드해야 할 수 있습니다. 이런 작업을 쉽게 할 수 있도록 Vue는 팩토리 함수를 이용해 컴포넌트를 비동기적으로 정의하는 것을 허용합니다. Vue는 컴포넌트가 필요할 때 팩토리 함수를 실행하고 미래를 위해 결과를 캐시합니다. 예를 들어:
 
 ```js
 Vue.component("async-example", function(resolve, reject) {
   setTimeout(function() {
-    // Pass the component definition to the resolve callback
+    // 컴포넌트 정의를 resolve 콜백을 통해 전달
     resolve({
       template: "<div>I am async!</div>"
     });
   }, 1000);
 });
 ```
 
-As you can see, the factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/):
+위의 예에서 보다시피 팩토리 함수는 `resolve` 콜백을 받습니다. 콜백은 서버에 컴포넌트의 정의를 요청했을 때 호출됩니다. 물론 `reject(reason)` 을 호출하여 로딩이 실패한 경우에 대응할 수도 있습니다. setTimeout은 예제일 뿐이며, 컴포넌트를 어떻게 받아올지는 원하는 방식을 선택하면 됩니다. 권장되는 접근 방식으로써, [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/) 와 함께 비동기 컴포넌트를 사용하는 패턴이 있습니다:
 
 ```js
 Vue.component("async-webpack-example", function(resolve) {
-  // This special require syntax will instruct Webpack to
-  // automatically split your built code into bundles which
-  // are loaded over Ajax requests.
+  // 아래의 특별한 'require' 문법은 
+  // 웹팩이 Ajax를 통해 로드한 번들들을 이용해
+  // 코드를 자동으로 분할하도록 합니다.
   require(["./my-async-component"], resolve);
 });
 ```
 
-You can also return a `Promise` in the factory function, so with Webpack 2 and ES2015 syntax you can do:
+팩토리 함수 안에서 `Promise`를 반환할 수도 있습니다. Webpack 2와 ES2015 문법을 이용해 아래와 같이 쓸 수 있습니다:
 
 ```js
 Vue.component(
   "async-webpack-example",
-  // The `import` function returns a Promise.
+  // `import` 함수는 Promise를 반환합니다.
   () => import("./my-async-component")
 );
 ```
 
-When using [local registration](components-registration.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
+[local registration](components-registration.html#Local-Registration)을 이용하면, `Promise`를 반환하는 함수를 직접 작성할 수도 있습니다:
 
 ```js
 new Vue({
@@ -248,27 +253,28 @@ new Vue({
 });
 ```
 
-<p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.</p>
+<p class="tip">만약에 <strong>Browserify</strong>를 이용해서 비동기 컴포넌트를 구현하고자 하는 경우, 불행히도 Browserify를 만든 개발자가 "비동기 컴포넌트는 Browserify가 지원할 계회기 전혀 없는 것이다" 라고 이야기했다는 사실을 알아야 합니다. ([made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224))<br/>
+  Browserify 커뮤니티는 이미 존재하는 복잡한 예제에 대한 [대안](https://github.com/vuejs/vuejs.org/issues/620)을 찾긴 했습니다. 가능한 모든 시나리오에 대해 비동기를 완벽히 지원하는 웹팩을 이용하는 것을 권장합니다.</p>
+
 ### Handling Loading State
 
-> New in 2.3.0+
+> 2.3.0+ 에서 추가
 
-The async component factory can also return an object of the following format:
+비동기 컴포넌트 팩토리는 아래와 같은 포맷으로 오브젝트를 반환할 수도 있습니다:
 
 ```js
 const AsyncComponent = () => ({
-  // The component to load (should be a Promise)
+  // 로드 할 컴포넌트(Promise여야 합니다.)
   component: import("./MyComponent.vue"),
-  // A component to use while the async component is loading
+  // 비동기 컴포넌트가 로딩중일 때 사용할 컴포넌트
   loading: LoadingComponent,
-  // A component to use if the load fails
+  // 비동기 컴포넌트 로딩이 실패했을 때 사용할 컴포넌트
   error: ErrorComponent,
-  // Delay before showing the loading component. Default: 200ms.
+  // 로딩 컴포넌트를 보여주기 전의 지연시간. (기본값: 200ms)
   delay: 200,
-  // The error component will be displayed if a timeout is
-  // provided and exceeded. Default: Infinity.
+  // 초과되었을 때 에러 컴포넌트를 표시할 타임아웃. (기본값: 무한대)
   timeout: 3000
 });
 ```
 
-> Note that you must use [Vue Router](https://github.com/vuejs/vue-router) 2.4.0+ if you wish to use the above syntax for route components.
+> 위에 작성된 문법을 라우터 컴포넌트에 사용하기 위해서는 2.4.0+ 버전의 [Vue Router](https://github.com/vuejs/vue-router) 를 사용해야 한다는 것을 기억하세요!