Skip to content

Commit 7db1b25

Browse files
ChangJoo-Parkkazupon
authored andcommitted
[Korean Docs] Update docs for v12.x (#803)
* [Korean] Update docs * [Korean] Update advanced * [Korean] update spec.md * [Korean] update scoped-css.md * [Korean] update postcss.md * [Korean] update extract-css.md * [Korean] update custom-blocks.md * [Korean] Update options.md * [Korean] Update vue component spec * [Korean] update advanced * [Korean] Update postcss.md * [Korean] Update extract-css.md * [Korean] Update custom-blocks.md * [Korean] Update Summary.md * [Korean] Fix sentences
1 parent 99a2b7a commit 7db1b25

File tree

8 files changed

+433
-115
lines changed

8 files changed

+433
-115
lines changed

docs/kr/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- [Asset URL 핸들링](configurations/asset-url.md)
1414
- [고급 로더 설정](configurations/advanced.md)
1515
- [CSS 단일 파일로 추출하기](configurations/extract-css.md)
16+
- [사용자 정의 블록](configurations/custom-blocks.md)
1617
- 개발 환경
1718
- [배포용 빌드](workflow/production.md)
1819
- [Linting](workflow/linting.md)

docs/kr/configurations/advanced.md

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

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

5-
### Webpack 1.x
5+
1. `vue-loader`가 추측하는 대신 언어에 맞는 사용자 정의 로더를 사용해야합니다.
6+
7+
2. 기본 언어에 대한 로더를 덮어써야합니다.
8+
9+
3. 특정 language block을 위한 사용자 정의 프리 또는 포스트 프로세스를 해야합니다.
10+
11+
이를 위해 `vue-loader``loaders` 옵션을 지정해야합니다.
12+
13+
> 참고: `preLoaders``postLoaders`는 10.3.0 버전 이상에서만 지원합니다.
14+
15+
### Webpack 2.x
616

717
``` js
8-
// webpack.config.js
918
module.exports = {
10-
// 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
19+
// 기타 옵션들...
1120
module: {
12-
loaders: [
21+
// module.rules은 1.x버전의 module.loaders과 같습니다
22+
rules: [
1323
{
1424
test: /\.vue$/,
15-
loader: 'vue'
25+
loader: 'vue-loader',
26+
options: {
27+
// `loaders`는 기본 로더를 덮어씁니다.
28+
// 다음 설정은 "lang" 속성이 없는
29+
// 모든 <script> 태그가 coffee 로더와 함께 로드되도록 합니다
30+
loaders: {
31+
js: 'coffee-loader'
32+
},
33+
34+
// `preLoaders`는 기본 로더 앞에 붙습니다.
35+
// 이를 이용해 language block을 프리 프로세스할 수 있습니다.
36+
// 일반적으로 빌드타임에 다국어 처리를 할 수 있습니다.
37+
preLoaders: {
38+
js: '/path/to/custom/loader'
39+
},
40+
41+
// `postLoaders`는 기본 로더 뒤에 붙습니다.
42+
// - `html`의 경우, 기본 로더의 결과는 컴파일 된 JavaScript 렌더링 함수 코드가 됩니다.
43+
44+
// - `css`의 경우, 결과는 `vue-style-loader`가 반환하고
45+
// 대부분의 경우 별로 사용할 일은 없습니다. postcss 플러그인을 사용하는 것이 더 좋습니다.
46+
postLoaders: {
47+
html: 'babel-loader'
48+
},
49+
50+
// `excludedPreLoaders`는 반드시 정규표현식을 사용합니다
51+
excludedPreLoaders: /(eslint-loader)/
52+
}
1653
}
1754
]
18-
},
19-
// vue-loader 설정
20-
vue: {
21-
// 이 부분엔 다른 Vue 옵션도 들어 갈 수 있습니다.
22-
loaders: {
23-
// coffee-loader에 "lang" 속성이 없는 모든 <script>를 로드하세요.
24-
js: 'coffee',
25-
// <template>을 HTML 문자열로 직접 로드하면
26-
// vue-html-loader를 통해 파이핑하지 않아도 됩니다.
27-
html: 'raw'
28-
}
2955
}
3056
}
3157
```
3258

33-
### Webpack 2.x (^2.1.0-beta.25)
59+
### Webpack 1.x
3460

3561
``` js
62+
// webpack.config.js
3663
module.exports = {
37-
// 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
64+
// 기타 옵션들...
3865
module: {
39-
// module.rules는 1.x의 module.loaders와 동일합니다.
40-
rules: [
66+
loaders: [
4167
{
4268
test: /\.vue$/,
43-
loader: 'vue',
44-
// vue-loader 옵션은 이곳에 옵니다.
45-
options: {
46-
loaders: {
47-
// ...
48-
}
49-
}
69+
loader: 'vue'
5070
}
5171
]
72+
},
73+
// vue-loader 설정
74+
vue: {
75+
loaders: {
76+
// 위와 동일한 설정 규칙입니다
77+
}
5278
}
5379
}
5480
```
55-
5681
고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).
Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# 사용자 정의 블록
2+
3+
> 10.2.0 버전 이상에서 지원
4+
5+
`*.vue` 파일 안에 사용자 정의 language block을 정의할 수 있습니다. 사용자 정의 블록안의 내용은 `vue-loader` 옵션의 `loaders` 객체에 지정된 로더에서 처리된 다음 컴포넌트 모듈에서 요구됩니다. 설정은 [고급 로더 설정](../configurations/advanced.md)에서 설명한 내용과 유사합니다. 단, 일치하는 경우 `lang` 속성 대신 태그 이름을 사용합니다.
6+
7+
사용자 정의 블록에 일치하는 로더가 발견되면 처리합니다. 그렇지 않으면 무시합니다. 또한 발견된 로더가 함수를 반환하면 해당 함수는 `*.vue`파일의 컴포넌트를 매개변수로 사용하여 호출합니다.
8+
9+
## 단일 문서 파일 예제
10+
11+
다음은 모든 `<docs>` 사용자 정의 블록을 하나의 문서 파일로 추출하는 예 입니다.
12+
13+
#### component.vue
14+
15+
``` html
16+
<docs>
17+
## This is an Example component.
18+
</docs>
19+
20+
<template>
21+
<h2 class="red">{{msg}}</h2>
22+
</template>
23+
24+
<script>
25+
export default {
26+
data () {
27+
return {
28+
msg: 'Hello from Component A!'
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style>
35+
comp-a h2 {
36+
color: #f00;
37+
}
38+
</style>
39+
```
40+
41+
#### webpack.config.js
42+
43+
``` js
44+
// Webpack 2.x
45+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
46+
47+
module.exports = {
48+
module: {
49+
rules: [
50+
{
51+
test: /\.vue$/,
52+
loader: 'vue',
53+
options: {
54+
loaders: {
55+
// 모든 <docs>의 내용을 원문 그대로 추출합니다
56+
'docs': ExtractTextPlugin.extract('raw-loader'),
57+
}
58+
}
59+
}
60+
]
61+
},
62+
plugins: [
63+
// 모든 docs를 하나의 파일로 추출합니다
64+
new ExtractTextPlugin('docs.md')
65+
]
66+
}
67+
```
68+
69+
## 런타임에서 사용할 수 있는 문서
70+
71+
다음은 `<docs>` 사용자 정의 블록을 컴포넌트에 넣어 런타임에서 사용할 수 있는 예제입니다.
72+
73+
#### docs-loader.js
74+
75+
사용자 정의 블록 콘텐트를 삽입하려면 사용자 정의 로더가 필요합니다.
76+
77+
``` js
78+
module.exports = function (source, map) {
79+
this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
80+
JSON.stringify(source) +
81+
'}', map)
82+
}
83+
```
84+
85+
#### webpack.config.js
86+
87+
webpack이 `<docs>` 사용자 정의 블록을 위한 로더를 사용하도록 설정합니다.
88+
89+
``` js
90+
const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
91+
92+
module.exports = {
93+
module: {
94+
rules: [
95+
{
96+
test: /\.vue$/,
97+
loader: 'vue',
98+
options: {
99+
loaders: {
100+
'docs': docsLoader
101+
}
102+
}
103+
}
104+
]
105+
}
106+
}
107+
```
108+
109+
#### component.vue
110+
111+
이제 `<docs>` 블록의 내용을 런타임 중에 컴포넌트에서 사용할 수 있습니다.
112+
113+
``` html
114+
<template>
115+
<div>
116+
<component-b />
117+
<p>{{ docs }}</p>
118+
</div>
119+
</template>
120+
121+
<script>
122+
import componentB from 'componentB';
123+
124+
export default = {
125+
data () {
126+
return {
127+
docs: componentB.__docs
128+
}
129+
},
130+
components: {componentB}
131+
}
132+
</script>
133+
```

docs/kr/configurations/extract-css.md

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
11
# CSS 단일 파일로 추출하기
22

3-
다음 예제 설정을 사용하여 모든 Vue 컴포넌트의 처리된 CSS를 단일 CSS 파일로 추출할 수 있습니다.
4-
5-
### Webpack 1.x
6-
73
``` bash
84
npm install extract-text-webpack-plugin --save-dev
95
```
106

7+
## 쉬운 방법
8+
9+
> vue-loader@^12.0.0와 webpack@^2.0.0 필요
10+
1111
``` js
1212
// webpack.config.js
1313
var ExtractTextPlugin = require("extract-text-webpack-plugin")
1414

1515
module.exports = {
16-
// 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
16+
// other options...
1717
module: {
18-
loaders: [
18+
rules: [
1919
{
2020
test: /\.vue$/,
21-
loader: 'vue'
22-
},
21+
loader: 'vue-loader',
22+
options: {
23+
extractCSS: true
24+
}
25+
}
2326
]
2427
},
25-
vue: {
26-
loaders: {
27-
css: ExtractTextPlugin.extract("css"),
28-
// 당신은 <style lang="less"> 또는 다른 언어도 포함할 수 있습니다.
29-
less: ExtractTextPlugin.extract("css!less")
30-
}
31-
},
3228
plugins: [
3329
new ExtractTextPlugin("style.css")
3430
]
3531
}
3632
```
3733

38-
### Webpack 2.x (^2.1.0-beta.25)
34+
위 코드는 `*.vue` 파일 내부에서 `<style>`에 대한 추출을 자동으로 처리하며, 대부분의 프리프로세서와 함께 사용할 수 있습니다.
35+
36+
`*.vue`만 추출합니다. JavaScript에서 가져온 CSS는 별도로 설정해야합니다.
37+
38+
## 수동 설정
39+
40+
설정을 사용하여 모든 Vue 컴포넌트에서 처리된 CSS를 단일 CSS 파일로 추출하는 예제 입니다.
41+
42+
### Webpack 2.x
3943

40-
``` bash
41-
npm install extract-text-webpack-plugin --save-dev
42-
```
4344

4445
``` js
4546
// webpack.config.js
4647
var ExtractTextPlugin = require("extract-text-webpack-plugin")
4748

4849
module.exports = {
49-
// 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
50+
// 기타 옵션...
5051
module: {
5152
rules: [
5253
{
5354
test: /\.vue$/,
54-
loader: 'vue',
55+
loader: 'vue-loader',
5556
options: {
5657
loaders: {
5758
css: ExtractTextPlugin.extract({
5859
use: 'css-loader',
59-
fallback: 'vue-style-loader' // <- 이것은 vue-loader의 의존성이므로, npm3를 사용하는 경우에는 명시적으로 설치할 필요가 없습니다.
60+
fallback: 'vue-style-loader' // <- vue-loader의 의존성입니다. 그래서 npm3를 사용하면 명시적으로 설치할 필요는 없습니다.
6061
})
6162
}
6263
}
@@ -68,3 +69,36 @@ module.exports = {
6869
]
6970
}
7071
```
72+
73+
### Webpack 1.x
74+
75+
``` bash
76+
npm install extract-text-webpack-plugin --save-dev
77+
```
78+
79+
``` js
80+
// webpack.config.js
81+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
82+
83+
module.exports = {
84+
// 기타 옵션...
85+
module: {
86+
loaders: [
87+
{
88+
test: /\.vue$/,
89+
loader: 'vue'
90+
},
91+
]
92+
},
93+
vue: {
94+
loaders: {
95+
css: ExtractTextPlugin.extract("css"),
96+
// <style lang="less"> 또는 다른 언어를 포함할 수 있습니다.
97+
less: ExtractTextPlugin.extract("css!less")
98+
}
99+
},
100+
plugins: [
101+
new ExtractTextPlugin("style.css")
102+
]
103+
}
104+
```

0 commit comments

Comments
 (0)