From 3e5d87deac7cd4f6d09d5cc70ce0205692c2d569 Mon Sep 17 00:00:00 2001 From: seunghoon-shin Date: Fri, 1 Mar 2019 01:00:24 +0900 Subject: [PATCH 01/10] Translate code-splitting.md to Kor. --- content/docs/code-splitting.md | 119 ++++++++++++++------------------- 1 file changed, 51 insertions(+), 68 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5b8d40063..40d745e81 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,18 +1,15 @@ --- id: code-splitting -title: Code-Splitting +title: 코드스플리팅 permalink: docs/code-splitting.html --- -## Bundling {#bundling} +## 번들링 {#bundling} -Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). -Bundling is the process of following imported files and merging them into a -single file: a "bundle". This bundle can then be included on a webpage to load -an entire app at once. +대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 "번들링" 합니다. +번들링은 임포트 된(imported) 파일들을 하나의 파일로 병합하는 과정입니다. 이 번들 된 파일은 웹 페이지에 포함 시켜 한 번에 로드 할 수 있습니다. -#### Example {#example} +#### 예제 {#example} **App:** @@ -40,42 +37,31 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> Note: +> 노트: > -> Your bundles will end up looking a lot different than this. +> 번들은 이것과 많이 다르게 보일 겁니다. -If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your -app. +만약 [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), 혹은 비슷한 툴을 사용한다면, 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다. -If you aren't, you'll need to setup bundling yourself. For example, see the -[Installation](https://webpack.js.org/guides/installation/) and -[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the -Webpack docs. +이런 앱을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 예를 들어 Webpack +[Installation](https://webpack.js.org/guides/installation/) 와 +[Getting Started](https://webpack.js.org/guides/getting-started/) 문서를 참조하세요. -## Code Splitting {#code-splitting} +## 코드 스플리팅 {#code-splitting} -Bundling is great, but as your app grows, your bundle will grow too. Especially -if you are including large third-party libraries. You need to keep an eye on -the code you are including in your bundle so that you don't accidentally make -it so large that your app takes a long time to load. +번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드파티 라이브러리을 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다. -To avoid winding up with a large bundle, it's good to get ahead of the problem -and start "splitting" your bundle. - [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature -supported by bundlers like Webpack and Browserify (via -[factor-bundle](https://github.com/browserify/factor-bundle)) which can create -multiple bundles that can be dynamically loaded at runtime. +큰 번들로 묶이기 전에 번들을 "code splitting" 하세요. -Code-splitting your app can help you "lazy-load" just the things that are -currently needed by the user, which can dramatically improve the performance of -your app. While you haven't reduced the overall amount of code in your app, -you've avoided loading code that the user may never need, and reduced the amount -of code needed during the initial load. + [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} -The best way to introduce code-splitting into your app is through the dynamic -`import()` syntax. + 앱에 Code-splitting을 도입하는 가장 좋은 방법은 `import()` 문법을 동적으로 사용하는 것입니다. **Before:** @@ -93,31 +79,28 @@ import("./math").then(math => { }); ``` -> Note: +> 노트: > -> The dynamic `import()` syntax is a ECMAScript (JavaScript) -> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently -> part of the language standard. It is expected to be accepted in the -> near future. +> 동적 `import()` 는 ECMAScript (JavaScript) 문법 입니다. +> [proposal](https://github.com/tc39/proposal-dynamic-import) 은 현재 +> 언어의 표준은 아닙니다. 이는 차후에 채택될 것으로 생각됩니다. -When Webpack comes across this syntax, it automatically starts code-splitting -your app. If you're using Create React App, this is already configured for you -and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported -out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Webpack 구문을 통과하게 되면 앱은 자동으로 Code-splitting 하게 됩니다. +만약 크리에이트 리액트 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. +[Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. -If you're setting up Webpack yourself, you'll probably want to read Webpack's -[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +만약 스스로 Webpack을 구성하고자 한다면 Webpack의 +[guide on code splitting](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [다음](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) 과 같습니다. -When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can -parse the dynamic import syntax but is not transforming it. For that you will need [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} -> Note: +> 노트: > -> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). +> `React.lazy` 와 Suspense 는 아직 server-side rendering 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 Code-splitting 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 bundle splitting 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. -The `React.lazy` function lets you render a dynamic import as a regular component. +`React.lazy` 함수를 사용하면 dynamic import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. **Before:** @@ -146,14 +129,16 @@ function MyComponent() { ); } ``` +이 구성요소(MyComponent) 가 렌더링될 때 `OtherComponent` 를 포함한 번들을 자동으로 로드합니다. -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. - -`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. +`React.lazy`는 동적 import()를 호출하는 함수 형태로 사용됩니다. 이 경우 React 컴포넌트를 +export `default`로 해석되는 Promise로 리턴해야 합니다. ### Suspense {#suspense} -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. + +`OtherComponent`를 포함하는 모듈이 `MyComponent`를 렌더링하기 전까지 로드가 완료되지 않은 경우 로드 상태 표시처럼 로드가 다 되기를 기다리는 동안 fallback content의 일부를 보여 주어야 할 것입니다. +이것을 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -169,7 +154,8 @@ function MyComponent() { } ``` -The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component. +`fallback` 기능은 컴포넌트가 로드가 다 될 때까지 기다리는 동안 랜더링하려는 모든 React 요소에 적용 가능합니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. + ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -190,8 +176,8 @@ function MyComponent() { ``` ### Error boundaries {#error-boundaries} - -If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error. +만약 다른 모듈이 로드에 실패한 경우 (예를 들어 네트워크 장애로 인한 실패) 에러를 발생시킬 수 있습니다. 여러분은 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 핸들링할 수 있습니다. +Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다. ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -214,17 +200,14 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -Deciding where in your app to introduce code splitting can be a bit tricky. You -want to make sure you choose places that will split bundles evenly, but won't -disrupt the user experience. - -A good place to start is with routes. Most people on the web are used to -page transitions taking some amount of time to load. You also tend to be -re-rendering the entire page at once so your users are unlikely to be -interacting with other elements on the page at the same time. +앱에서 코드 스플리팅을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +여러분은 번들을 균등하게 분배할 곳을 찾고 사용자의 경험을 헤치지 않기를 원합니다. +이를 시작하기 좋은 장소는 routes입니다. +대부분 웹을 사용하는 사람들은 웹 페이지가 전환에 발생하는 로드 시간을 소모 하고 있습니다. +또한 앱 사용자들도 페이지 전체를 한 번에 다시 렌더링하는 경향이 있습니다. -Here's an example of how to setup route-based code splitting into your app using -libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`. +이번 예제에서는 [React Router](https://reacttraining.com/react-router/) 같은 라이브러리를 +사용하는 앱에서 `React.lazy` 를 적용하는 예제입니다. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -247,7 +230,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components. +`React.lazy` 는 현재 default exports만 지원 합니다. 만약 여러분이 named exports를 사용하려 한다면, default로 이름을 재정의하는 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From c1cbc9c8076a0acd07c0a27803ded718592329b7 Mon Sep 17 00:00:00 2001 From: Seunghoon Shin Date: Sat, 2 Mar 2019 22:39:20 +0900 Subject: [PATCH 02/10] Apply review feedback --- content/docs/code-splitting.md | 118 ++++++++++++++------------------- 1 file changed, 50 insertions(+), 68 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5b8d40063..d8d00e5a6 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,18 +1,15 @@ --- id: code-splitting -title: Code-Splitting +title: 코드 스플리팅 permalink: docs/code-splitting.html --- -## Bundling {#bundling} +## 번들링 {#bundling} -Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). -Bundling is the process of following imported files and merging them into a -single file: a "bundle". This bundle can then be included on a webpage to load -an entire app at once. +대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 "번들링" 합니다. +번들링은 임포트 된(imported) 파일들을 하나의 파일로 병합하는 과정입니다. 이 번들 된 파일은 웹 페이지에 포함 시켜 한 번에 로드 할 수 있습니다. -#### Example {#example} +#### 예시 {#example} **App:** @@ -40,42 +37,30 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> Note: +> 노트: > -> Your bundles will end up looking a lot different than this. +> 실제 번들은 위 예시와는 많이 다르게 보일 겁니다. -If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your -app. +만약 [Create React App](https://github.com/facebookincubator/create-react-app)이나 [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다. -If you aren't, you'll need to setup bundling yourself. For example, see the -[Installation](https://webpack.js.org/guides/installation/) and -[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the -Webpack docs. +이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 그런 경우, Webpack의 +[설치하기](https://webpack.js.org/guides/installation/) 문서와 +[시작하기](https://webpack.js.org/guides/getting-started/) 문서를 참조해 주세요. -## Code Splitting {#code-splitting} +## 코드 스플리팅 {#code-splitting} -Bundling is great, but as your app grows, your bundle will grow too. Especially -if you are including large third-party libraries. You need to keep an eye on -the code you are including in your bundle so that you don't accidentally make -it so large that your app takes a long time to load. +번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드파티 라이브러리을 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다. -To avoid winding up with a large bundle, it's good to get ahead of the problem -and start "splitting" your bundle. - [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature -supported by bundlers like Webpack and Browserify (via -[factor-bundle](https://github.com/browserify/factor-bundle)) which can create -multiple bundles that can be dynamically loaded at runtime. +번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 "스플리팅" 하는 것입니다. +[Code-Splitting](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 로드 하는 것으로 Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다. -Code-splitting your app can help you "lazy-load" just the things that are -currently needed by the user, which can dramatically improve the performance of -your app. While you haven't reduced the overall amount of code in your app, -you've avoided loading code that the user may never need, and reduced the amount -of code needed during the initial load. + +Code-splitting 은 여러분의 앱을 "lazy-load" 하게 도와주는데 이는 앱 사용자에게 획기적인 성능 향상을 하게 합니다. +앱의 코드 양을 줄이지 않고도 사용자가 필요로 하지 않는 코드를 로드하지 않게 하며 앱이 초기화 로드에 필요한 비용을 줄여줍니다. ## `import()` {#import} -The best way to introduce code-splitting into your app is through the dynamic -`import()` syntax. + 앱에 코드 스플리팅을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다. **Before:** @@ -93,31 +78,28 @@ import("./math").then(math => { }); ``` -> Note: +> 노트: > -> The dynamic `import()` syntax is a ECMAScript (JavaScript) -> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently -> part of the language standard. It is expected to be accepted in the -> near future. +> 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라 +> [프로포절](https://github.com/tc39/proposal-dynamic-import)입니다. +> 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. -When Webpack comes across this syntax, it automatically starts code-splitting -your app. If you're using Create React App, this is already configured for you -and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported -out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Webpack 구문을 통과하게 되면 앱은 자동으로 Code-splitting 하게 됩니다. +만약 크리에이트 리액트 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. +[Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. -If you're setting up Webpack yourself, you'll probably want to read Webpack's -[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +만약 스스로 Webpack을 구성하고자 한다면 Webpack의 +[guide on code splitting](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [다음](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) 과 같습니다. -When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can -parse the dynamic import syntax but is not transforming it. For that you will need [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} -> Note: +> 노트: > -> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). +> `React.lazy` 와 Suspense 는 아직 server-side rendering 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 Code-splitting 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 bundle splitting 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. -The `React.lazy` function lets you render a dynamic import as a regular component. +`React.lazy` 함수를 사용하면 dynamic import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. **Before:** @@ -146,14 +128,16 @@ function MyComponent() { ); } ``` +이 구성요소(MyComponent) 가 렌더링될 때 `OtherComponent` 를 포함한 번들을 자동으로 로드합니다. -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. - -`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. +`React.lazy`는 동적 import()를 호출하는 함수 형태로 사용됩니다. 이 경우 React 컴포넌트를 +export `default`로 해석되는 Promise로 리턴해야 합니다. ### Suspense {#suspense} -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. + +`OtherComponent`를 포함하는 모듈이 `MyComponent`를 렌더링하기 전까지 로드가 완료되지 않은 경우 로드 상태 표시처럼 로드가 다 되기를 기다리는 동안 fallback content의 일부를 보여 주어야 할 것입니다. +이것을 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -169,7 +153,8 @@ function MyComponent() { } ``` -The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component. +`fallback` 기능은 컴포넌트가 로드가 다 될 때까지 기다리는 동안 랜더링하려는 모든 React 요소에 적용 가능합니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. + ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -190,8 +175,8 @@ function MyComponent() { ``` ### Error boundaries {#error-boundaries} - -If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error. +만약 다른 모듈이 로드에 실패한 경우 (예를 들어 네트워크 장애로 인한 실패) 에러를 발생시킬 수 있습니다. 여러분은 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 핸들링할 수 있습니다. +Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다. ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -214,17 +199,14 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -Deciding where in your app to introduce code splitting can be a bit tricky. You -want to make sure you choose places that will split bundles evenly, but won't -disrupt the user experience. - -A good place to start is with routes. Most people on the web are used to -page transitions taking some amount of time to load. You also tend to be -re-rendering the entire page at once so your users are unlikely to be -interacting with other elements on the page at the same time. +앱에서 코드 스플리팅을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +여러분은 번들을 균등하게 분배할 곳을 찾고 사용자의 경험을 헤치지 않기를 원합니다. +이를 시작하기 좋은 장소는 routes입니다. +대부분 웹을 사용하는 사람들은 웹 페이지가 전환에 발생하는 로드 시간을 소모 하고 있습니다. +또한 앱 사용자들도 페이지 전체를 한 번에 다시 렌더링하는 경향이 있습니다. -Here's an example of how to setup route-based code splitting into your app using -libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`. +이번 예제에서는 [React Router](https://reacttraining.com/react-router/) 같은 라이브러리를 +사용하는 앱에서 `React.lazy` 를 적용하는 예제입니다. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -247,7 +229,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components. +`React.lazy` 는 현재 default exports만 지원 합니다. 만약 여러분이 named exports를 사용하려 한다면, default로 이름을 재정의하는 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From 491882ef7c00e1a72a92e5853c0bbbc60188c2b4 Mon Sep 17 00:00:00 2001 From: Seunghoon Shin Date: Sun, 3 Mar 2019 17:35:53 +0900 Subject: [PATCH 03/10] Apply feedback, Fix unnatural translation. --- content/docs/code-splitting.md | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index d8d00e5a6..47d9c0b01 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -6,8 +6,7 @@ permalink: docs/code-splitting.html ## 번들링 {#bundling} -대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 "번들링" 합니다. -번들링은 임포트 된(imported) 파일들을 하나의 파일로 병합하는 과정입니다. 이 번들 된 파일은 웹 페이지에 포함 시켜 한 번에 로드 할 수 있습니다. +대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. #### 예시 {#example} @@ -37,7 +36,7 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> 노트: +> 주의: > > 실제 번들은 위 예시와는 많이 다르게 보일 겁니다. @@ -78,26 +77,26 @@ import("./math").then(math => { }); ``` -> 노트: +> 주의: > > 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라 > [프로포절](https://github.com/tc39/proposal-dynamic-import)입니다. > 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. -Webpack 구문을 통과하게 되면 앱은 자동으로 Code-splitting 하게 됩니다. +Webpack이 이 구문을 만나게 되면 앱은 자동으로 코드 스플리팅 하게 됩니다. 만약 크리에이트 리액트 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. [Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. 만약 스스로 Webpack을 구성하고자 한다면 Webpack의 -[guide on code splitting](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [다음](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) 과 같습니다. +[코드 스플리팅 가이드](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. -[Babel](http://babeljs.io/)을 사용할 때는 바벨이 동적으로 import를 할 수 있지만 변환하지는 않도록 해야 합니다. 이를 위해서는 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. +[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. ## `React.lazy` {#reactlazy} -> 노트: +> 주의: > -> `React.lazy` 와 Suspense 는 아직 server-side rendering 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 Code-splitting 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 bundle splitting 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. +> `React.lazy` 와 Suspense 는 아직 서버 사이드 렌더링 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 코드 스플리팅 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 번들 스플리팅 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. `React.lazy` 함수를 사용하면 dynamic import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. @@ -136,8 +135,7 @@ export `default`로 해석되는 Promise로 리턴해야 합니다. ### Suspense {#suspense} -`OtherComponent`를 포함하는 모듈이 `MyComponent`를 렌더링하기 전까지 로드가 완료되지 않은 경우 로드 상태 표시처럼 로드가 다 되기를 기다리는 동안 fallback content의 일부를 보여 주어야 할 것입니다. -이것을 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. +`OtherComponent`를 포함하는 모듈이 `MyComponent`를 렌더링하기 전까지 로드가 완료되지 않은 경우 로드 상태 표시처럼 로드가 다 되기를 기다리는 동안 fallback content의 일부를 보여 주어야 하며 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -153,7 +151,7 @@ function MyComponent() { } ``` -`fallback` 기능은 컴포넌트가 로드가 다 될 때까지 기다리는 동안 랜더링하려는 모든 React 요소에 적용 가능합니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. +`fallback` 기능은 컴포넌트가 로드가 될 때까지 기다리는 동안 렌더링하려는 모든 React 요소에 적용 가능합니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. ```js @@ -175,7 +173,7 @@ function MyComponent() { ``` ### Error boundaries {#error-boundaries} -만약 다른 모듈이 로드에 실패한 경우 (예를 들어 네트워크 장애로 인한 실패) 에러를 발생시킬 수 있습니다. 여러분은 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 핸들링할 수 있습니다. +네트워크 장애 같은 이유로 다른 모듈이 로드에 실패한 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 핸들링할 수 있습니다. Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다. ```js @@ -201,9 +199,9 @@ const MyComponent = () => ( 앱에서 코드 스플리팅을 도입할 위치를 결정하는 것은 조금 까다롭습니다. 여러분은 번들을 균등하게 분배할 곳을 찾고 사용자의 경험을 헤치지 않기를 원합니다. -이를 시작하기 좋은 장소는 routes입니다. -대부분 웹을 사용하는 사람들은 웹 페이지가 전환에 발생하는 로드 시간을 소모 하고 있습니다. -또한 앱 사용자들도 페이지 전체를 한 번에 다시 렌더링하는 경향이 있습니다. + +이를 시작하기 좋은 장소는 routes입니다. 웹 페이지 로드 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 +사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. 이번 예제에서는 [React Router](https://reacttraining.com/react-router/) 같은 라이브러리를 사용하는 앱에서 `React.lazy` 를 적용하는 예제입니다. @@ -229,7 +227,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` 는 현재 default exports만 지원 합니다. 만약 여러분이 named exports를 사용하려 한다면, default로 이름을 재정의하는 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. +`React.lazy` 는 현재 default exports만 지원 합니다. 만약 named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From d841c750149886de5b76b4ae6128df2d2050f262 Mon Sep 17 00:00:00 2001 From: shinseunghoon Date: Mon, 4 Mar 2019 22:04:54 +0900 Subject: [PATCH 04/10] Apply feedback. --- content/docs/code-splitting.md | 45 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 47d9c0b01..00806e1e0 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,16 +1,16 @@ --- id: code-splitting -title: 코드 스플리팅 +title: Code Splitting permalink: docs/code-splitting.html --- ## 번들링 {#bundling} -대부분 리액트 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. +대부분 React 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. #### 예시 {#example} -**App:** +**App** ```js // app.js @@ -26,7 +26,7 @@ export function add(a, b) { } ``` -**Bundle:** +**Bundle** ```js function add(a, b) { @@ -36,17 +36,17 @@ function add(a, b) { 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의 [설치하기](https://webpack.js.org/guides/installation/) 문서와 [시작하기](https://webpack.js.org/guides/getting-started/) 문서를 참조해 주세요. -## 코드 스플리팅 {#code-splitting} +## Code Splitting {#code-splitting} 번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드파티 라이브러리을 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다. @@ -59,9 +59,9 @@ Code-splitting 은 여러분의 앱을 "lazy-load" 하게 도와주는데 이는 ## `import()` {#import} - 앱에 코드 스플리팅을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다. + 앱에 Code Splitting을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다. -**Before:** +**Before** ```js import { add } from './math'; @@ -69,7 +69,7 @@ import { add } from './math'; console.log(add(16, 26)); ``` -**After:** +**After** ```js import("./math").then(math => { @@ -77,30 +77,30 @@ import("./math").then(math => { }); ``` -> 주의: +> 주의 > > 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라 > [프로포절](https://github.com/tc39/proposal-dynamic-import)입니다. > 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. -Webpack이 이 구문을 만나게 되면 앱은 자동으로 코드 스플리팅 하게 됩니다. +Webpack이 이 구문을 만나게 되면 앱은 자동으로 Code Splitting 하게 됩니다. 만약 크리에이트 리액트 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. [Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. 만약 스스로 Webpack을 구성하고자 한다면 Webpack의 -[코드 스플리팅 가이드](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. +[Code Splitting 가이드](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. [Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. ## `React.lazy` {#reactlazy} -> 주의: +> 주의 > -> `React.lazy` 와 Suspense 는 아직 서버 사이드 렌더링 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 코드 스플리팅 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 번들 스플리팅 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. +> `React.lazy` 와 Suspense 는 아직 서버 사이드 렌더링 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 Code Splitting 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 번들 스플리팅 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. `React.lazy` 함수를 사용하면 dynamic import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. -**Before:** +**Before** ```js import OtherComponent from './OtherComponent'; @@ -114,7 +114,7 @@ function MyComponent() { } ``` -**After:** +**After** ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -173,7 +173,7 @@ function MyComponent() { ``` ### Error boundaries {#error-boundaries} -네트워크 장애 같은 이유로 다른 모듈이 로드에 실패한 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 핸들링할 수 있습니다. +네트워크 장애 같은 이유로 다른 모듈이 로드에 실패한 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 처리할 수 있습니다. Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다. ```js @@ -197,14 +197,13 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에서 코드 스플리팅을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +앱에서 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. 여러분은 번들을 균등하게 분배할 곳을 찾고 사용자의 경험을 헤치지 않기를 원합니다. -이를 시작하기 좋은 장소는 routes입니다. 웹 페이지 로드 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 +이를 시작하기 좋은 장소는 경로 입니다. 웹 페이지 로드 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. -이번 예제에서는 [React Router](https://reacttraining.com/react-router/) 같은 라이브러리를 -사용하는 앱에서 `React.lazy` 를 적용하는 예제입니다. +`React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 경로 기반 Code Splitting을 설정하는 예시입니다. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -227,7 +226,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` 는 현재 default exports만 지원 합니다. 만약 named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. +`React.lazy` 는 현재 default exports만 지원 합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From e82f6da7e88e398c5c39344d8aae129fe7b6f268 Mon Sep 17 00:00:00 2001 From: shinseunghoon Date: Mon, 4 Mar 2019 23:34:16 +0900 Subject: [PATCH 05/10] Apply hide feedback. --- content/docs/code-splitting.md | 45 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 00806e1e0..b86c36684 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -42,20 +42,20 @@ 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을 같이 설치했을 겁니다. -이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 그런 경우, Webpack의 +이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 이 경우 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" 하게 도와주는데 이는 앱 사용자에게 획기적인 성능 향상을 하게 합니다. -앱의 코드 양을 줄이지 않고도 사용자가 필요로 하지 않는 코드를 로드하지 않게 하며 앱이 초기화 로드에 필요한 비용을 줄여줍니다. +Code-splitting 은 여러분의 앱을 "지연 로딩" 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. +앱의 코드 양을 줄이지 않고도 사용자가 필요 하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. ## `import()` {#import} @@ -80,25 +80,25 @@ import("./math").then(math => { > 주의 > > 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라 -> [프로포절](https://github.com/tc39/proposal-dynamic-import)입니다. +> [제안](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) 할 수 있습니다. +Create React App 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. [Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. -만약 스스로 Webpack을 구성하고자 한다면 Webpack의 -[Code Splitting 가이드](https://webpack.js.org/guides/code-splitting/)를 참조 하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. +스스로 Webpack을 구성하고자 한다면 Webpack의 +[Code Splitting 가이드](https://webpack.js.org/guides/code-splitting/)를 참조하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. -[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. +[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 인식할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. ## `React.lazy` {#reactlazy} > 주의 > -> `React.lazy` 와 Suspense 는 아직 서버 사이드 렌더링 을 사용 할 수 없습니다. 만약 server rendered 된 앱에서 Code Splitting 을 사용하고자 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components) 를 추천 합니다. 이것은 [server-side rendering 와 번들 스플리팅 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. +> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 Code Splitting을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천 합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. -`React.lazy` 함수를 사용하면 dynamic import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. +`React.lazy` 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. **Before** @@ -127,15 +127,14 @@ function MyComponent() { ); } ``` -이 구성요소(MyComponent) 가 렌더링될 때 `OtherComponent` 를 포함한 번들을 자동으로 로드합니다. +`MyComponent`가 렌더링 될 때 `OtherComponent`를 포함한 번들을 자동으로 불러옵니다. -`React.lazy`는 동적 import()를 호출하는 함수 형태로 사용됩니다. 이 경우 React 컴포넌트를 -export `default`로 해석되는 Promise로 리턴해야 합니다. +`React.lazy`는 동적 `import()`를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를 +포함하며 `default` export를 가진 모듈로 결정되는 `Promise`로 반환해야 합니다. ### Suspense {#suspense} - -`OtherComponent`를 포함하는 모듈이 `MyComponent`를 렌더링하기 전까지 로드가 완료되지 않은 경우 로드 상태 표시처럼 로드가 다 되기를 기다리는 동안 fallback content의 일부를 보여 주어야 하며 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. +`MyComponent`를 렌더링할 때 `OtherComponent`를 포함하는 모듈이 아직 로드되지 않았다면, 로드를 기다리는 동안 로딩처럼 예비 컨텐츠를 보여줘야 합니다. 이는 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -151,7 +150,7 @@ function MyComponent() { } ``` -`fallback` 기능은 컴포넌트가 로드가 될 때까지 기다리는 동안 렌더링하려는 모든 React 요소에 적용 가능합니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. +`fallback` prop은 컴포넌트가 로드가 될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. ```js @@ -173,7 +172,7 @@ function MyComponent() { ``` ### Error boundaries {#error-boundaries} -네트워크 장애 같은 이유로 다른 모듈이 로드에 실패한 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 처리할 수 있습니다. +네트워크 장애 같은 이유로 다른 모듈을 로드에 실패할 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 처리할 수 있습니다. Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다. ```js @@ -197,10 +196,10 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에서 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. -여러분은 번들을 균등하게 분배할 곳을 찾고 사용자의 경험을 헤치지 않기를 원합니다. +앱에 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. -이를 시작하기 좋은 장소는 경로 입니다. 웹 페이지 로드 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 +이를 시작하기 좋은 장소는 경로 입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. `React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 경로 기반 Code Splitting을 설정하는 예시입니다. From ccc830de8bd27c924c56795ded50e7aa1c8160e3 Mon Sep 17 00:00:00 2001 From: shinseunghoon Date: Wed, 6 Mar 2019 00:13:36 +0900 Subject: [PATCH 06/10] Fix router translation. --- content/docs/code-splitting.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index b86c36684..7cb37f5d5 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -84,8 +84,8 @@ import("./math").then(math => { > 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. Webpack이 이 구문을 만나게 되면 앱은 자동으로 Code Splitting 하게 됩니다. -Create React App 앱을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. -[Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원 합니다. +Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. +[Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원합니다. 스스로 Webpack을 구성하고자 한다면 Webpack의 [Code Splitting 가이드](https://webpack.js.org/guides/code-splitting/)를 참조하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. @@ -96,7 +96,7 @@ Create React App 앱을 사용하고 있다면 이미 Webpack이 구성이 되 > 주의 > -> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 Code Splitting을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천 합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. +> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 Code Splitting을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. `React.lazy` 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. @@ -196,7 +196,7 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +앱에 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. 이를 시작하기 좋은 장소는 경로 입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 @@ -225,7 +225,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` 는 현재 default exports만 지원 합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. +`React.lazy` 는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From 00bae2c743f2b5868195c11c4d7f994402345de2 Mon Sep 17 00:00:00 2001 From: shinseunghoon Date: Wed, 6 Mar 2019 21:44:29 +0900 Subject: [PATCH 07/10] Apply spacing words feedback. --- content/docs/code-splitting.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 7cb37f5d5..aca10eae9 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,6 +1,6 @@ --- id: code-splitting -title: Code Splitting +title: 코드 분할 permalink: docs/code-splitting.html --- @@ -46,20 +46,20 @@ console.log(add(16, 26)); // 42 [설치하기](https://webpack.js.org/guides/installation/) 문서와 [시작하기](https://webpack.js.org/guides/getting-started/) 문서를 참조해 주세요. -## Code Splitting {#code-splitting} +## 코드 분할 {#code-splitting} 번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 "나누는" 것입니다. -[Code-Splitting](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다. +[코드 분할](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다. -Code-splitting 은 여러분의 앱을 "지연 로딩" 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. -앱의 코드 양을 줄이지 않고도 사용자가 필요 하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. +코드 분할은 여러분의 앱을 "지연 로딩" 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. +앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. ## `import()` {#import} - 앱에 Code Splitting을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다. + 앱에 코드 분할을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다. **Before** @@ -83,20 +83,20 @@ import("./math").then(math => { > [제안](https://github.com/tc39/proposal-dynamic-import)입니다. > 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. -Webpack이 이 구문을 만나게 되면 앱은 자동으로 Code Splitting 하게 됩니다. -Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) 할 수 있습니다. +Webpack이 이 구문을 만나게 되면 앱의 코드를 분할합니다. +Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)할 수 있습니다. [Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원합니다. 스스로 Webpack을 구성하고자 한다면 Webpack의 -[Code Splitting 가이드](https://webpack.js.org/guides/code-splitting/)를 참조하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. +[코드 분할 가이드](https://webpack.js.org/guides/code-splitting/)를 참조하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다. -[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 인식할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용 하세요. +[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 인식할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용하세요. ## `React.lazy` {#reactlazy} > 주의 > -> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 Code Splitting을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) 입니다. +> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)입니다. `React.lazy` 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. @@ -150,7 +150,7 @@ function MyComponent() { } ``` -`fallback` prop은 컴포넌트가 로드가 될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. +`fallback` prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다. ```js @@ -196,13 +196,13 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에 Code Splitting을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +앱에 코드 분할을 도입할 위치를 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. -이를 시작하기 좋은 장소는 경로 입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 +이를 시작하기 좋은 장소는 경로(routes)입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. -`React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 경로 기반 Code Splitting을 설정하는 예시입니다. +`React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 경로 기반 코드 분할을 설정하는 예시입니다. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -225,7 +225,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` 는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성 할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. +`React.lazy` 는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From 2c267deed44a4d47b484ed855cd35d3a96034275 Mon Sep 17 00:00:00 2001 From: shinseunghoon Date: Wed, 6 Mar 2019 22:00:48 +0900 Subject: [PATCH 08/10] Change words, polish. --- content/docs/code-splitting.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index aca10eae9..a42fe5afd 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -96,7 +96,7 @@ Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 > 주의 > -> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)입니다. +> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)입니다. `React.lazy` 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. @@ -196,7 +196,7 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에 코드 분할을 도입할 위치를 결정하는 것은 조금 까다롭습니다. +앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. 이를 시작하기 좋은 장소는 경로(routes)입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 @@ -225,7 +225,7 @@ const App = () => ( ## Named Exports {#named-exports} -`React.lazy` 는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. +`React.lazy`는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다. ```js // ManyComponents.js From 186c8155d6585882abfbcc0163b9d1041c2d0ef9 Mon Sep 17 00:00:00 2001 From: Seunghoon Shin Date: Sun, 17 Mar 2019 12:33:42 +0900 Subject: [PATCH 09/10] Apply feedback on the translation of the routes and route-based. --- content/docs/code-splitting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5f653a83b..c0adb66f5 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -199,10 +199,10 @@ const MyComponent = () => ( 앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. -이를 시작하기 좋은 장소는 경로(routes)입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 +이를 시작하기 좋은 장소는 라우트입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. -`React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 경로 기반 코드 분할을 설정하는 예시입니다. +`React.lazy`를 [React Router](https://reacttraining.com/react-router/) 라이브러리를 사용해서 애플리케이션에 라우트 기반 코드 분할을 설정하는 예시입니다. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; From 602e4917311eab64de801320ccab937eca1667b0 Mon Sep 17 00:00:00 2001 From: Ilkwon Sim Date: Tue, 26 Mar 2019 12:55:00 +0900 Subject: [PATCH 10/10] Update code-splitting.md --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index c0adb66f5..49c55f5d8 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -81,7 +81,7 @@ import("./math").then(math => { > > 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라 > [제안](https://github.com/tc39/proposal-dynamic-import)입니다. -> 동적 `import()`은 가까운 미래에 표준에 추가 될 것으로 보입니다. +> 동적 `import()`은 가까운 미래에 표준에 추가될 것으로 보입니다. Webpack이 이 구문을 만나게 되면 앱의 코드를 분할합니다. Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://facebook.github.io/create-react-app/docs/code-splitting)할 수 있습니다.