diff --git a/docs/kr/advanced/data-fetching.md b/docs/kr/advanced/data-fetching.md index 24767adb6..66e4a794c 100644 --- a/docs/kr/advanced/data-fetching.md +++ b/docs/kr/advanced/data-fetching.md @@ -1,10 +1,10 @@ # 데이터 가져오기 -때로는 경로가 활성화될 때 서버에서 데이터를 가져와야 합니다. 예를 들어, 사용자 프로파일을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 합니다. 우리는 두 가지 방법으로 이것을 사용 할 수 있습니다. +때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 합니다. 예를 들어, 사용자 프로필을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 합니다. 우리는 두 가지 방법을 사용할 수 있습니다. -- **탐색 후 가져 오기**: 먼저 탐색을 수행하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져 오는 동안 로드 상태를 표시합니다. +- **탐색 후 가져 오기**: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져 오는 동안 로드 상태를 표시합니다. -- **탐색하기 전에 가져 오기**: 라우트 입력 방어 네비게이션으로 들어가기 전에 데이터를 가져 오고 데이터를 가져온 후에 탐색을 수행합니다. +- **탐색하기 전에 가져 오기**: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색을 수행합니다. 엄밀히 말하면 두 가지 모두 유효한 선택입니다. 궁극적인 목표는 사용자 경험에 달려 있습니다. @@ -110,4 +110,4 @@ export default { } ``` -수신 뷰에 대해 리소스를 가져 오는 동안 사용자는 현재 뷰를 유지합니다. 따라서 데이터를 가져 오는 동안 진행률 표시 줄이나 일종의 표시기를 표시하는 것을 추천합니다. 데이터 가져 오기가 실패하면 일종의 전역 경고 메시지를 표시해야합니다. +다음 뷰에 대한 리소스를 가져 오는 동안 사용자는 현재 뷰를 유지합니다. 따라서 데이터를 가져 오는 동안 진행률 표시줄이나 일종의 표시기를 표시하는 것을 추천합니다. 데이터 가져 오기가 실패하면 일종의 전역 경고 메시지를 표시해야합니다. \ No newline at end of file diff --git a/docs/kr/advanced/lazy-loading.md b/docs/kr/advanced/lazy-loading.md index 59f62fb75..3fa38feb6 100644 --- a/docs/kr/advanced/lazy-loading.md +++ b/docs/kr/advanced/lazy-loading.md @@ -2,7 +2,7 @@ 번들러를 이용하여 앱을 제작할 때 JavaScript 번들이 상당히 커져 페이지로드 시간에 영향을 줄 수 있습니다. 각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것입니다. -Vue의 [비동기 구성 요소 기능](http://vuejs.org/guide/components.html#Async-Components)과 Webpack의 [코드 분할 기능](https://webpack.github.io/docs/code-splitting)을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다. +Vue의 [비동기 컴포넌트](http://vuejs.org/guide/components.html#Async-Components)와 Webpack의 [코드 분할](https://webpack.github.io/docs/code-splitting)을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다. 라우트 컴포넌트를 비동기 컴포넌트로 정의하면됩니다. @@ -21,7 +21,7 @@ AMD 스타일 요구 사항을 사용하는 또다른 코드 분할 구문도 const Foo = resolve => require(['./Foo.vue'], resolve) ``` -경로 설정에서 아무것도 바꿀 필요가 없습니다. 보통 `Foo`만 사용하십시오. +라우트 설정에서 아무것도 바꿀 필요가 없습니다. 보통 `Foo`만 사용하십시오. ``` js const router = new VueRouter({ @@ -31,7 +31,7 @@ const router = new VueRouter({ }) ``` -### 같은 묶음로 컴포넌트 그룹화하기 +### 같은 묶음으로 컴포넌트 그룹화하기 때로는 동일한 라우트 아래에 중첩된 모든 컴포넌트를 동일한 비동기 묶음으로 그룹화 할 수 있습니다. 이를 위해 우리는 세 번째 전달인자로 `require.ensure`에 묶음 이름을 제공하여 [이름을 가진 묶음](https://webpack.github.io/docs/code-splitting.html#named-chunks)을 사용해야합니다. @@ -41,4 +41,4 @@ 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`에 대한 종속성을 더 이상 명시 적으로 나열 할 필요가 없음을 의미합니다(따라서 빈 배열을 전달합니다). +Webpack은 동일한 묶음 이름을 가진 비동기 모듈을 같은 비동기 묶음으로 그룹화합니다. 이것은 또한`require.ensure`에 대한 종속성을 더 이상 명시 적으로 나열할 필요가 없음을 의미합니다(따라서 빈 배열을 전달합니다). diff --git a/docs/kr/advanced/meta.md b/docs/kr/advanced/meta.md index 1889cdee9..9135fb25b 100644 --- a/docs/kr/advanced/meta.md +++ b/docs/kr/advanced/meta.md @@ -21,7 +21,7 @@ const router = new VueRouter({ }) ``` -그렇다면이 `메타`필드에 어떻게 접근합니까? +그렇다면 이 `메타`필드에 어떻게 접근할까요? 첫째,`routes` 설정의 각 라우트 객체를 **라우트 레코드** 라고합니다. 라우트 레코드는 중첩 될 수 있습니다. 따라서 라우트가 일치하면 둘 이상의 라우트 레코드와 잠재적으로 일치 할 수 있습니다. diff --git a/docs/kr/advanced/navigation-guards.md b/docs/kr/advanced/navigation-guards.md index fec3371f3..5265056c5 100644 --- a/docs/kr/advanced/navigation-guards.md +++ b/docs/kr/advanced/navigation-guards.md @@ -4,7 +4,7 @@ ### 전역 가드 -`router.beforeEach`를 사용하여 보호 이전에 전역 등록을 할 수 있습니다 : +`router.beforeEach`를 사용하여 보호하기 이전에 전역 등록을 할 수 있습니다 : ``` js const router = new VueRouter({ ... }) diff --git a/docs/kr/advanced/scroll-behavior.md b/docs/kr/advanced/scroll-behavior.md index 761c9f0d6..6325eb4a2 100644 --- a/docs/kr/advanced/scroll-behavior.md +++ b/docs/kr/advanced/scroll-behavior.md @@ -15,7 +15,7 @@ const router = new VueRouter({ }) ``` -`scrollBehavior` 함수는 `to`와 `from` 라우트 객체를받습니다. 세 번째 전달인자 인 `savedPosition`은 브라우저의 뒤로/앞으로 버튼으로 트리거되는 `popstate` 네비게이션인 경우에만 사용할 수 있습니다. +`scrollBehavior` 함수는 `to`와 `from` 라우트 객체를받습니다. 세 번째 전달인자인 `savedPosition`은 브라우저의 뒤로/앞으로 버튼으로 트리거되는 `popstate` 네비게이션인 경우에만 사용할 수 있습니다. 이 함수는 스크롤 위치 객체를 반환 할 수 있습니다. 객체는 다음과 같은 형태 일 수 있습니다. diff --git a/docs/kr/advanced/transitions.md b/docs/kr/advanced/transitions.md index 03adfeb38..042ed7cb0 100644 --- a/docs/kr/advanced/transitions.md +++ b/docs/kr/advanced/transitions.md @@ -1,6 +1,6 @@ # 전환 -``는 본질적으로 동적인 컴포넌트이기 때문에 `` 컴포넌트를 사용하는 것과 같은 방식으로 전환 효과를 적용 할 수 있습니다. +``는 본질적으로 동적인 컴포넌트이기 때문에 `` 컴포넌트를 사용하는 것과 같은 방식으로 전환 효과를 적용할 수 있습니다. ``` html @@ -54,4 +54,4 @@ watch: { } ``` -전체 예제는 [이 곳](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js)에 있습니다. +전체 예제는 [여기](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js)에 있습니다. diff --git a/docs/kr/essentials/dynamic-matching.md b/docs/kr/essentials/dynamic-matching.md index de8890af2..091f6f1fe 100644 --- a/docs/kr/essentials/dynamic-matching.md +++ b/docs/kr/essentials/dynamic-matching.md @@ -1,6 +1,6 @@ # 동적 라우트 매칭 -주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 모든 사용자에 대해 렌더링되지만 다른 사용자 ID로 렌더링되어야하는 `User` 컴포넌트가 있을 수 있습니다. `vue-router`에서 우리는 경로에서 동적 세그먼트를 사용하여 다음을 할 수 있습니다. +주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 모든 사용자에 대해 동일한 레이아웃을 가지지만 하지만 다른 사용자 ID로 렌더링되어야하는 `User` 컴포넌트가 있을 수 있습니다. `vue-router`에서 우리는 경로에서 동적 세그먼트를 사용하여 다음을 할 수 있습니다. ``` js const User = { @@ -25,9 +25,9 @@ const User = { } ``` -실제 사용사례는 [이 곳](http://jsfiddle.net/yyx990803/4xfa2f19/)에 있습니다. +실제 예제는 [여기](http://jsfiddle.net/yyx990803/4xfa2f19/)에 있습니다. -동일한 라우트에 여러개의 동적 세그먼트를 가질 수 있으며, `$route.params`의 해당 필드에 매핑됩니다. +동일한 라우트에 여러 동적 세그먼트를 가질 수 있으며, `$route.params`의 해당 필드에 매핑됩니다. 예: @@ -36,7 +36,7 @@ const User = { | /user/:username | /user/evan | `{ username: 'evan' }` | | /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | -`$route.params` 외에도 `$route` 객체는 `$route.query` (URL에 질의가있는 경우), `$route.hash` 등의 유용한 정보를 제공합니다. [API 레퍼런스](../api/route-object.md)에서 전체 세부 정보를 확인할 수 있습니다. +`$route.params` 외에도 `$route` 객체는 `$route.query` (URL에 쿼리가 있는 경우), `$route.hash` 등의 유용한 정보를 제공합니다. [API 레퍼런스](../api/route-object.md)에서 전체 세부 정보를 확인할 수 있습니다. ### Params 변경 사항에 반응하기 @@ -57,7 +57,7 @@ const User = { ### 고급 매칭 패턴 -`vue-router`는 라우트 매칭 엔진으로 [path-to-regexp](https://github.com/pillarjs/path-to-regexp)를 사용하기 때문에 선택적 동적 세그먼트, 0개 이상/하나 이상의 요구 사항, 심지어 커스텀 정규식 패턴과 같은 많은 고급 매칭 패턴을 지원합니다. 이 고급 패턴들과`vue-router`에서 사용하는 [이 예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js)에 대한 [문서](https://github.com/pillarjs/path-to-regexp#parameters)를 확인하십시오. +`vue-router`는 라우트 매칭 엔진으로 [path-to-regexp](https://github.com/pillarjs/path-to-regexp)를 사용하기 때문에 선택적 동적 세그먼트, 0개 이상/하나 이상의 요구 사항, 심지어 커스텀 정규식 패턴과 같은 많은 고급 매칭 패턴을 지원합니다. 이 고급 패턴들과 `vue-router`에서 사용하는 [예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js)에 대한 [문서](https://github.com/pillarjs/path-to-regexp#parameters)를 확인하십시오. ### 매칭 우선순위 diff --git a/docs/kr/essentials/getting-started.md b/docs/kr/essentials/getting-started.md index 55e355bf0..b0f6e55ef 100644 --- a/docs/kr/essentials/getting-started.md +++ b/docs/kr/essentials/getting-started.md @@ -2,9 +2,9 @@ > 가이드의 샘플 코드는[ES2015](https://github.com/lukehoban/es6features)를 사용합니다. -Vue.js + vue-router로 단일 페이지 응용 프로그램 만드는 것은 간단합니다. Vue.js를 통해 우리는 이미 컴포넌트로 애플리케이션을 구성하고 있습니다. vue-router를 추가 할 때, 우리가해야 할 일은 우리의 컴포넌트를 route에 매핑하고 vue-router가 어디서 렌더링할 지 지정하는 것입니다. 다음은 기본적인 예입니다. +Vue.js와 vue-router로 단일 페이지 애플리케이션을 만드는 것은 간단합니다. Vue.js를 통해 우리는 이미 컴포넌트로 애플리케이션을 구성하고 있습니다. vue-router를 추가 할 때, 우리가해야 할 일은 우리의 컴포넌트를 route에 매핑하고 vue-router가 어디서 렌더링할 지 지정하는 것입니다. 다음은 기본적인 예입니다. -> 모든 예제는 Vue의 독립형 버전을 사용하여 템플릿 구문 분석을 가능하게합니다. 자세한 내용은 [이 곳에](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) 있습니다. +> 모든 예제는 Vue의 독립형 버전을 사용하여 템플릿 구문 분석을 가능하게합니다. 자세한 내용은 [여기](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) 있습니다. ### HTML diff --git a/docs/kr/essentials/history-mode.md b/docs/kr/essentials/history-mode.md index 66f0287ce..03e98ea9e 100644 --- a/docs/kr/essentials/history-mode.md +++ b/docs/kr/essentials/history-mode.md @@ -2,7 +2,7 @@ `vue-router`의 기본 모드는 _hash mode_ 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. -해시를 제거하기 위해 라우터의 **history 모드** 를 사용할 수 있습니다. `history.pushState` API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있습니다 : +해시를 제거하기 위해 라우터의 **history 모드** 를 사용할 수 있습니다. `history.pushState` API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있습니다. ``` js const router = new VueRouter({ @@ -13,9 +13,9 @@ const router = new VueRouter({ 히스토리 모드를 사용하면 URL이 "정상"으로 보입니다. `http://oursite.com/user/id`. 멋집니다! -그러나 문제는 다음과 같습니다. 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 `http://oursite.com/user/id` 에 액세스하면 404 오류가 발생합니다. 이 것은 잘못된 것입니다. +그러나 문제는 다음과 같습니다. 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 `http://oursite.com/user/id` 에 접속하면 404 오류가 발생합니다. 다 -걱정하지 않아도됩니다. 문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하기 만하면됩니다. URL이 정적 애셋과 일치하지 않으면 앱이 있는 동일한 `index.html`페이지를 제공해야합니다. +걱정하지 않아도됩니다. 문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면됩니다. URL이 정적 에셋과 일치하지 않으면 앱이 있는 동일한 `index.html`페이지를 제공해야 합니다. ## 서버 설정 예제 @@ -42,7 +42,7 @@ location / { #### Node.js (Express) -Node.js/Express의 경우 [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback)를 고려해보세요. +Node.js/Express의 경우 [connect-history-api-fallback 미들웨어](https://github.com/bripkens/connect-history-api-fallback)를 고려해보세요. ## 주의 사항 diff --git a/docs/kr/essentials/named-routes.md b/docs/kr/essentials/named-routes.md index 83d02cc9d..a2626a10f 100644 --- a/docs/kr/essentials/named-routes.md +++ b/docs/kr/essentials/named-routes.md @@ -1,6 +1,6 @@ # 이름을 가지는 라우트 -때로는 라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 식별하는 것이 더 편리합니다. Router 인스턴스를 생성하는 동안 `routes` 옵션에 라우트를 지정할 수 있습니다. +때로는 라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용하는 것이 더 편리합니다. Router 인스턴스를 생성하는 동안 `routes` 옵션에 라우트를 지정할 수 있습니다. ``` js const router = new VueRouter({ @@ -28,4 +28,4 @@ router.push({ name: 'user', params: { userId: 123 }}) 두 경우 모두 라우터는 `/user/123` 경로로 이동합니다. -전체 예제는 [이 곳](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js)에 있습니다. +전체 예제는 [여기](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js)에 있습니다. diff --git a/docs/kr/essentials/named-views.md b/docs/kr/essentials/named-views.md index 6a8934b0f..0bd6ddfc1 100644 --- a/docs/kr/essentials/named-views.md +++ b/docs/kr/essentials/named-views.md @@ -25,4 +25,4 @@ const router = new VueRouter({ }) ``` -이 예제의 작업 데모는 [이 곳](https://jsfiddle.net/posva/6du90epg/)에서 확인할 수 있습니다. +이 예제는 [여기](https://jsfiddle.net/posva/6du90epg/)에서 확인할 수 있습니다. diff --git a/docs/kr/essentials/navigation.md b/docs/kr/essentials/navigation.md index 8e9e4b8c1..00ec0fdb0 100644 --- a/docs/kr/essentials/navigation.md +++ b/docs/kr/essentials/navigation.md @@ -6,13 +6,13 @@ 다른 URL로 이동하려면 `router.push`를 사용하십시오. 이 메소드는 새로운 항목을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게된다. -이것은 ``를 클릭 할 때 내부적으로 호출되는 메서드이므로 ``를 클릭하면 `router.push(...)`를 호출하는 것과 같습니다. +이것은 ``를 클릭 할 때 내부적으로 호출되는 메소드이므로 ``를 클릭하면 `router.push(...)`를 호출하는 것과 같습니다. | 선언적 방식 | 프로그래밍 방식 | |-------------|--------------| | `` | `router.push(...)` | -전달인자는 문자열 경로 또는 로케이션 설명자 객체가 될 수 있습니다. +전달인자는 문자열 경로 또는 로케이션 디스크립터 객체가 될 수 있습니다. 예: @@ -32,7 +32,7 @@ router.push({ path: 'register', query: { plan: 'private' }}) #### `router.replace(location)` -`router.push`와 같은 역할을 하지만 유일한 차이점은 새로운 히스토리 항목에 추가하지 않고 탐색한다는 것입니다. 이름에서 알 수 있듯이 현재 항목을 대체합니다. +`router.push`와 같은 역할을 하지만 유일한 차이는 새로운 히스토리 항목에 추가하지 않고 탐색한다는 것입니다. 이름에서 알 수 있듯이 현재 항목을 대체합니다. | 선언적 방식 | 프로그래밍 방식 | |-------------|--------------| diff --git a/docs/kr/essentials/redirect-and-alias.md b/docs/kr/essentials/redirect-and-alias.md index 1b8cc3b77..3da8aeb55 100644 --- a/docs/kr/essentials/redirect-and-alias.md +++ b/docs/kr/essentials/redirect-and-alias.md @@ -2,7 +2,7 @@ ### 리다이렉트 -리디렉션은 `routes` 설정에서도 수행됩니다. `/a`에서 `/b`로 리디렉션하려면 +리디렉션은 `routes` 설정에서도 할 수 있습니다. `/a`에서 `/b`로 리디렉션하려면 ``` js const router = new VueRouter({ diff --git a/docs/kr/installation.md b/docs/kr/installation.md index c1f8d0ad5..5187b078d 100644 --- a/docs/kr/installation.md +++ b/docs/kr/installation.md @@ -5,10 +5,10 @@ [https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) -[Unpkg.com](https://unpkg.com)은 NPM 기반 CDN 링크를 제공합니다. 위의 링크는 항상 NPM의 최신 릴리스를 가리 킵니다. `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`와 같은 URL을 통해 특정 버전 / 태그를 사용할 수도 있습니다. +[Unpkg.com](https://unpkg.com)은 NPM 기반 CDN 링크를 제공합니다. 위의 링크는 항상 NPM의 최신 릴리스를 가리킵니다. `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`와 같이 URL을 통해 특정 버전 / 태그를 사용할 수도 있습니다. -Vue 다음에`vue-router`를 포함하면 자동으로 설치됩니다 : +Vue 다음에 `vue-router`를 포함하면 자동으로 설치됩니다. ``` html @@ -21,7 +21,7 @@ Vue 다음에`vue-router`를 포함하면 자동으로 설치됩니다 : npm install vue-router ``` -모듈 시스템과 함께 사용하면 `Vue.use()`를 통해 명시적으로 라우터를 추가해야합니다. +모듈 시스템에서 사용하면 `Vue.use()`를 통해 명시적으로 라우터를 추가해야합니다. ``` js import Vue from 'vue' @@ -30,12 +30,10 @@ import VueRouter from 'vue-router' Vue.use(VueRouter) ``` -전역 스크립트 태그를 사용할 때는 이 작업을 수행 할 필요가 없습니다. +전역 스크립트 태그를 사용할 때는 이 작업을 하지 않아도 됩니다. ### 개발용 빌드 -You will have to clone directly from GitHub and build `vue-router` yourself if -you want to use the latest dev build. 최신 dev 빌드를 사용하고 싶은 경우 GitHub에서 직접 복제하고 `vue-router`를 직접 빌드 해야 합니다. ``` bash