Skip to content

Commit 6c3ec8e

Browse files
ChangJoo-Parkkazupon
authored andcommitted
Update Korean (#546)
1 parent 857e5c3 commit 6c3ec8e

File tree

16 files changed

+88
-88
lines changed

16 files changed

+88
-88
lines changed

docs/ko/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22

33
### `vue-loader`는 무엇인가요?
44

5-
`vue-loader`는 다음과 같은 형태로 작성된 Vue 컴포넌트를 일반적인 자바스크립트 모듈로 변환할 수 있는 Webpack 로더입니다.
5+
`vue-loader`는 다음과 같이 작성된 Vue 컴포넌트를 일반적인 자바스크립트 모듈로 변환할 수 있는 Webpack에서 사용하는 로더입니다.
66

77
![screenshot](http://blog.evanyou.me/images/vue-component.png)
88

99
다음은 `vue-loader`가 제공하는 여러가지 유용한 기능입니다.
1010

1111
- 기본적으로 ES2015를 지원합니다.
12-
- Vue 컴포넌트 각 요소에 따라 서로 다른 Webpack 로더를 사용할 수 있습니다. 예를들면 `<style>`에 SASS, `<template>`에 Jade로 각각 설정 가능합니다.
12+
- Vue 컴포넌트 마다 서로 다른 Webpack 로더를 사용할 수 있습니다. 예를들면 `<style>`에 SASS, `<template>`에 Jade로 각각 설정 가능합니다.
1313
- `<style>``<template>`에서 참조된 정적 Asset 파일을 모듈로 취급하고 Webpack 로더로 처리합니다.
1414
- 각 컴포넌트마다 지정된 CSS를 시뮬레이트 할 수 있습니다.
15-
- 개발 중에 컴포넌트 hot-reloading을 지원합니다.
15+
- 개발 중에 컴포넌트 핫 리로딩을 지원합니다.
1616

1717
한 마디로 Webpack과 `vue-loader`의 결합은 Vue.js 어플리케이션을 제작하기위한 현대적이고 유연하며 매우 강력한 작업환경을 제공합니다.
1818

@@ -24,14 +24,14 @@
2424

2525
![webpack](http://webpack.github.io/assets/what-is-webpack.png)
2626

27-
간단한 예를 들어보자면, 우리가 많은 CommonJS 모듈을 가지고 있다고 가정해봅시다. 모듈들은 브라우저 내부에서 바로 실행될 수 없기에 `<script>` 태그를 통해 불러올 수 있도록 하나의 파일로 "묶어"야 합니다. Webpack은 `require()` 호출을 통해 의존되어 있는 각 파일을 하나로 묶을 수 있습니다.
27+
간단한 예를 들어보자면, 우리가 많은 CommonJS 모듈을 가지고 있다고 가정해봅시다. 모듈들은 브라우저 내부에서 바로 실행될 수 없으므로 `<script>` 태그를 통해 불러올 수 있도록 하나의 파일로 "묶어"야 합니다. Webpack은 `require()` 호출을 통해 의존하는 각 파일을 하나로 묶을 수 있습니다.
2828

29-
여기서 Webpack은 묶는일 외에도 더 많은 일을 할 수 있습니다. "로더들"을 사용하면 최종 Bundle(묶음)을 출력하기 전에 원하는 방식으로 모든 유형의 파일을 변환할 수 있도록 Webpack에 지시할 수 있습니다. 몇 가지 예를 봅시다.
29+
여기서 Webpack은 묶는일 외에도 더 많은 일을 할 수 있습니다. "로더"들을 사용하면 최종 Bundle(묶음)을 출력하기 전에 원하는 방식으로 모든 유형의 파일을 변환할 수 있도록 Webpack에 지시할 수 있습니다. 몇 가지 예를 봅시다.
3030

3131
- ES2015 또는 CoffeeScript, TypeScript 모듈을 ES5 CommonJS 모듈로 변환할 수 있습니다.
3232
- 선택 사항으로 컴파일 전에 linter를 이용하여 소스 코드를 연결 할 수 있습니다.
3333
- Jade 템플릿을 일반 HTML로 변경하고 JavaScript 문자열로 반환합니다.
3434
- SASS 파일을 일반 CSS로 변환한 다음 CSS를 `<style>` 태그로 삽입하는 JavaScript 스니펫으로 변환합니다.
3535
- HTML 또는 CSS에서 참조된 이미지 파일을 처리하고 경로 구성에 따라 이동한 후 md5 해시를 사용하여 이름을 지정합니다.
3636

37-
Webpack은 매우 강력하며 작동 원리를 이해한다면 프론트엔드 작업환경을 획기적으로 향상시킬 수 있습니다. 단점은 장황하고 복잡한 구성입니다. 하지만 이 가이드를 사용하면 Vue.js 및 `vue-loader`에서 Webpack을 사용할 때 가장 일반적인 문제에 대한 솔루션을 찾을 수 있습니다.
37+
Webpack은 매우 강력하며 작동 원리를 이해한다면 프론트엔드 작업환경을 획기적으로 향상시킬 수 있습니다. 구성하기에 장황하고 복잡한 것이 단점입니다. 하지만 이 가이드를 사용하면 Vue.js 및 `vue-loader`에서 Webpack을 사용할 때 가장 일반적인 문제에 대한 솔루션을 찾을 수 있습니다.

docs/ko/configurations/advanced.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 고급 로더 설정
22

3-
때로는 `vue-loader`가 그것을 추론하는 대신 언어에 커스텀 로더 스트링을 적용하기를 원할 수도 있습니다. 또는 디폴트 언어에서 기본적으로 제공되는 로더 설정을 덮어쓰고 싶을 수도 있습니다. 이를 위해서 Webpack 설정 파일에 `vue` 블럭을 추가하고 `loaders` 옵션을 지정하세요.
3+
때로는 `vue-loader`가 그것을 추론하는 대신 언어에 사용자 정의 로더 문자열을 적용하기를 원할 수도 있습니다. 또는 기본 언어에서 기본적으로 제공되는 로더 설정을 덮어쓰고 싶을 수도 있습니다. 이를 위해서 Webpack 설정 파일에 `vue` 블럭을 추가하고 `loaders` 옵션을 지정할 수 있습니다.
44

55
### Webpack 1.x
66

@@ -53,4 +53,4 @@ module.exports = {
5353
}
5454
```
5555

56-
고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).
56+
고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).

docs/ko/configurations/asset-url.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Asset URL 핸들링
22

3-
기본적으로, `vue-loader`[css-loader](https://github.com/webpack/css-loader)와 Vue 템플릿 컴파일러로 스타일과 템플릿을 자동으로 처리합니다. 이 컴파일 과정에서 `<img src="...">`, `background: url(...)`, CSS `@import`와 같은 모든 Asset URL은 **모듈 종속성**으로 해결됩니다.
3+
기본적으로, `vue-loader`[css-loader](https://github.com/webpack/css-loader)와 Vue 템플릿 컴파일러로 스타일과 템플릿을 자동으로 처리합니다. 이 컴파일 과정에서 `<img src="...">`, `background: url(...)`, CSS `@import`와 같은 모든 Asset URL은 **모듈 종속성** 으로 해결됩니다.
44

55
예를 들어, `url(./image.png)``require('./image.png')`로 변환되어,
66

@@ -20,4 +20,4 @@ createElement('img', { attrs: { src: require('../image.png') }})
2020

2121
1. `file-loader`는 당신이 Asset 파일을 복사하여 붙여넣을 곳을 지정하고 더 나은 캐싱을 위해 버전 해시를 사용하여 이름을 지정하는 방법을 사용합니다. 더 나아가 **이것은 `*.vue` 파일 옆에 이미지를 놓고 배포 URL에 대해 걱정하지 않으면서 폴더 구조를 기반으로 상대 경로를 사용할 수 있습니다**. 올바른 설정을 사용하면 Webpack은 파일 경로를 번들 아웃풋을 올바른 URL로 자동으로 재작성합니다.
2222

23-
2. `url-loader`는 파일이 주어진 값보다 작은 경우 조건부로 파일을 base-64 데이터 URL로 인라인 할 수 있도록 합니다. 이렇게하면 사소한 파일들에 대한 HTTP 요청의 양을 줄일 수 있습니다. 파일이 주어진 값보다 크면 자동으로 `file-loader`로 돌아갑니다.
23+
2. `url-loader`는 파일이 주어진 값보다 작은 경우 조건부로 파일을 base-64 데이터 URL로 인라인 할 수 있도록 합니다. 이렇게하면 사소한 파일들에 대한 HTTP 요청의 양을 줄일 수 있습니다. 파일이 주어진 값보다 크면 자동으로 `file-loader`로 돌아갑니다.
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 전처리기 사용하기
22

3-
Webpack에서는 모든 전처리기가 해당 로더와 함께 적용되어야 합니다. `vue-loader`는 다른 Webpack 로더를 사용하여 Vue 컴포넌트의 일부를 처리 할 수 있게합니다. language block의 `lang` 속성에서 사용할 적절한 로더를 자동으로 유추합니다.
3+
Webpack에서는 모든 전처리기가 해당 로더와 함께 적용되어야 합니다. `vue-loader`는 다른 Webpack 로더를 사용하여 Vue 컴포넌트의 일부를 처리 할 수 있게 합니다. 언어 블럭의 `lang` 속성에서 사용할 적절한 로더를 자동으로 알아챕니다.
44

55
### CSS
66

@@ -12,29 +12,29 @@ npm install sass-loader node-sass --save-dev
1212

1313
``` html
1414
<style lang="sass">
15-
/* write sass here */
15+
/* sass로 작성하세요 */
1616
</style>
1717
```
1818

1919
내부적으로, `<style>` 태그 안의 텍스트 내용은 후처리를 위해서 전달되기 전에 `sass-loader`에 의해 먼저 컴파일됩니다.
2020

21-
### Javascript
21+
### JavaScript
2222

23-
Vue 컴포넌트 내의 모든 Javascript는 기본적으로 `babel-loader`에 의해서 처리됩니다. 물론 당신은 그것을 변경할 수 있습니다.
23+
Vue 컴포넌트 내의 모든 JavaScript는 기본적으로 `babel-loader`에 의해서 처리됩니다. 물론 변경할 수 있습니다.
2424

2525
``` bash
2626
npm install coffee-loader --save-dev
2727
```
2828

2929
``` html
3030
<script lang="coffee">
31-
# Write coffeescript!
31+
# coffeescript로 작성하세요!
3232
</script>
3333
```
3434

35-
### Templates
35+
### 템플릿
3636

37-
`pug-loader`와 같은 대부분의 Webpack 템플릿 로더는 컴파일된 HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리 앞서 처리한 방법과는 약간 다릅니다. `pug-loader` 대신 원래의 `pug` 파일을 설치하여 사용할 수 있습니다.
37+
`pug-loader`와 같은 대부분의 Webpack 템플릿 로더는 컴파일된 HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리는 앞서 처리한 방법과 약간 다릅니다. `pug-loader` 대신 원래의 `pug` 파일을 설치하여 사용할 수 있습니다.
3838

3939
``` bash
4040
npm install pug --save-dev
@@ -47,16 +47,16 @@ div
4747
</template>
4848
```
4949

50-
> **중요:** 만약 당신이 `vue-loader@<8.2.0`을 사용한다면, 당신은 `template-html-loader`도 설치해야 합니다.
50+
> **중요:** 만약 `vue-loader@<8.2.0`을 사용한다면, `template-html-loader`도 설치해야 합니다.
5151
5252
### 인라인 로더 요청
5353

5454
당신은 `lang` 속성에서 [Webpack 로더 요청](https://webpack.github.io/docs/loaders.html#introduction)을 할 수 있습니다.
5555

5656
``` html
5757
<style lang="sass?outputStyle=expanded">
58-
/* 여기에 SASS를 사용하세요! */
58+
/* sass로 작성하세요 */
5959
</style>
6060
```
6161

62-
그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**
62+
그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**

docs/ko/features/css-modules.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# CSS Modules
1+
# CSS 모듈
22

3-
> requires ^9.8.0
3+
> 9.8.0 이상 버전을 요구합니다
44
5-
[CSS Modules](https://github.com/css-modules/css-modules)은 CSS을 모듈화하고 구성하는데 널리 사용되는 시스템입니다. `vue-loader`스뮬레이트된 범위 CSS의 대안으로 CSS Modules와 함께 first-class intergration을 제공합니다.
5+
[CSS 모듈](https://github.com/css-modules/css-modules)은 CSS을 모듈화하고 구성하는데 널리 사용되는 시스템입니다. `vue-loader`시뮬레이트된 범위 CSS의 대안으로 CSS 모듈과 함께 1급 클래스로의 통합을 제공합니다.
66

77
### 사용법
88

9-
`<style>``moudle` 속성을 삽입하니다.
9+
`<style>``moudle` 속성을 삽입합니다.
1010

1111
``` html
1212
<style module>
@@ -19,7 +19,7 @@
1919
</style>
2020
```
2121

22-
이렇게하면 `css-loader`에 대한 CSS Modules 모드가 켜지고 결과적으로 클래스 식별자 오브젝트는 `$style` 이름의 계산된 속성으로 컴포넌트에 주입됩니다. 당신은 동적 클래스 바인딩을 사용하여 템플릿에서 이를 사용할 수 있습니다.
22+
이렇게하면 `css-loader`에 대한 CSS 모듈 모드가 켜지고 결과적으로 클래스 식별자 오브젝트는 `$style` 이름의 계산된 속성으로 컴포넌트에 주입됩니다. 동적 클래스 바인딩을 사용하여 템플릿에서 이를 사용할 수 있습니다.
2323

2424
``` html
2525
<template>
@@ -29,7 +29,7 @@
2929
</template>
3030
```
3131

32-
그것은 계산된 속성이기 때문에 `:class`의 오브젝트/배열 문법에도 작동합니다.
32+
이는 계산된 속성이기 때문에 `:class`의 오브젝트/배열 문법에도 작동합니다.
3333

3434
``` html
3535
<template>
@@ -58,11 +58,11 @@ export default {
5858
</script>
5959
```
6060

61-
[global exceptions](https://github.com/css-modules/css-modules#exceptions)[composition](https://github.com/css-modules/css-modules#composition) 같은 자세한 정보는 [CSS Modules 스펙](https://github.com/css-modules/css-modules)을 참고하세요.
61+
[전역 예외사항](https://github.com/css-modules/css-modules#exceptions)[구성](https://github.com/css-modules/css-modules#composition) 같은 자세한 정보는 [CSS 모듈 스펙](https://github.com/css-modules/css-modules)을 참고하세요.
6262

63-
### 속성 이름 커스터마이징
63+
### 사용자 정의 이름 주입
6464

65-
하나의 `*.vue` 컴포넌트 내에 하나 이상의 `<style>` 태그를 가질 수 있습니다. 삽입된 스타일이 서로 덮어 쓰지 않게하려면 `module` 속성에 값을 지정하여 계산된 속성의 이름을 커스터마이징할 수 있습니다.
65+
하나의 `*.vue` 컴포넌트 내에 하나 이상의 `<style>` 태그를 가질 수 있습니다. 삽입된 스타일이 서로 덮어 쓰지 않게하려면 `module` 속성에 값을 지정하여 계산된 속성의 이름을 사용자 정의할 수 있습니다.
6666

6767
``` html
6868
<style module="a">
@@ -76,7 +76,7 @@ export default {
7676

7777
### `css-loader` 쿼리 설정
7878

79-
CSS Modules는 [css-loader](https://github.com/webpack/css-loader)를 통해 처리됩니다. `<style module>`을 사용하면 `css-loader`에 사용되는 기본적인 쿼리는 다음과 같습니다.
79+
CSS 모듈은 [css-loader](https://github.com/webpack/css-loader)를 통해 처리됩니다. `<style module>`을 사용하면 `css-loader`에 사용되는 기본적인 쿼리는 다음과 같습니다.
8080

8181
``` js
8282
{
@@ -92,9 +92,9 @@ CSS Modules는 [css-loader](https://github.com/webpack/css-loader)를 통해 처
9292
// webpack 1
9393
vue: {
9494
cssModules: {
95-
// 로컬 ID값을 덮어씌웁니다.
95+
// 로컬 ID값을 덮어 씁니다.
9696
localIdentName: '[path][name]---[local]---[hash:base64:5]',
97-
// enable camelCase
97+
// camelCase를 사용합니다
9898
camelCase: true
9999
}
100100
}

docs/ko/features/es2015.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ export default {
2222
</script>
2323
```
2424

25-
여기서는 ES2015의 오브젝트 리터럴을 사용하여 하위 컴포넌트를 구성합니다. `{ ComponentA }``{ ComponentA: ComponentA }`의 줄임말 입니다. Vue는 키를 자동으로 `component-a`로 변환하기 때문에 당신은 템플릿에서 가져온 컴포넌트롤 `<component-a>`로 사용할 수 있습니다.
25+
여기서는 ES2015의 오브젝트 리터럴을 사용하여 하위 컴포넌트를 구성합니다. `{ ComponentA }``{ ComponentA: ComponentA }`의 줄임말 입니다. Vue는 키를 자동으로 `component-a`로 변환하기 때문에 템플릿에서 가져온 컴포넌트를 `<component-a>`로 사용할 수 있습니다.
2626

2727
### 템플릿의 ES2015
2828

29-
`*.vue`파일의 `<template>`Javascript 렌더링 함수로 컴파일 된 다음 [Buble](https://buble.surge.sh/guide/)의 사용자 정의 빌드로 처리되어 ES2015 기능을 지원합니다. 이를 통해 [Object shorthand properties](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-)[computed properties](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)과 같은 기능을 이용할 수 있습니다.
29+
`*.vue`파일의 `<template>`JavaScript 렌더링 함수로 컴파일 된 다음 [Buble](https://buble.surge.sh/guide/)의 사용자 정의 빌드로 처리되어 ES2015 기능을 지원합니다. 이를 통해 [객체 약어 속성](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-)[계산된 속성](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)과 같은 기능을 이용할 수 있습니다.
3030

3131
``` html
3232
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
@@ -38,7 +38,7 @@ export default {
3838
<div :class="{ active, [`${prefix}-button`]: isButton }">
3939
```
4040

41-
**vue@^2.1.0 only:** `v-for` 또는 scoped slot을 사용하여 매개 변수 소멸을 사용할 수도 있습니다.
41+
**vue@^2.1.0만 가능합니다:** `v-for` 또는 범위를 가지는 slot을 사용하여 매개 변수 소멸을 사용할 수도 있습니다.
4242

4343
``` html
4444
<li v-for="{ id, text } in items">
@@ -58,8 +58,8 @@ export default {
5858

5959
### 일반적인 `.js` 파일로 변환하기
6060

61-
`vue-loader`는 오직 `*.vue` 파일만 처리하기 때문에 Webpack config 파일에 `babel-loader` 또는 `buble-loader`를 사용하여 보통 `*.js` 파일을 처리하도록 지시해야 합니다. `vue-cli`로 스캐폴딩된 프로젝트는 이미 당신을 위해 그렇게 설정되어 있습니다.
61+
`vue-loader`는 오직 `*.vue` 파일만 처리하기 때문에 Webpack 설정 파일에 `babel-loader` 또는 `buble-loader`를 사용하여 보통 `*.js` 파일을 처리하도록 지시해야 합니다. `vue-cli`로 스캐폴딩된 프로젝트는 이미 당신을 위해 그렇게 설정되어 있습니다.
6262

6363
### `.babelrc`로 Babel 설정하기
6464

65-
`babel-loader`[`.babelrc`](https://babeljs.io/docs/usage/babelrc/)존중하므로 Babel 설정과 플로그인을 구성하는데 권장되는 방법입니다.
65+
`babel-loader`[`.babelrc`](https://babeljs.io/docs/usage/babelrc/)우선하므로 Babel 설정과 플러그인을 구성하는데 권장되는 방법입니다.

docs/ko/features/hot-reload.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# Hot Reload
1+
# 핫 리로드
22

3-
"Hot Reload"는 파일을 편집 할 때 단순히 페이지를 다시 로드하는 것이 아닙니다. Hot Reload 기능을 사용하면 `*.vue` 파일을 편집 할 때 해당 컴포넌트의 모든 인스턴스가 **페이지를 리로딩하지 않고** 변경됩니다. 심지어 앱의 현재 상태와 변경된 컴포넌트를 보존합니다. 이것은 템플릿 또는 컴포넌트의 스타일을 조정할 때 개발 환경이 크게 개선됩니다.
3+
"핫 리로드"는 파일을 편집 할 때 단순히 페이지를 다시 로드하는 것이 아닙니다. 핫 리로드 기능을 사용하면 `*.vue` 파일을 편집 할 때 해당 컴포넌트의 모든 인스턴스가 **페이지를 리로딩하지 않고** 변경됩니다. 심지어 앱의 현재 상태와 변경된 컴포넌트를 보존합니다. 이것은 템플릿 또는 컴포넌트의 스타일을 수정할 때 개발 환경이 크게 개선됩니다.
44

55
![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
66

7-
Hot Reload는 `vue-cli`로 프로젝트를 스캐폴딩했다면 바로 사용할 수 있습니다.
7+
핫 리로드는 `vue-cli`로 프로젝트를 스캐폴딩했다면 바로 사용할 수 있습니다.

0 commit comments

Comments
 (0)