Translate vue-router in Korean. (#1004)

Author: ChangJoo Park(박창주)

docs/LANGS.md

@@ -3,4 +3,5 @@
 * [2.0 - 中文](zh-cn/)
 * [2.0 - German](de/)
 * [2.0 - Русский](ru/)
+* [2.0 - 한국어(Korean)](ko/)
 * [0.7 Docs](old/)

docs/ko/README.md

@@ -0,0 +1 @@
+{% include "./SUMMARY.md" %}

docs/ko/SUMMARY.md

@@ -0,0 +1,30 @@
+# vue-router 2
+<!--email_off-->
+> 참고 : [email protected]는 Vue 2.x에서만 작동합니다. 0.7.x용 문서는 [이 곳](https://github.com/vuejs/vue-router/tree/1.0/docs/en)입니다.
+<!--/email_off-->
+**[릴리즈 노트](https://github.com/vuejs/vue-router/releases)**
+
+- [설치](installation.md)
+- 필수 사항
+  - [시작하기](essentials/getting-started.md)
+  - [동적 라우트 매칭](essentials/dynamic-matching.md)
+  - [중첩된 라우트](essentials/nested-routes.md)
+  - [프로그래밍 방식 네비게이션](essentials/navigation.md)
+  - [이름을 가진 라우트](essentials/named-routes.md)
+  - [이름을 가진 뷰](essentials/named-views.md)
+  - [리다이렉트와 별칭](essentials/redirect-and-alias.md)
+  - [HTML5 History 모드](essentials/history-mode.md)
+- 고급
+  - [네비게이션 가드](advanced/navigation-guards.md)
+  - [라우트 메타 필드](advanced/meta.md)
+  - [전환](advanced/transitions.md)
+  - [데이터 가져오기](advanced/data-fetching.md)
+  - [스크롤 동작](advanced/scroll-behavior.md)
+  - [지연된 로딩](advanced/lazy-loading.md)
+- API 레퍼런스
+  - [router-link](api/router-link.md)
+  - [router-view](api/router-view.md)
+  - [라우터 객체](api/route-object.md)
+  - [라우터 생성자 옵션](api/options.md)
+  - [라우터 인스턴스](api/router-instance.md)
+  - [컴포넌트 주입](api/component-injections.md)

docs/ko/advanced/data-fetching.md

@@ -0,0 +1,113 @@
+# 데이터 가져오기
+
+때로는 경로가 활성화될 때 서버에서 데이터를 가져와야 합니다. 예를 들어, 사용자 프로파일을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 합니다. 우리는 두 가지 방법으로 이것을 사용 할 수 있습니다.
+
+- **탐색 후 가져 오기**: 먼저 탐색을 수행하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져 오는 동안 로드 상태를 표시합니다.
+
+- **탐색하기 전에 가져 오기**: 라우트 입력 방어 네비게이션으로 들어가기 전에 데이터를 가져 오고 데이터를 가져온 후에 탐색을 수행합니다.
+
+엄밀히 말하면 두 가지 모두 유효한 선택입니다. 궁극적인 목표는 사용자 경험에 달려 있습니다.
+
+## 탐색 후 가져 오기
+
+이 방법을 사용하면 들어오는 컴포넌트를 즉시 탐색하고 렌더링하며 컴포넌트의 `created` 훅에서 데이터를 가져옵니다. 네트워크를 통해 데이터를 가져 오는 동안 로드 상태를 표시 할 수 있는 기회를 제공하며 각 뷰 마다 로드를 다르게 처리 할 수도 있습니다.
+
+`$route.params.id`를 기반으로 한 게시물의 데이터를 가져와야하는 `Post` 컴포넌트가 있다고 가정 해 봅시다 :
+
+``` html
+<template>
+  <div class="post">
+    <div class="loading" v-if="loading">
+      Loading...
+    </div>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+``` js
+export default {
+  data () {
+    return {
+      loading: false,
+      post: null,
+      error: null
+    }
+  },
+  created () {
+    // 뷰가 생성되고 데이터가 이미 감시 되고 있을 때 데이터를 가져온다.
+    this.fetchData()
+  },
+  watch: {
+    // 라우트가 변경되면 메소드를 다시 호출됩니다.
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData () {
+      this.error = this.post = null
+      this.loading = true
+      // getPost를 데이터 가져 오기 위한 유틸리티/API 래퍼로 변경합니다.
+      getPost(this.$route.params.id, (err, post) => {
+        this.loading = false
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+## 탐색하기 전에 가져 오기
+
+이 접근 방식을 사용하면 실제로 새 경로로 이동하기 전에 데이터를 가져옵니다.
+들어오는 컴포넌트에서 `beforeRouteEnter` 가드에서 데이터를 가져올 수 있으며 페치가 완료되면 `next`만 호출 할 수 있습니다.
+
+
+``` js
+export default {
+  data () {
+    return {
+      post: null,
+      error: null
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    getPost(to.params.id, (err, post) => {
+      if (err) {
+        // 일부 전역 오류 메시지 표시
+        next(false)
+      } else {
+        next(vm => {
+          vm.post = post
+        })
+      }
+    })
+  },
+  // 경로가 변경되고 이 컴포넌트가 이미 렌더링된 경우 로직은 약간 달라집니다.
+  watch: {
+    $route () {
+      this.post = null
+      getPost(this.$route.params.id, (err, post) => {
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+수신 뷰에 대해 리소스를 가져 오는 동안 사용자는 현재 뷰를 유지합니다. 따라서 데이터를 가져 오는 동안 진행률 표시 줄이나 일종의 표시기를 표시하는 것을 추천합니다. 데이터 가져 오기가 실패하면 일종의 전역 경고 메시지를 표시해야합니다.

docs/ko/advanced/lazy-loading.md

@@ -0,0 +1,44 @@
+# 지연된 로딩
+
+번들러를 이용하여 앱을 제작할 때 JavaScript 번들이 상당히 커져 페이지로드 시간에 영향을 줄 수 있습니다. 각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것입니다.
+
+Vue의 [비동기 구성 요소 기능](http://vuejs.org/guide/components.html#Async-Components)과 Webpack의 [코드 분할 기능](https://webpack.github.io/docs/code-splitting)을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다.
+
+라우트 컴포넌트를 비동기 컴포넌트로 정의하면됩니다.
+
+``` js
+const Foo = resolve => {
+  // require.ensure는 Webpack의 코드 분할에 대한 특수 구문입니다.
+  require.ensure(['./Foo.vue'], () => {
+    resolve(require('./Foo.vue'))
+  })
+}
+```
+
+AMD 스타일 요구 사항을 사용하는 또다른 코드 분할 구문도 있으므로 다음과 같이 단순화 할 수 있습니다.
+
+``` js
+const Foo = resolve => require(['./Foo.vue'], resolve)
+```
+
+경로 설정에서 아무것도 바꿀 필요가 없습니다. 보통 `Foo`만 사용하십시오.
+
+``` js
+const router = new VueRouter({
+  routes: [
+    { path: '/foo', component: Foo }
+  ]
+})
+```
+
+### 같은 묶음로 컴포넌트 그룹화하기
+
+때로는 동일한 라우트 아래에 중첩된 모든 컴포넌트를 동일한 비동기 묶음으로 그룹화 할 수 있습니다. 이를 위해 우리는 세 번째 전달인자로 `require.ensure`에 묶음 이름을 제공하여 [이름을 가진 묶음](https://webpack.github.io/docs/code-splitting.html#named-chunks)을 사용해야합니다.
+
+``` js
+const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
+const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
+const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
+```
+
+Webpack은 동일한 묶음 이름을 가진 비동기 모듈을 같은 비동기 묶음으로 그룹화합니다. 이것은 또한`require.ensure`에 대한 종속성을 더 이상 명시 적으로 나열 할 필요가 없음을 의미합니다(따라서 빈 배열을 전달합니다).

docs/ko/advanced/meta.md

@@ -0,0 +1,51 @@
+# 라우트 메타 필드
+
+라우트를 정의 할 때 `meta` 필드를 포함시킬 수 있습니다.
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      children: [
+        {
+          path: 'bar',
+          component: Bar,
+          // 메타 필드
+          meta: { requiresAuth: true }
+        }
+      ]
+    }
+  ]
+})
+```
+
+그렇다면이 `메타`필드에 어떻게 접근합니까?
+
+첫째,`routes` 설정의 각 라우트 객체를 **라우트 레코드** 라고합니다. 라우트 레코드는 중첩 될 수 있습니다. 따라서 라우트가 일치하면 둘 이상의 라우트 레코드와 잠재적으로 일치 할 수 있습니다.
+
+예를 들어, 위의 라우트 구성에서 URL `/foo/bar`는 상위 라우트 레코드와 하위 라우트 레코드 모두와 일치합니다.
+
+라우트와 일치하는 모든 라우트 레코드는 `$route` 객체(그리고 네비게이션 가드의 라우트 객체)에 `$route.matched` 배열로 노출됩니다. 그러므로 우리는 `$route.matched`를 반복하여 라우트 레코드의 메타 필드를 검사 할 필요가 있습니다.
+
+예제 사용 사례는 글로벌 네비게이션 가드에서 메타 필드를 확인하는 것입니다.
+
+``` js
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // 이 라우트는 인증이 필요하며 로그인 한 경우 확인하십시오.
+    // 그렇지 않은 경우 로그인 페이지로 리디렉션하십시오.
+    if (!auth.loggedIn()) {
+      next({
+        path: '/login',
+        query: { redirect: to.fullPath }
+      })
+    } else {
+      next()
+    }
+  } else {
+    next() // 반드시 next()를 호출하십시오!
+  }
+})
+```

docs/ko/advanced/navigation-guards.md

@@ -0,0 +1,94 @@
+# 네비게이션 가드
+
+이름에서 알 수 있듯이 `vue-router`가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다.
+
+### 전역 가드
+
+`router.beforeEach`를 사용하여 보호 이전에 전역 등록을 할 수 있습니다 :
+
+``` js
+const router = new VueRouter({ ... })
+
+router.beforeEach((to, from, next) => {
+  // ...
+})
+```
+
+네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생합니다. 가드는 비동기식으로 실행 될 수 있으며 네비게이션은 모든 훅이 해결되기 전까지 **보류 중** 으로 간주됩니다.
+
+모든 가드 기능은 세 가지 전달인자를 받습니다.
+
+- **`to: 라우트`**: 대상 [Route 객체](../api/route-object.md) 로 이동합니다.
+
+- **`from: 라우트`**: 현재 라우트로 오기전 라우트 입니다.
+
+- **`next: 함수`**: 이 함수는 **훅을 해결하기 위해** 호출 되어야 합니다. 액션은 `next`에 제공된 전달인자에 달려 있습니다.
+
+  - **`next()`**: 파이프라인의 다음 훅으로 이동하십시오. 훅이 없는 경우 네비게이션은 **승인**됩니다.
+
+  - **`next(false)`**: 현재 네비게이션을 중단합니다. 브라우저 URL이 변경되면(사용자 또는 뒤로 버튼을 통해 수동으로 변경됨) `from`경로의 URL로 재설정됩니다.
+
+  - **`next('/')` 또는 `next({ path: '/' })`**: 다른 위치로 리디렉션합니다. 현재 네비게이션이 중단되고 새 네비게이션이 시작됩니다.
+
+**항상 `next` 함수를 호출하십시오. 그렇지 않으면 훅이 절대 불러지지 않습니다.**
+
+전역 훅을 등록 할 수도 있지만, 가드와 달리 이 훅은 `next` 함수를 얻지 못하며 네비게이션에 영향을 줄 수 없습니다.
+
+``` js
+router.afterEach((to, from) => {
+  // ...
+})
+```
+
+### 라우트 별 가드
+
+`beforeEnter` 가드를 라우트의 설정 객체에 직접 정의 할 수 있습니다.
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      beforeEnter: (to, from, next) => {
+        // ...
+      }
+    }
+  ]
+})
+```
+
+이러한 가드는 전역 이전 가드와 동일한 서명을 가집니다.
+
+### 컴포넌트 내부 가드
+
+마지막으로 `beforeRouteEnter` 와 `beforeRouteLeave`를 사용하여 라우트 컴포넌트 안에 라우트 네비게이션 가드를 직접 정의 할 수 있습니다.
+
+``` js
+const Foo = {
+  template: `...`,
+  beforeRouteEnter (to, from, next) {
+    // 이 컴포넌트를 렌더링하는 라우트 앞에 호출됩니다.
+    // 이 가드가 호출 될 때 아직 생성되지 않았기 때문에
+    // `this` 컴포넌트 인스턴스에 접근 할 수 없습니다!
+  },
+  beforeRouteLeave (to, from, next) {
+    // 이 컴포넌트를 렌더링하는 라우트가 이전으로 네비게이션 될 때 호출됩니다.
+    // `this` 컴포넌트 인스턴스에 접근 할 수 있습니다.
+  }
+}
+```
+
+`beforeRouteEnter` 가드는 네비게이션이 확인되기 전에 가드가 호출되어서 새로운 엔트리 컴포넌트가 아직 생성되지 않았기 때문에 `this`에 접근하지 **못합니다.**
+
+그러나 콜백을 `next`에 전달하여 인스턴스에 액세스 할 수 있습니다. 네비게이션이 확인되고 컴포넌트 인스턴스가 콜백에 전달인자로 전달 될 때 콜백이 호출됩니다.
+
+``` js
+beforeRouteEnter (to, from, next) {
+  next(vm => {
+    // `vm`을 통한 컴포넌트 인스턴스 접근
+  })
+}
+```
+
+`beforeRouteLeave` 안에서 `this`에 직접 접근 할 수 있습니다. leave 가드는 일반적으로 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는데 사용됩니다. 탐색은 `next(false)`를 호출하여 취소할 수 있습니다.