[Korean Docs] Update docs for v12.x

docs/kr/SUMMARY.md

@@ -13,6 +13,7 @@
   - [Asset URL 핸들링](configurations/asset-url.md)
   - [고급 로더 설정](configurations/advanced.md)
   - [CSS 단일 파일로 추출하기](configurations/extract-css.md)
+  - [사용자 정의 블록](configurations/custom-blocks.md)
 - 개발 환경
   - [배포용 빌드](workflow/production.md)
   - [Linting](workflow/linting.md)

docs/kr/configurations/advanced.md

@@ -1,56 +1,81 @@
 # 고급 로더 설정
 
-때로는 `vue-loader`가 그것을 추론하는 대신 언어에 사용자 정의 로더 문자열을 적용하기를 원할 수도 있습니다. 또는 기본 언어에서 기본적으로 제공되는 로더 설정을 덮어쓰고 싶을 수도 있습니다. 이를 위해서 Webpack 설정 파일에 `vue` 블럭을 추가하고 `loaders` 옵션을 지정할 수 있습니다.
+아래와 같은 요구사항이 있을 수 있습니다.
 
-### Webpack 1.x
+1. `vue-loader`가 추측하는 대신 언어에 맞는 사용자 정의 로더를 사용해야합니다.
+
+2. 기본 언어에 대한 로더를 덮어써야합니다.
+
+3. 특정 language block을 위한 사용자 정의 프리 또는 포스트 프로세스를 해야합니다.
+
+이를 위해 `vue-loader`에 `loaders` 옵션을 지정해야합니다.
+
+> 참고: `preLoaders`와 `postLoaders`는 10.3.0 버전 이상에서만 지원합니다.
+
+### Webpack 2.x
 
 ``` js
-// webpack.config.js
 module.exports = {
-  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  // 기타 옵션들...
   module: {
-    loaders: [
+    // module.rules은 1.x버전의 module.loaders과 같습니다
+    rules: [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader',
+        options: {
+          // `loaders`는 기본 로더를 덮어씁니다.
+          // 다음 설정은 "lang" 속성이 없는 
+          // 모든 <script> 태그가 coffee 로더와 함께 로드되도록 합니다
+          loaders: {
+            js: 'coffee-loader'
+          },
+
+          // `preLoaders`는 기본 로더 앞에 붙습니다.
+          // 이를 이용해 language block을 프리 프로세스할 수 있습니다.
+          // 일반적으로 빌드타임에 다국어 처리를 할 수 있습니다.
+          preLoaders: {
+            js: '/path/to/custom/loader'
+          },
+
+          // `postLoaders`는 기본 로더 뒤에 붙습니다.
+          // - `html`의 경우, 기본 로더의 결과는 컴파일 된 JavaScript 렌더링 함수 코드가 됩니다.
+
+          //  - `css`의 경우, 결과는 `vue-style-loader`가 반환하고 
+          // 대부분의 경우 별로 사용할 일은 없습니다. postcss 플러그인을 사용하는 것이 더 좋습니다.
+          postLoaders: {
+            html: 'babel-loader'
+          },
+
+          // `excludedPreLoaders`는 반드시 정규표현식을 사용합니다
+          excludedPreLoaders: /(eslint-loader)/
+        }
       }
     ]
-  },
-  // vue-loader 설정
-  vue: {
-    // 이 부분엔 다른 Vue 옵션도 들어 갈 수 있습니다.
-    loaders: {
-      // coffee-loader에 "lang" 속성이 없는 모든 <script>를 로드하세요.
-      js: 'coffee',
-      // <template>을 HTML 문자열로 직접 로드하면
-      // vue-html-loader를 통해 파이핑하지 않아도 됩니다.
-      html: 'raw'
-    }
   }
 }
 ```
 
-### Webpack 2.x (^2.1.0-beta.25)
+### Webpack 1.x
 
 ``` js
+// webpack.config.js
 module.exports = {
-  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  // 기타 옵션들...
   module: {
-    // module.rules는 1.x의 module.loaders와 동일합니다.
-    rules: [
+    loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue',
-        // vue-loader 옵션은 이곳에 옵니다.
-        options: {
-          loaders: {
-            // ...
-          }
-        }
+        loader: 'vue'
       }
     ]
+  },
+  // vue-loader 설정
+  vue: {
+    loaders: {
+      // 위와 동일한 설정 규칙입니다
+    }
   }
 }
 ```
-
 고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).

docs/kr/configurations/custom-blocks.md

@@ -0,0 +1,133 @@
+# 사용자 정의 블록
+
+> 10.2.0 버전 이상에서 지원
+
+`*.vue` 파일 안에 사용자 정의 language block을 정의할 수 있습니다. 사용자 정의 블록안의 내용은 `vue-loader` 옵션의 `loaders` 객체에 지정된 로더에서 처리된 다음 컴포넌트 모듈에서 요구됩니다. 설정은 [고급 로더 설정](../configurations/advanced.md)에서 설명한 내용과 유사합니다. 단, 일치하는 경우 `lang` 속성 대신 태그 이름을 사용합니다.
+
+사용자 정의 블록에 일치하는 로더가 발견되면 처리합니다. 그렇지 않으면 무시합니다. 또한 발견된 로더가 함수를 반환하면 해당 함수는 `*.vue`파일의 컴포넌트를 매개변수로 사용하여 호출합니다.
+
+## 단일 문서 파일 예제
+
+다음은 모든 `<docs>` 사용자 정의 블록을 하나의 문서 파일로 추출하는 예 입니다.
+
+#### component.vue
+
+``` html
+<docs>
+## This is an Example component.
+</docs>
+
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            // 모든 <docs>의 내용을 원문 그대로 추출합니다
+            'docs': ExtractTextPlugin.extract('raw-loader'),
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    // 모든 docs를 하나의 파일로 추출합니다
+    new ExtractTextPlugin('docs.md')
+  ]
+}
+```
+
+## 런타임에서 사용할 수 있는 문서
+
+다음은 `<docs>` 사용자 정의 블록을 컴포넌트에 넣어 런타임에서 사용할 수 있는 예제입니다.
+
+#### docs-loader.js
+
+사용자 정의 블록 콘텐트를 삽입하려면 사용자 정의 로더가 필요합니다.
+
+``` js
+module.exports = function (source, map) {
+  this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
+    JSON.stringify(source) +
+    '}', map)
+}
+```
+
+#### webpack.config.js
+
+webpack이 `<docs>` 사용자 정의 블록을 위한 로더를 사용하도록 설정합니다.
+
+``` js
+const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            'docs': docsLoader
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+#### component.vue
+
+이제 `<docs>` 블록의 내용을 런타임 중에 컴포넌트에서 사용할 수 있습니다.
+
+``` html
+<template>
+  <div>
+    <component-b />
+    <p>{{ docs }}</p>
+  </div>
+</template>
+
+<script>
+import componentB from 'componentB';
+
+export default = {
+  data () {
+    return {
+      docs: componentB.__docs
+    }
+  },
+  components: {componentB}
+}
+</script>
+```

docs/kr/configurations/extract-css.md

@@ -1,62 +1,63 @@
 # CSS 단일 파일로 추출하기
 
-다음 예제 설정을 사용하여 모든 Vue 컴포넌트의 처리된 CSS를 단일 CSS 파일로 추출할 수 있습니다.
-
-### Webpack 1.x
-
 ``` bash
 npm install extract-text-webpack-plugin --save-dev
 ```
 
+## 쉬운 방법
+
+> vue-loader@^12.0.0와 webpack@^2.0.0 필요
+
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {
-  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  // other options...
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
-        loader: 'vue'
-      },
+        loader: 'vue-loader',
+        options: {
+          extractCSS: true
+        }
+      }
     ]
   },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract("css"),
-      // 당신은 <style lang="less"> 또는 다른 언어도 포함할 수 있습니다.
-      less: ExtractTextPlugin.extract("css!less")
-    }
-  },
   plugins: [
     new ExtractTextPlugin("style.css")
   ]
 }
 ```
 
-### Webpack 2.x (^2.1.0-beta.25)
+위 코드는 `*.vue` 파일 내부에서 `<style>`에 대한 추출을 자동으로 처리하며, 대부분의 프리프로세서와 함께 사용할 수 있습니다.
+
+ `*.vue`만 추출합니다. JavaScript에서 가져온 CSS는 별도로 설정해야합니다.
+
+## 수동 설정
+
+설정을 사용하여 모든 Vue 컴포넌트에서 처리된 CSS를 단일 CSS 파일로 추출하는 예제 입니다.
+
+### Webpack 2.x
 
-``` bash
-npm install extract-text-webpack-plugin --save-dev
-```
 
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {
-  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  // 기타 옵션...
   module: {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue',
+        loader: 'vue-loader',
         options: {
           loaders: {
             css: ExtractTextPlugin.extract({
               use: 'css-loader',
-              fallback: 'vue-style-loader' // <- 이것은 vue-loader의 의존성이므로, npm3를 사용하는 경우에는 명시적으로 설치할 필요가 없습니다.
+              fallback: 'vue-style-loader' // <- vue-loader의 의존성입니다. 그래서 npm3를 사용하면 명시적으로 설치할 필요는 없습니다.
             })
           }
         }
@@ -68,3 +69,36 @@ module.exports = {
   ]
 }
 ```
+
+### Webpack 1.x
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // 기타 옵션...
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+    ]
+  },
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract("css"),
+      // <style lang="less"> 또는 다른 언어를 포함할 수 있습니다.
+      less: ExtractTextPlugin.extract("css!less")
+    }
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```