Skip to content

Update docs in Korean (2.6.0+) #1625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Jul 25, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions docs/kr/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
14 changes: 7 additions & 7 deletions docs/kr/advanced/data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 합니다. 예를 들어, 사용자 프로필을 렌더링하기 전에 서버에서 사용자의 데이터를 가져와야 합니다. 우리는 두 가지 방법을 사용할 수 있습니다.

- **탐색 후 가져 오기**: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져 오는 동안 로드 상태를 표시합니다.
- **탐색 후 가져오기**: 먼저 탐색하고 들어오는 컴포넌트의 라이프 사이클 훅에서 데이터를 가져옵니다. 데이터를 가져오는 동안 로드 상태를 표시합니다.

- **탐색하기 전에 가져 오기**: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색을 수행합니다.
- **탐색하기 전에 가져오기**: 라우트 가드에서 경로를 탐색하기 전에 데이터를 가져오고 그 후에 탐색을 수행합니다.

엄밀히 말하면 두 가지 모두 유효한 선택입니다. 궁극적인 목표는 사용자 경험에 달려 있습니다.

## 탐색 후 가져 오기
## 탐색 후 가져오기

이 방법을 사용하면 들어오는 컴포넌트를 즉시 탐색하고 렌더링하며 컴포넌트의 `created` 훅에서 데이터를 가져옵니다. 네트워크를 통해 데이터를 가져 오는 동안 로드 상태를 표시 할 수 있는 기회를 제공하며 각 뷰 마다 로드를 다르게 처리 할 수도 있습니다.

Expand Down Expand Up @@ -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) {
Expand All @@ -68,7 +68,7 @@ export default {
}
```

## 탐색하기 전에 가져 오기
## 탐색하기 전에 가져오기

이 접근 방식을 사용하면 실제로 새 경로로 이동하기 전에 데이터를 가져옵니다.
들어오는 컴포넌트에서 `beforeRouteEnter` 가드에서 데이터를 가져올 수 있으며 페치가 완료되면 `next`만 호출 할 수 있습니다.
Expand All @@ -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) {
Expand All @@ -109,4 +109,4 @@ export default {
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

98라인에도 57라인과 통일해서 백틱을 넣으면 좋겠습니다.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가했습니다 👍

```

다음 뷰에 대한 리소스를 가져 오는 동안 사용자는 현재 뷰를 유지합니다. 따라서 데이터를 가져 오는 동안 진행률 표시줄이나 일종의 표시기를 표시하는 것을 추천합니다. 데이터 가져 오기가 실패하면 일종의 전역 경고 메시지를 표시해야합니다.
다음 뷰에 대한 리소스를 가져 오는 동안 사용자는 현재 뷰를 유지합니다. 따라서 데이터를 가져 오는 동안 진행률 표시줄이나 일종의 표시기를 표시하는 것을 추천합니다. 데이터 가져오기가 실패하면 일종의 전역 경고 메시지를 표시해야합니다.
35 changes: 19 additions & 16 deletions docs/kr/advanced/lazy-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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은 동일한 이름의 묶음을 가진 비동기 모듈을 동일한 비동기 묶음으로 그룹화합니다.
26 changes: 13 additions & 13 deletions docs/kr/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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`에 전달 된 콜백을 호출합니다.
3 changes: 2 additions & 1 deletion docs/kr/advanced/scroll-behavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 이상만 지원)

잘못된 값이나 빈 객체가 반환되면 스크롤이 발생하지 않습니다.

Expand Down Expand Up @@ -53,6 +53,7 @@ scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
// , offset: { x: 0, y: 10 }
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/kr/advanced/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Bar = {
```

``` js
// 그런 다음 부모 구성 요소에서 $route를 보고 사용할 전환을 결정합니다
// 그런 다음 부모 구성 요소에서 `$route`를 보고 사용할 전환을 결정합니다
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
Expand Down
16 changes: 15 additions & 1 deletion docs/kr/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -84,4 +88,14 @@

- 자료형: `Function`

사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다.
사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다.

### fallback

> 2.6.0+

- 자료형: `boolean`

브라우저가 `history.pushState`를 지원하지 않을 때 라우터가 `hash`모드로 변경되어야 할지 설정합니다. 기본값은 `true`입니다.

이를 `false`로 설정하면 IE9에서 모든 `router-link`를 탐색 할 수 있습니다. 이것은 해시모드 URL이 SSR에서 작동하지 않기 때문에 앱이 서버에서 렌더링되어 IE9에서 작동해야하는 경우에 유용합니다.
4 changes: 4 additions & 0 deletions docs/kr/api/router-instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
}
```

- `current` 현재 라우트를 나타냅니다. (대부분의 경우에 변경할 일이 없습니다.)

- `append`는 `current` 라우트에 추가할 수 있도록 합니다 ([`router-link`](router-link.md#props)처럼)

- **router.addRoutes(routes)**

> 2.2.0+
Expand Down
8 changes: 4 additions & 4 deletions docs/kr/api/router-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
<!-- 이렇게 렌더링 됩니다. -->
<a href="home">Home</a>

<!-- v-bind를 이용한 표현식 -->
<!-- `v-bind`를 이용한 표현식 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- v-bind를 생략하면 다른 prop를 바인딩 하는 것과 같습니다. -->
<!-- `v-bind`를 생략하면 다른 prop를 바인딩 하는 것과 같습니다. -->
<router-link :to="'home'">Home</router-link>

<!-- 위와 같습니다. -->
Expand All @@ -38,7 +38,7 @@
<!-- 이름을 가지는 라우트 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 쿼리가 있으면, /register?plan=private 이 됩니다. -->
<!-- 쿼리가 있으면, `/register?plan=private` 이 됩니다. -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
```

Expand Down Expand Up @@ -99,7 +99,7 @@
이것의 결과는 `<router-link to="/">`가 모든 라우터에 대해 활성화 될 것입니다! 링크를 "완전 일치 모드"로 강제하려면 `exact` prop를 사용하십시오.

``` html
<!-- 이 링크는 / 에서만 active 됩니다 -->
<!-- 이 링크는 `/` 에서만 active 됩니다 -->
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

active -> 활성화

<router-link to="/" exact>
```

Expand Down
8 changes: 4 additions & 4 deletions docs/kr/essentials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -17,7 +17,7 @@ Vue.js와 vue-router로 단일 페이지 애플리케이션을 만드는 것은
<p>
<!-- 탐색을 위해 라우터 링크 구성 요소를 사용하십시오. -->
<!-- `to` prop를 전달하여 링크를 지정하십시오. -->
<!-- <router-link>는 기본적으로`<a>`태그로 렌더링 될 것입니다 -->
<!-- `<router-link>`는 기본적으로`<a>`태그로 렌더링 될 것입니다 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
Expand All @@ -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. 라우트 컴포넌트를 정의하십시오.
// 다른 파일에서 가져올 수 있습니다.
Expand All @@ -39,7 +39,7 @@ const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의합니다.
// 일부 라우트 정의 각 라우트는 컴포넌트에 맵핑되어야합니다.
// "컴포넌트"는 Vue.extend()를 통해 생성된
// "컴포넌트"는 `Vue.extend()`를 통해 생성된
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체 일 수 있습니다.
// 나중에 중첩 된 라우트에 대해 이야기하겠습니다.
const routes = [
Expand Down
59 changes: 57 additions & 2 deletions docs/kr/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

```
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
```


## 주의 사항

주의 사항이 있습니다. 여러분의 서버는 404 에러를 보고하지 않을 것입니다. 왜냐하면 모든 발견되지 않은 경로가 이제 `index.html` 파일을 제공하기 때문입니다. 이 문제를 해결하려면 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해야합니다.
Expand All @@ -58,4 +113,4 @@ const router = new VueRouter({
})
```

또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 들어오는 URL을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있습니다.
또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 들어오는 URL을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있습니다. 더 자세한 설명은 [Vue 서버사이드 렌더링 문서](https://ssr.vuejs.org/en/)을 읽어보세요
Loading