vuejs · kazupon · Dec 21, 2016 · Dec 20, 2016
diff --git a/docs/ko/README.md b/docs/ko/README.md
@@ -2,17 +2,17 @@

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

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

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

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

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

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

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

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

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

-여기서 Webpack은 묶는일 외에도 더 많은 일을 할 수 있습니다. "로더들"을 사용하면 최종 Bundle(묶음)을 출력하기 전에 원하는 방식으로 모든 유형의 파일을 변환할 수 있도록 Webpack에 지시할 수 있습니다. 몇 가지 예를 봅시다.
+여기서 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을 사용할 때 가장 일반적인 문제에 대한 솔루션을 찾을 수 있습니다.
+Webpack은 매우 강력하며 작동 원리를 이해한다면 프론트엔드 작업환경을 획기적으로 향상시킬 수 있습니다. 구성하기에 장황하고 복잡한 것이 단점입니다. 하지만 이 가이드를 사용하면 Vue.js 및 `vue-loader`에서 Webpack을 사용할 때 가장 일반적인 문제에 대한 솔루션을 찾을 수 있습니다.
diff --git a/docs/ko/configurations/advanced.md b/docs/ko/configurations/advanced.md
@@ -1,6 +1,6 @@
 # 고급 로더 설정

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

 ### Webpack 1.x

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

-고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).
+고급 로더 설정을 보다 실용적으로 사용하면 [컴포넌트 내부의 CSS를 단일 파일로 추출할 수 있습니다](./extract-css.md).
diff --git a/docs/ko/configurations/asset-url.md b/docs/ko/configurations/asset-url.md
@@ -1,6 +1,6 @@
 # Asset URL 핸들링

-기본적으로, `vue-loader`는 [css-loader](https://github.com/webpack/css-loader)와 Vue 템플릿 컴파일러로 스타일과 템플릿을 자동으로 처리합니다. 이 컴파일 과정에서 `<img src="...">`, `background: url(...)`, CSS `@import`와 같은 모든 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')`로 변환되어,

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

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

-2. `url-loader`는 파일이 주어진 값보다 작은 경우 조건부로 파일을 base-64 데이터 URL로 인라인 할 수 있도록 합니다. 이렇게하면 사소한 파일들에 대한 HTTP 요청의 양을 줄일 수 있습니다. 파일이 주어진 값보다 크면 자동으로 `file-loader`로 돌아갑니다.
+2. `url-loader`는 파일이 주어진 값보다 작은 경우 조건부로 파일을 base-64 데이터 URL로 인라인 할 수 있도록 합니다. 이렇게하면 사소한 파일들에 대한 HTTP 요청의 양을 줄일 수 있습니다. 파일이 주어진 값보다 크면 자동으로 `file-loader`로 돌아갑니다.
diff --git a/docs/ko/configurations/pre-processors.md b/docs/ko/configurations/pre-processors.md
@@ -1,6 +1,6 @@
 # 전처리기 사용하기

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

 ### CSS

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

 ``` html
 <style lang="sass">
-  /* write sass here */
+  /* sass로 작성하세요 */
 </style>
 ```

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

-### Javascript
+### JavaScript

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

 ``` bash
 npm install coffee-loader --save-dev
 ```

 ``` html
 <script lang="coffee">
-  # Write coffeescript!
+  # coffeescript로 작성하세요!
 </script>
 ```

-### Templates
+### 템플릿

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

 ``` bash
 npm install pug --save-dev
@@ -47,16 +47,16 @@ div
 </template>
 ```

-> **중요:** 만약 당신이 `vue-loader@<8.2.0`을 사용한다면, 당신은 `template-html-loader`도 설치해야 합니다.
+> **중요:** 만약 `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를 사용하세요! */
+  /* sass로 작성하세요 */
 </style>
 ```

-그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**
+그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**
diff --git a/docs/ko/features/css-modules.md b/docs/ko/features/css-modules.md
@@ -1,12 +1,12 @@
-# CSS Modules
+# CSS 모듈

-> requires ^9.8.0
+> 9.8.0 이상 버전을 요구합니다

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

 ### 사용법

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

 ``` html
 <style module>
@@ -19,7 +19,7 @@
 </style>
 ```

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

 ``` html
 <template>
@@ -29,7 +29,7 @@
 </template>
 ```

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

 ``` html
 <template>
@@ -58,11 +58,11 @@ export default {
 </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)을 참고하세요.
+[전역 예외사항](https://github.com/css-modules/css-modules#exceptions)과 [구성](https://github.com/css-modules/css-modules#composition) 같은 자세한 정보는 [CSS 모듈 스펙](https://github.com/css-modules/css-modules)을 참고하세요.

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

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

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

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

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

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

diff --git a/docs/ko/features/es2015.md b/docs/ko/features/es2015.md
@@ -22,11 +22,11 @@ export default {
 </script>
 ```

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

 ### 템플릿의 ES2015

-`*.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-)과 같은 기능을 이용할 수 있습니다.
+`*.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-)과 같은 기능을 이용할 수 있습니다.

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

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

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

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

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

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

-`babel-loader`는 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)를 존중하므로 Babel 설정과 플로그인을 구성하는데 권장되는 방법입니다.
+`babel-loader`는 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)를 우선하므로 Babel 설정과 플러그인을 구성하는데 권장되는 방법입니다.
diff --git a/docs/ko/features/hot-reload.md b/docs/ko/features/hot-reload.md
@@ -1,7 +1,7 @@
-# Hot Reload
+# 핫 리로드

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

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

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