Translate code-splitting.md

content/docs/code-splitting.md

@@ -1,6 +1,6 @@
 ---
 id: code-splitting
-title: 코드스플리팅
+title: 코드 스플리팅
 permalink: docs/code-splitting.html
 ---
 
@@ -9,7 +9,7 @@ permalink: docs/code-splitting.html
 대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 "번들링" 합니다.
 번들링은 임포트 된(imported) 파일들을 하나의 파일로 병합하는 과정입니다. 이 번들 된 파일은 웹 페이지에 포함 시켜 한 번에 로드 할 수 있습니다.
 
-#### 예제 {#example}
+#### 예시 {#example}
 
 **App:**
 
@@ -39,29 +39,28 @@ console.log(add(16, 26)); // 42
 
 > 노트:
 >
-> 번들은 이것과 많이 다르게 보일 겁니다.
+> 실제 번들은 위 예시와는 많이 다르게 보일 겁니다.
 
-만약 [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), 혹은 비슷한 툴을 사용한다면, 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
+만약 [Create React App](https://github.com/facebookincubator/create-react-app)이나 [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
 
-이런 앱을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 예를 들어 Webpack  
-[Installation](https://webpack.js.org/guides/installation/) 와
-[Getting Started](https://webpack.js.org/guides/getting-started/) 문서를 참조하세요.
+이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 그런 경우, Webpack의 
+[설치하기](https://webpack.js.org/guides/installation/) 문서와
+[시작하기](https://webpack.js.org/guides/getting-started/) 문서를 참조해 주세요.
 
 ## 코드 스플리팅 {#code-splitting}
 
 번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드파티 라이브러리을 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다.
 
-큰 번들로 묶이기 전에 번들을 "code splitting" 하세요.
-
- [Code-Splitting](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 로드 하는 것으로  Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다.
+번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 "스플리팅" 하는 것입니다.
+[Code-Splitting](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 로드 하는 것으로  Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다.
 
 
 Code-splitting 은 여러분의 앱을 "lazy-load" 하게 도와주는데 이는 앱 사용자에게 획기적인 성능 향상을 하게 합니다.
 앱의 코드 양을 줄이지 않고도 사용자가 필요로 하지 않는 코드를 로드하지 않게 하며 앱이 초기화 로드에 필요한 비용을 줄여줍니다.
 
 ## `import()` {#import}
 
- 앱에 Code-splitting을 도입하는 가장 좋은 방법은 `import()` 문법을 동적으로 사용하는 것입니다.
+ 앱에 코드 스플리팅을 도입하는 가장 좋은 방법은 동적 `import()` 문법을  사용하는 방법입니다.
 
 **Before:**
 
@@ -81,9 +80,9 @@ import("./math").then(math => {
 
 > 노트:
 >
-> 동적 `import()` 는 ECMAScript (JavaScript) 문법 입니다.
-> [proposal](https://github.com/tc39/proposal-dynamic-import) 은 현재
-> 언어의 표준은 아닙니다. 이는 차후에 채택될 것으로 생각됩니다.
+> 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라
+> [프로포절](https://github.com/tc39/proposal-dynamic-import)입니다.
+> 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다.
 
 Webpack 구문을 통과하게 되면 앱은 자동으로 Code-splitting 하게 됩니다. 
 만약 크리에이트 리액트 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다.
@@ -92,7 +91,7 @@ Webpack 구문을 통과하게 되면 앱은 자동으로 Code-splitting 하게
 만약 스스로 Webpack을 구성하고자 한다면 Webpack의 
 [guide on code splitting](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [다음](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) 과 같습니다.
 
-[Babel](https://babeljs.io/)을 사용할 때는 바벨이 동적으로 import를 할 수 있지만 변환하지는 않도록 해야 합니다. 이를 위해서는 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요.
+[Babel](http://babeljs.io/)을 사용할 때는 바벨이 동적으로 import를 할 수 있지만 변환하지는 않도록 해야 합니다. 이를 위해서는 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요.
 
 ## `React.lazy` {#reactlazy}