Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 6c3ec8e

Browse filesBrowse files
ChangJoo-Parkkazupon
authored andcommitted
Update Korean (vuejs#546)
1 parent 857e5c3 commit 6c3ec8e
Copy full SHA for 6c3ec8e

File tree

Expand file treeCollapse file tree

16 files changed

+88
-88
lines changed
Filter options
Expand file treeCollapse file tree

16 files changed

+88
-88
lines changed

‎docs/ko/README.md

Copy file name to clipboardExpand all lines: docs/ko/README.md
+6-6Lines 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

Copy file name to clipboardExpand all lines: docs/ko/configurations/advanced.md
+2-2Lines 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

Copy file name to clipboardExpand all lines: docs/ko/configurations/asset-url.md
+2-2Lines 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`로 돌아갑니다.
+10-10Lines 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

Copy file name to clipboardExpand all lines: docs/ko/features/css-modules.md
+12-12Lines 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

Copy file name to clipboardExpand all lines: docs/ko/features/es2015.md
+5-5Lines 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

Copy file name to clipboard
+3-3Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.