diff --git a/docs/kr/SUMMARY.md b/docs/kr/SUMMARY.md index 117c75f77..d0d487377 100644 --- a/docs/kr/SUMMARY.md +++ b/docs/kr/SUMMARY.md @@ -23,9 +23,19 @@ - [스크롤 동작](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) + - [routes](api/options.md#routes) + - [mode](api/options.md#mode) + - [base](api/options.md#base) + - [linkActiveClass](api/options.md#linkactiveclass) + - [linkExactActiveClass](api/options.md#linkexactactiveclass) + - [scrollBehavior](api/options.md#scrollbehavior) + - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) + - [fallback](api/options.md#fallback) - [라우터 인스턴스](api/router-instance.md) + - [Properties](api/router-instance.md#properties) + - [Methods](api/router-instance.md#methods) + - [라우트 객체](api/route-object.md) - [컴포넌트 주입](api/component-injections.md) + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) diff --git a/docs/kr/advanced/data-fetching.md b/docs/kr/advanced/data-fetching.md index 03b5ec33e..e58ab8bd1 100644 --- a/docs/kr/advanced/data-fetching.md +++ b/docs/kr/advanced/data-fetching.md @@ -2,13 +2,13 @@ 때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 합니다. 예를 들어, 사용자 프로필을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 합니다. 우리는 두 가지 방법을 사용할 수 있습니다. -- **탐색 후 가져 오기**: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져 오는 동안 로드 상태를 표시합니다. +- **탐색 후 가져오기**: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져오는 동안 로드 상태를 표시합니다. -- **탐색하기 전에 가져 오기**: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색을 수행합니다. +- **탐색하기 전에 가져오기**: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색을 수행합니다. 엄밀히 말하면 두 가지 모두 유효한 선택입니다. 궁극적인 목표는 사용자 경험에 달려 있습니다. -## 탐색 후 가져 오기 +## 탐색 후 가져오기 이 방법을 사용하면 들어오는 컴포넌트를 즉시 탐색하고 렌더링하며 컴포넌트의 `created` 훅에서 데이터를 가져옵니다. 네트워크를 통해 데이터를 가져 오는 동안 로드 상태를 표시 할 수 있는 기회를 제공하며 각 뷰 마다 로드를 다르게 처리 할 수도 있습니다. @@ -54,7 +54,7 @@ export default { fetchData () { this.error = this.post = null this.loading = true - // getPost를 데이터 가져 오기 위한 유틸리티/API 래퍼로 변경합니다. + // `getPost`를 데이터 가져오기 위한 유틸리티/API 래퍼로 변경합니다. getPost(this.$route.params.id, (err, post) => { this.loading = false if (err) { @@ -68,7 +68,7 @@ export default { } ``` -## 탐색하기 전에 가져 오기 +## 탐색하기 전에 가져오기 이 접근 방식을 사용하면 실제로 새 경로로 이동하기 전에 데이터를 가져옵니다. 들어오는 컴포넌트에서 `beforeRouteEnter` 가드에서 데이터를 가져올 수 있으며 페치가 완료되면 `next`만 호출 할 수 있습니다. @@ -95,7 +95,7 @@ export default { fetchData () { this.error = this.post = null this.loading = true - // getPost를 데이터 페치 유틸리티/API 래퍼로 바꿉니다. + // `getPost`를 데이터 페치 유틸리티/API 래퍼로 바꿉니다. getPost(this.$route.params.id, (err, post) => { this.loading = false if (err) { @@ -109,4 +109,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 e8b7825b9..dba772649 100644 --- a/docs/kr/advanced/lazy-loading.md +++ b/docs/kr/advanced/lazy-loading.md @@ -2,26 +2,29 @@ 번들러를 이용하여 앱을 제작할 때 JavaScript 번들이 상당히 커져 페이지로드 시간에 영향을 줄 수 있습니다. 각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것입니다. -Vue의 [비동기 컴포넌트](http://vuejs.org/guide/components.html#Async-Components)와 Webpack의 [코드 분할](https://webpack.js.org/guides/code-splitting-require/)을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다. +Vue의 [비동기 컴포넌트](http://vuejs.org/guide/components.html#Async-Components)와 Webpack의 [코드 분할](https://webpack.js.org/guides/code-splitting-async/)을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다. -라우트 컴포넌트를 비동기 컴포넌트로 정의하면됩니다. +첫째, 비동기 컴포넌트는 Promise를 반환하는 팩토리 함수로 정의할 수 있습니다 (컴포넌트가 resolve 되어야함). ``` js -const Foo = resolve => { - // require.ensure는 Webpack의 코드 분할에 대한 특수 구문입니다. - require.ensure(['./Foo.vue'], () => { - resolve(require('./Foo.vue')) - }) -} +const Foo = () => Promise.resolve({ /* 컴포넌트 정의 */ }) ``` -AMD 스타일 요구 사항을 사용하는 또다른 코드 분할 구문도 있으므로 다음과 같이 단순화 할 수 있습니다. +둘째, Webpack 2에서 [dynamic import](https://github.com/tc39/proposal-dynamic-import)를 사용하여 코드 분할 포인트를 지정할 수 있습니다. ``` js -const Foo = resolve => require(['./Foo.vue'], resolve) +import('./Foo.vue') // returns a Promise + ``` + + > 참고: Babel을 사용하고 있는 경우 올바른 구문 분석을 위해 [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) 플러그인을 추가해야합니다. + + 이 두 가지를 결합하여 Webpack에 의해 자동으로 코드 분할될 비동기 컴포넌트를 정의하는 방법입니다. + + ``` js + const Foo = () => import('./Foo.vue') ``` -라우트 설정에서 아무것도 바꿀 필요가 없습니다. 보통 `Foo`만 사용하십시오. +라우트 설정에서 아무것도 바꿀 필요가 없습니다. `Foo`만 사용하면 됩니다. ``` js const router = new VueRouter({ @@ -33,12 +36,12 @@ const router = new VueRouter({ ### 같은 묶음으로 컴포넌트 그룹화하기 -때로는 동일한 라우트 아래에 중첩된 모든 컴포넌트를 동일한 비동기 묶음으로 그룹화 할 수 있습니다. 이를 위해 우리는 세 번째 전달인자로 `require.ensure`에 묶음 이름을 제공하여 [이름을 가진 묶음](https://webpack.js.org/guides/code-splitting-require/#chunkname)을 사용해야합니다. +때로는 동일한 라우트 아래에 중첩된 모든 컴포넌트를 동일한 비동기 묶음으로 그룹화 할 수 있습니다. 이를 위해 특수 주석 문법을 사용하는 이름(Webpack 2.4 이상 지원)을 제공하여 [이름을 가진 묶음](https://webpack.js.org/guides/code-splitting-async/#chunk-names)을 사용해야합니다. ``` 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') +const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') +const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') +const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') ``` -Webpack은 동일한 묶음 이름을 가진 비동기 모듈을 같은 비동기 묶음으로 그룹화합니다. 이것은 또한`require.ensure`에 대한 종속성을 더 이상 명시 적으로 나열할 필요가 없음을 의미합니다(따라서 빈 배열을 전달합니다). +Webpack은 동일한 이름의 묶음을 가진 비동기 모듈을 동일한 비동기 묶음으로 그룹화합니다. diff --git a/docs/kr/advanced/navigation-guards.md b/docs/kr/advanced/navigation-guards.md index 8f0153982..992d43785 100644 --- a/docs/kr/advanced/navigation-guards.md +++ b/docs/kr/advanced/navigation-guards.md @@ -41,7 +41,7 @@ router.beforeEach((to, from, next) => { > 2.5.0에서 추가됨 -2.5.0 이후로 `router.onResolve`를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 `router.beforeEach`와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다 +2.5.0 이후로 `router.beforeResolve`를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 `router.beforeEach`와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다 ### Global After Hooks @@ -110,17 +110,17 @@ beforeRouteEnter (to, from, next) { `beforeRouteLeave` 안에서 `this`에 직접 접근 할 수 있습니다. leave 가드는 일반적으로 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는데 사용됩니다. 탐색은 `next(false)`를 호출하여 취소할 수 있습니다. -### 전체 가드 시나리오 +### 전체 네비게이션 시나리오 -1. 네비게이션이 트리거됨 -2. 비활성화될 컴포넌트에서 가드를 호출 -3. 전역 `beforeEach` 가드 호출 -4. 재사용되는 컴포넌트에서 `beforeRouteUpdate` 가드 호출 (2.2 이상) -5. 라우트 설정에서 `beforeEnter` 호출 -6. 비동기 라우트 컴포넌트 해결 -7. 활성화된 컴포넌트에서 `beforeRouteEnter` 호출 -8. 전역 `beforeResolve` 가드 호출 (2.5이상) +1. 네비게이션이 트리거됨. +2. 비활성화될 컴포넌트에서 가드를 호출. +3. 전역 `beforeEach` 가드 호출. +4. 재사용되는 컴포넌트에서 `beforeRouteUpdate` 가드 호출. (2.2 이상) +5. 라우트 설정에서 `beforeEnter` 호출. +6. 비동기 라우트 컴포넌트 해결. +7. 활성화된 컴포넌트에서 `beforeRouteEnter` 호출. +8. 전역 `beforeResolve` 가드 호출. (2.5이상) 9. 네비게이션 완료. -10. 전역 `afterEach` 훅 호출 -11. DOM 갱신 트리거 됨 -12. 인스턴스화 된 인스턴스들의 `beforeRouteEnter`가드에서 `next`에 전달 된 콜백을 호출합니다 +10. 전역 `afterEach` 훅 호출. +11. DOM 갱신 트리거 됨. +12. 인스턴스화 된 인스턴스들의 `beforeRouteEnter`가드에서 `next`에 전달 된 콜백을 호출합니다. diff --git a/docs/kr/advanced/scroll-behavior.md b/docs/kr/advanced/scroll-behavior.md index 6325eb4a2..d95420673 100644 --- a/docs/kr/advanced/scroll-behavior.md +++ b/docs/kr/advanced/scroll-behavior.md @@ -20,7 +20,7 @@ const router = new VueRouter({ 이 함수는 스크롤 위치 객체를 반환 할 수 있습니다. 객체는 다음과 같은 형태 일 수 있습니다. - `{ x: number, y: number }` -- `{ selector: string }` +- `{ selector: string, offset? : { x: number, y: number }}` (offset은 2.6.0 이상만 지원) 잘못된 값이나 빈 객체가 반환되면 스크롤이 발생하지 않습니다. @@ -53,6 +53,7 @@ scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash + // , offset: { x: 0, y: 10 } } } } diff --git a/docs/kr/advanced/transitions.md b/docs/kr/advanced/transitions.md index 042ed7cb0..c09e46fcf 100644 --- a/docs/kr/advanced/transitions.md +++ b/docs/kr/advanced/transitions.md @@ -44,7 +44,7 @@ const Bar = { ``` ``` js -// 그런 다음 부모 구성 요소에서 $route를 보고 사용할 전환을 결정합니다 +// 그런 다음 부모 구성 요소에서 `$route`를 보고 사용할 전환을 결정합니다 watch: { '$route' (to, from) { const toDepth = to.path.split('/').length diff --git a/docs/kr/api/options.md b/docs/kr/api/options.md index 2509ef9ca..88ae08607 100644 --- a/docs/kr/api/options.md +++ b/docs/kr/api/options.md @@ -18,6 +18,10 @@ beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any; } + + // 2.6.0+ + caseSensitive?: boolean; // 대소문자를 구분합니까? (default: false) + pathToRegexpOptions?: Object; // path-to-regexp 옵션은 정규 표현식을 컴파일합니다. ``` ### mode @@ -84,4 +88,14 @@ - 자료형: `Function` - 사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다. \ No newline at end of file + 사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다. + +### fallback + + > 2.6.0+ + + - 자료형: `boolean` + + 브라우저가 `history.pushState`를 지원하지 않을 때 라우터가 `hash`모드로 변경되어야 할지 설정합니다. 기본값은 `true`입니다. + + 이를 `false`로 설정하면 IE9에서 모든 `router-link`를 탐색 할 수 있습니다. 이것은 해시모드 URL이 SSR에서 작동하지 않기 때문에 앱이 서버에서 렌더링되어 IE9에서 작동해야하는 경우에 유용합니다. diff --git a/docs/kr/api/router-instance.md b/docs/kr/api/router-instance.md index 352b1b406..3a4f9dbb3 100644 --- a/docs/kr/api/router-instance.md +++ b/docs/kr/api/router-instance.md @@ -56,6 +56,10 @@ } ``` +- `current` 현재 라우트를 나타냅니다. (대부분의 경우에 변경할 일이 없습니다.) + +- `append`는 `current` 라우트에 추가할 수 있도록 합니다 ([`router-link`](router-link.md#props)처럼) + - **router.addRoutes(routes)** > 2.2.0+ diff --git a/docs/kr/api/router-link.md b/docs/kr/api/router-link.md index 68ec19c46..a3d769cfc 100644 --- a/docs/kr/api/router-link.md +++ b/docs/kr/api/router-link.md @@ -26,10 +26,10 @@ Home - + Home - + Home @@ -38,7 +38,7 @@ User - + Register ``` @@ -99,7 +99,7 @@ 이것의 결과는 ``가 모든 라우터에 대해 활성화 될 것입니다! 링크를 "완전 일치 모드"로 강제하려면 `exact` prop를 사용하십시오. ``` html - + ``` diff --git a/docs/kr/essentials/getting-started.md b/docs/kr/essentials/getting-started.md index b0f6e55ef..4e6ca1d61 100644 --- a/docs/kr/essentials/getting-started.md +++ b/docs/kr/essentials/getting-started.md @@ -4,7 +4,7 @@ Vue.js와 vue-router로 단일 페이지 애플리케이션을 만드는 것은 간단합니다. Vue.js를 통해 우리는 이미 컴포넌트로 애플리케이션을 구성하고 있습니다. vue-router를 추가 할 때, 우리가해야 할 일은 우리의 컴포넌트를 route에 매핑하고 vue-router가 어디서 렌더링할 지 지정하는 것입니다. 다음은 기본적인 예입니다. -> 모든 예제는 Vue의 독립형 버전을 사용하여 템플릿 구문 분석을 가능하게합니다. 자세한 내용은 [여기](http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) 있습니다. +> 모든 예제는 Vue의 전체 버전을 사용하여 템플릿 구문 분석을 가능하게합니다. 자세한 내용은 [여기](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only) 있습니다. ### HTML @@ -17,7 +17,7 @@ Vue.js와 vue-router로 단일 페이지 애플리케이션을 만드는 것은

- + Go to Foo Go to Bar

@@ -30,7 +30,7 @@ Vue.js와 vue-router로 단일 페이지 애플리케이션을 만드는 것은 ### JavaScript ``` js -// 0. 모듈 시스템을 사용하는 경우 (예: vue-cli를 이용해서), Vue 및 VueRouter를 가져온 다음 Vue.use(VueRouter)를 호출하십시오. +// 0. 모듈 시스템을 사용하는 경우 (예: vue-cli를 이용해서), Vue 및 VueRouter를 가져온 다음 `Vue.use(VueRouter)`를 호출하십시오. // 1. 라우트 컴포넌트를 정의하십시오. // 다른 파일에서 가져올 수 있습니다. @@ -39,7 +39,7 @@ const Bar = { template: '
bar
' } // 2. 라우트를 정의합니다. // 일부 라우트 정의 각 라우트는 컴포넌트에 맵핑되어야합니다. -// "컴포넌트"는 Vue.extend()를 통해 생성된 +// "컴포넌트"는 `Vue.extend()`를 통해 생성된 // 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체 일 수 있습니다. // 나중에 중첩 된 라우트에 대해 이야기하겠습니다. const routes = [ diff --git a/docs/kr/essentials/history-mode.md b/docs/kr/essentials/history-mode.md index 8a07fd802..012087c32 100644 --- a/docs/kr/essentials/history-mode.md +++ b/docs/kr/essentials/history-mode.md @@ -40,10 +40,65 @@ location / { } ``` -#### Node.js (Express) +#### Native Node.js + +```js +const http = require("http") +const fs = require("fs") +const httpPort = 80 + +http.createServer((req, res) => { + fs.readFile("index.htm", "utf-8", (err, content) => { + if (err) { + console.log('We cannot open "index.htm" file.') + } + + res.writeHead(200, { + "Content-Type": "text/html; charset=utf-8" + }) + + res.end(content) + }) +}).listen(httpPort, () => { + console.log("Server listening on: http://localhost:%s", httpPort) +}) +``` + + +#### Express와 Node.js Node.js/Express의 경우 [connect-history-api-fallback 미들웨어](https://github.com/bripkens/connect-history-api-fallback)를 고려해보세요. +#### Internet Information Services (IIS) + +``` + + + + + + + + + + + + + + + + + + + + + + + + +``` + + ## 주의 사항 주의 사항이 있습니다. 여러분의 서버는 404 에러를 보고하지 않을 것입니다. 왜냐하면 모든 발견되지 않은 경로가 이제 `index.html` 파일을 제공하기 때문입니다. 이 문제를 해결하려면 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해야합니다. @@ -58,4 +113,4 @@ const router = new VueRouter({ }) ``` -또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 들어오는 URL을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있습니다. +또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 들어오는 URL을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있습니다. 더 자세한 설명은 [Vue 서버사이드 렌더링 문서](https://ssr.vuejs.org/en/)을 읽어보세요 diff --git a/docs/kr/essentials/named-routes.md b/docs/kr/essentials/named-routes.md index 525ce3f86..bab81564c 100644 --- a/docs/kr/essentials/named-routes.md +++ b/docs/kr/essentials/named-routes.md @@ -14,7 +14,7 @@ const router = new VueRouter({ }) ``` -명명 된 라우트에 링크하려면, 객체를 `router-link`, 컴포넌트의 `to` prop로 전달할 수 있습니다. +이름을 가진 라우트에 링크하려면, 객체를 `router-link`, 컴포넌트의 `to` prop로 전달할 수 있습니다. ``` html User @@ -22,7 +22,7 @@ const router = new VueRouter({ 이것은 `router.push()`와 프로그램적으로 사용되는 것과 정확히 같은 객체입니다. -``` js +```js router.push({ name: 'user', params: { userId: 123 }}) ``` diff --git a/docs/kr/essentials/passing-props.md b/docs/kr/essentials/passing-props.md index ca1903c69..2ee4b1c03 100644 --- a/docs/kr/essentials/passing-props.md +++ b/docs/kr/essentials/passing-props.md @@ -35,12 +35,12 @@ const router = new VueRouter({ ### Boolean 모드 -props를 true로 설정하면 route.params가 컴포넌트 props로 설정됩니다. +`props`를 `true`로 설정하면 `route.params`가 컴포넌트 `props`로 설정됩니다. ### 객체 모드 -props가 객체일때 컴포넌트 props가 있는 그대로 설정됩니다. -props가 정적일 때 유용합니다. +`props`가 객체일때 컴포넌트 `props`가 있는 그대로 설정됩니다. +`props`가 정적일 때 유용합니다. ``` js const router = new VueRouter({ @@ -52,8 +52,7 @@ const router = new VueRouter({ ### 함수 모드 -props를 반환하는 함수를 만들 수 있습니다. -이를 통해 전달인자를 다른 타입으로 캐스팅하고 적정인 값을 라우트 기반 값과 결합됩니다. +`props`를 반환하는 함수를 만들 수 있습니다. 이를 통해 전달인자를 다른 타입으로 캐스팅하고 적정인 값을 라우트 기반 값과 결합됩니다. ``` js const router = new VueRouter({ @@ -63,9 +62,9 @@ const router = new VueRouter({ }) ``` -`/search?q=vue`는 `{query: "vue"}`를 SearchUser 컴포넌트에 전달합니다. +`/search?q=vue`는 `{query: "vue"}`를 `SearchUser` 컴포넌트에 전달합니다. -라우트 변경시에만 평가되므로 props 함수는 상태를 저장하지 않도록 합니다. -props를 정의할 상태가 필요한 경우 래퍼 컴포넌트를 사용하면 상태가 변경될 때마다 응답할 수 있습니다. +라우트 변경시에만 평가되므로 `props` 함수는 상태를 저장하지 않도록 합니다. +`props`를 정의할 상태가 필요한 경우 래퍼 컴포넌트를 사용하면 상태가 변경될 때마다 응답할 수 있습니다. 고급 사용예를 보려면 [예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)를 확인하세요.