Merge pull request #537 from kciter/master

Translate Korean

Author: kazupon

docs/LANGS.md

@@ -1 +1,2 @@
 * [English](en/)
+* [한국어](ko/)

docs/ko/README.md

@@ -0,0 +1,37 @@
+# 소개
+
+### `vue-loader`는 무엇인가요?
+
+`vue-loader`는 다음과 같은 형태로 작성된 Vue 컴포넌트를 일반적인 자바스크립트 모듈로 변환할 수 있는 Webpack 로더입니다.
+
+![screenshot](http://blog.evanyou.me/images/vue-component.png)
+
+다음은 `vue-loader`가 제공하는 여러가지 유용한 기능입니다.
+
+- 기본적으로 ES2015를 지원합니다.
+- Vue 컴포넌트 각 요소에 따라 서로 다른 Webpack 로더를 사용할 수 있습니다. 예를들면 `<style>`에 SASS, `<template>`에 Jade로 각각 설정 가능합니다.
+- `<style>`과 `<template>`에서 참조된 정적 Asset 파일을 모듈로 취급하고 Webpack 로더로 처리합니다.
+- 각 컴포넌트마다 지정된 CSS를 시뮬레이트 할 수 있습니다.
+- 개발 중에 컴포넌트 hot-reloading을 지원합니다.
+
+한 마디로 Webpack과 `vue-loader`의 결합은 Vue.js 어플리케이션을 제작하기위한 현대적이고 유연하며 매우 강력한 작업환경을 제공합니다.
+
+### Webpack이 무엇인가요?
+
+이미 Webpack에 익숙하다면 이 설명을 건너뛰어도 됩니다. 하지만 Webpack을 처음 사용하는 사람들에게는 다음과 같은 간단한 소개를 읽어보세요.
+
+[Webpack](http://webpack.github.io/)은 모듈의 묶음입니다. 각 파일을 모듈로 간주하고 파일 간의 종속성을 파악한 다음 정적 Asset으로 묶어서 배포합니다.
+
+![webpack](http://webpack.github.io/assets/what-is-webpack.png)
+
+간단한 예를 들어보자면, 우리가 많은 CommonJS 모듈을 가지고 있다고 가정해봅시다. 모듈들은 브라우저 내부에서 바로 실행될 수 없기에 `<script>` 태그를 통해 불러올 수 있도록 하나의 파일로 "묶어"야 합니다. Webpack은 `require()` 호출을 통해 의존되어 있는 각 파일을 하나로 묶을 수 있습니다.
+
+여기서 Webpack은 묶는일 외에도 더 많은 일을 할 수 있습니다. "로더들"을 사용하면 최종 Bundle(묶음)을 출력하기 전에 원하는 방식으로 모든 유형의 파일을 변환할 수 있도록 Webpack에 지시할 수 있습니다. 몇 가지 예를 봅시다.
+
+- ES2015 또는 CoffeeScript, TypeScript 모듈을 ES5 CommonJS 모듈로 변환할 수 있습니다.
+- 선택 사항으로 컴파일 전에 linter를 이용하여 소스 코드를 연결 할 수 있습니다.
+- Jade 템플릿을 일반 HTML로 변경하고 JavaScript 문자열로 반환합니다.
+- SASS 파일을 일반 CSS로 변환한 다음 CSS를 `<style>` 태그로 삽입하는 JavaScript 스니펫으로 변환합니다.
+- HTML 또는 CSS에서 참조된 이미지 파일을 처리하고 경로 구성에 따라 이동한 후 md5 해시를 사용하여 이름을 지정합니다.
+
+Webpack은 매우 강력하며 작동 원리를 이해한다면 프론트엔드 작업환경을 획기적으로 향상시킬 수 있습니다. 단점은 장황하고 복잡한 구성입니다. 하지만 이 가이드를 사용하면 Vue.js 및 `vue-loader`에서 Webpack을 사용할 때 가장 일반적인 문제에 대한 솔루션을 찾을 수 있습니다.

docs/ko/SUMMARY.md

@@ -0,0 +1,21 @@
+- [소개](README.md)
+- 시작하기
+  - [Vue 컴포넌트 스펙](start/spec.md)
+  - [프로젝트 세팅하기](start/setup.md)
+- 기능
+  - [ES2015](features/es2015.md)
+  - [범위 CSS](features/scoped-css.md)
+  - [CSS Modules](features/css-modules.md)
+  - [PostCSS](features/postcss.md)
+  - [Hot Reload](features/hot-reload.md)
+- 설정
+  - [전처리기](configurations/pre-processors.md)
+  - [Asset URL 핸들링](configurations/asset-url.md)
+  - [고급 로더 설정](configurations/advanced.md)
+  - [CSS 단일 파일로 추출하기](configurations/extract-css.md)
+- 개발 환경
+  - [배포용 빌드](workflow/production.md)
+  - [Linting](workflow/linting.md)
+  - [테스트](workflow/testing.md)
+  - [목업을 이용한 테스트](workflow/testing-with-mocks.md)
+- [옵션 레퍼런스](options.md)

docs/ko/configurations/advanced.md

@@ -0,0 +1,56 @@
+# 고급 로더 설정
+
+때로는 `vue-loader`가 그것을 추론하는 대신 언어에 커스텀 로더 스트링을 적용하기를 원할 수도 있습니다. 또는 디폴트 언어에서 기본적으로 제공되는 로더 설정을 덮어쓰고 싶을 수도 있습니다. 이를 위해서 Webpack 설정 파일에 `vue` 블럭을 추가하고 `loaders` 옵션을 지정하세요.
+
+### Webpack 1.x
+
+``` js
+// webpack.config.js
+module.exports = {
+  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      }
+    ]
+  },
+  // 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)
+
+``` js
+module.exports = {
+  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  module: {
+    // module.rules는 1.x의 module.loaders와 동일합니다.
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        // vue-loader 옵션은 이곳에 옵니다.
+        options: {
+          loaders: {
+            // ...
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).

docs/ko/configurations/asset-url.md

@@ -0,0 +1,23 @@
+# Asset URL 핸들링
+
+기본적으로, `vue-loader`는 [css-loader](https://github.com/webpack/css-loader)와 Vue 템플릿 컴파일러로 스타일과 템플릿을 자동으로 처리합니다. 이 컴파일 과정에서 `<img src="...">`, `background: url(...)`, CSS `@import`와 같은 모든 Asset URL은 **모듈 종속성**으로 해결됩니다.
+
+예를 들어, `url(./image.png)`는 `require('./image.png')`로 변환되어,
+
+``` html
+<img src="../image.png">
+```
+
+다음과 같이 컴파일 될 것입니다.
+
+``` js
+createElement('img', { attrs: { src: require('../image.png') }})
+```
+
+왜냐하면 `.png`는 Javscript 파일이 아니기 때문에 [file-loader](https://github.com/webpack/file-loader) 또는 [url-loader](https://github.com/webpack/url-loader)를 사용하여 Webpack을 처리하도록 Webpack을 구성해야 합니다. `vue-cli`로 스캐폴딩된 프로젝트도 이것을 구성했습니다.
+
+이것을 사용하는 이점은 다음과 같습니다.
+
+1. `file-loader`는 당신이 Asset 파일을 복사하여 붙여넣을 곳을 지정하고 더 나은 캐싱을 위해 버전 해시를 사용하여 이름을 지정하는 방법을 사용합니다. 더 나아가 **이것은 `*.vue` 파일 옆에 이미지를 놓고 배포 URL에 대해 걱정하지 않으면서 폴더 구조를 기반으로 상대 경로를 사용할 수 있습니다**. 올바른 설정을 사용하면 Webpack은 파일 경로를 번들 아웃풋을 올바른 URL로 자동으로 재작성합니다.
+
+2. `url-loader`는 파일이 주어진 값보다 작은 경우 조건부로 파일을 base-64 데이터 URL로 인라인 할 수 있도록 합니다. 이렇게하면 사소한 파일들에 대한 HTTP 요청의 양을 줄일 수 있습니다. 파일이 주어진 값보다 크면 자동으로 `file-loader`로 돌아갑니다.

docs/ko/configurations/extract-css.md

@@ -0,0 +1,70 @@
+# CSS 단일 파일로 추출하기
+
+다음 예제 설정을 사용하여 모든 Vue 컴포넌트의 처리된 CSS를 단일 CSS 파일로 추출할 수 있습니다.
+
+### 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")
+  ]
+}
+```
+
+### Webpack 2.x (^2.1.0-beta.25)
+
+``` bash
+npm install [email protected] --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // 이 부분엔 다른 옵션도 들어 갈 수 있습니다.
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              loader: 'css-loader',
+              fallbackLoader: 'vue-style-loader' // <- 이것은 vue-loader가 필요 없으므로 npm3를 사용하는 경우 명시적으로 설치할 필요가 없습니다.
+            })
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```

docs/ko/configurations/pre-processors.md

@@ -0,0 +1,62 @@
+# 전처리기 사용하기
+
+Webpack에서는 모든 전처리기가 해당 로더와 함께 적용되어야 합니다. `vue-loader`는 다른 Webpack 로더를 사용하여 Vue 컴포넌트의 일부를 처리 할 수 있게합니다. language block의 `lang` 속성에서 사용할 적절한 로더를 자동으로 유추합니다.
+
+### CSS
+
+예를 들어, SASS로 `<style>`을 컴파일해봅시다.
+
+``` bash
+npm install sass-loader node-sass --save-dev
+```
+
+``` html
+<style lang="sass">
+  /* write sass here */
+</style>
+```
+
+내부적으로, `<style>` 태그 안의 텍스트 내용은 후처리를 위해서 전달되기 전에 `sass-loader`에 의해 먼저 컴파일됩니다.
+
+### Javascript
+
+Vue 컴포넌트 내의 모든 Javascript는 기본적으로 `babel-loader`에 의해서 처리됩니다. 물론 당신은 그것을 변경할 수 있습니다.
+
+``` bash
+npm install coffee-loader --save-dev
+```
+
+``` html
+<script lang="coffee">
+  # Write coffeescript!
+</script>
+```
+
+### Templates
+
+`pug-loader`와 같은 대부분의 Webpack 템플릿 로더는 컴파일된 HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리 앞서 처리한 방법과는 약간 다릅니다. `pug-loader` 대신 원래의 `pug` 파일을 설치하여 사용할 수 있습니다.
+
+``` bash
+npm install pug --save-dev
+```
+
+``` html
+<template lang="pug">
+div
+  h1 Hello world!
+</template>
+```
+
+> **중요:** 만약 당신이 `vue-loader@<8.2.0`을 사용한다면, 당신은 `template-html-loader`도 설치해야 합니다.
+
+### 인라인 로더 요청
+
+당신은 `lang` 속성에서 [Webpack 로더 요청](https://webpack.github.io/docs/loaders.html#introduction)을 할 수 있습니다.
+
+``` html
+<style lang="sass?outputStyle=expanded">
+  /* 여기에 SASS를 사용하세요! */
+</style>
+```
+
+그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**

docs/ko/features/css-modules.md

@@ -0,0 +1,117 @@
+# CSS Modules
+
+> requires ^9.8.0
+
+[CSS Modules](https://github.com/css-modules/css-modules)은 CSS을 모듈화하고 구성하는데 널리 사용되는 시스템입니다. `vue-loader`는 스뮬레이트된 범위 CSS의 대안으로 CSS Modules와 함께 first-class intergration을 제공합니다.
+
+### 사용법
+
+`<style>`에 `moudle` 속성을 삽입하니다.
+
+``` html
+<style module>
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
+}
+</style>
+```
+
+이렇게하면 `css-loader`에 대한 CSS Modules 모드가 켜지고 결과적으로 클래스 식별자 오브젝트는 `$style` 이름의 계산된 속성으로 컴포넌트에 주입됩니다. 당신은 동적 클래스 바인딩을 사용하여 템플릿에서 이를 사용할 수 있습니다.
+
+``` html
+<template>
+  <p :class="$style.red">
+    이것은 빨간색이야
+  </p>
+</template>
+```
+
+그것은 계산된 속성이기 때문에 `:class`의 오브젝트/배열 문법에도 작동합니다.
+
+``` html
+<template>
+  <div>
+    <p :class="{ [$style.red]: isRed }">
+      나는 빨간색이야?
+    </p>
+    <p :class="[$style.red, $style.bold]">
+      나는 빨간색이면서 볼드야
+    </p>
+  </div>
+</template>
+```
+
+또한 JavaScript에서도 접근할 수 있습니다.
+
+``` html
+<script>
+export default {
+  created () {
+    console.log(this.$style.red)
+    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
+    // 파일 이름과 className을 기반으로 생성된 식별자
+  }
+}
+</script>
+```
+
+[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)을 참고하세요.
+
+### 속성 이름 커스터마이징
+
+하나의 `*.vue` 컴포넌트 내에 하나 이상의 `<style>` 태그를 가질 수 있습니다. 삽입된 스타일이 서로 덮어 쓰지 않게하려면 `module` 속성에 값을 지정하여 계산된 속성의 이름을 커스터마이징할 수 있습니다.
+
+``` html
+<style module="a">
+  /* a로 주입된 식별자 */
+</style>
+
+<style module="b">
+  /* b로 주입된 식별자 */
+</style>
+```
+
+### `css-loader` 쿼리 설정
+
+CSS Modules는 [css-loader](https://github.com/webpack/css-loader)를 통해 처리됩니다. `<style module>`을 사용하면 `css-loader`에 사용되는 기본적인 쿼리는 다음과 같습니다.
+
+``` js
+{
+  modules: true,
+  importLoaders: true,
+  localIdentName: '[hash:base64]'
+}
+```
+
+당신은 vue-loader의 `cssModules` 옵션을 사용하여 `css-loader`에 추가적인 쿼리 옵션을 제공할 수 있습니다.
+
+``` js
+// webpack 1
+vue: {
+  cssModules: {
+    // 로컬 ID값을 덮어씌웁니다.
+    localIdentName: '[path][name]---[local]---[hash:base64:5]',
+    // enable camelCase
+    camelCase: true
+  }
+}
+
+// webpack 2
+module: {
+  rules: [
+    {
+      test: '\.vue$',
+      loader: 'vue',
+      options: {
+        cssModules: {
+          localIdentName: '[path][name]---[local]---[hash:base64:5]',
+          camelCase: true
+        }
+      }
+    }
+  ]
+}
+```