Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/doong-jo/webpack-starting-from-ground

πŸ›  Webpack, μ΄κ²ƒλ§Œμ€ μ•Œκ³ κ°€μž
https://github.com/doong-jo/webpack-starting-from-ground

react webpack

Last synced: about 2 months ago
JSON representation

πŸ›  Webpack, μ΄κ²ƒλ§Œμ€ μ•Œκ³ κ°€μž

Awesome Lists containing this project

README

        

# [Webpack, μ΄κ²ƒλ§Œμ€ μ•Œκ³  κ°€μž](https://velog.io/@sdong001/Webpack-%EC%9D%B4%EA%B2%83%EB%A7%8C%EC%9D%80-%EC%95%8C%EA%B3%A0-%EA%B0%80%EC%9E%90)

## μ΄κ²ƒλ§Œμ€ μ•Œμ•„μ•Ό ν•˜μ§€ μ•Šμ„κΉŒ

Webpack은 μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•  λ•Œ κ°€μž₯ 인기 μžˆλŠ” λ²ˆλ“€λŸ¬μž…λ‹ˆλ‹€. React 앱을 λΉŒλ“œν•΄μ£ΌλŠ” λ„κ΅¬λ‘œ μƒκ°ν•˜κ³  CRA의 Webpack 섀정을 κ·ΈλŒ€λ‘œ μ‚¬μš©ν•˜κΈ° λ³΄λ‹€λŠ” 이것이 μ–΄λ–»κ²Œ λ™μž‘ν•˜λŠ”μ§€, 핡심 μ›λ¦¬λŠ” 무엇인지 이해해야 ν•˜μ§€ μ•Šμ„κΉŒ? λΌλŠ” μƒκ°μ—μ„œ 글을 μ κ²Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ Webpackμ—μ„œ μ‚¬μš©ν•˜λŠ” λͺ¨λ“  ν”ŒλŸ¬κ·ΈμΈκ³Ό λ²ˆλ“€λŸ¬, μ΅œμ ν™” μ˜΅μ…˜μ„ κ³΅λΆ€ν•˜κΈ° λ³΄λ‹€λŠ” Webpack의 λ™μž‘μ›λ¦¬μ™€ 핡심 μš”μ†Œλ“€μ„ μ΄ν•΄ν•˜κ³  상황에 맞게 ν•„μš”ν•œ 것듀을 ν•™μŠ΅ν•˜λŠ” 것이 효율적이라고 μƒκ°ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ **이 κΈ€μ—μ„œλŠ” Webpack의 κΉŠμ΄μžˆλŠ” λ‚΄μš©λ³΄λ‹€ μ–•κ²Œ 'μ΄κ²ƒλ§Œμ€ μ•Œμ•„μ•Ό ν•˜μ§€ μ•Šμ„κΉŒ' 라고 μƒκ°λ˜λŠ” λ‚΄μš©μ„ μ μ–΄λ΄€μŠ΅λ‹ˆλ‹€.**

## Webpack에 λŒ€ν•΄μ„œ

![webpack](https://user-images.githubusercontent.com/35218826/59730847-eb233b00-927e-11e9-9788-408e699c9e58.png)
[좜처](https://medium.com/@paul.allies/webpack-managing-javascript-and-css-dependencies-3b4913f49c58)

Webpack은 λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•΄ μ‚¬μš©λ˜λŠ” 정적 λͺ¨λ“ˆ λ²ˆλ“€λŸ¬μž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ λ²ˆλ“€λŸ¬λŠ” μ—¬λŸ¬ νŒ¨ν‚€μ§€, κ΄€λ ¨λœ νŒŒμΌλ“€μ„ ν•˜λ‚˜λ‘œ λ¬Άμ–΄μ£ΌλŠ” 도ꡬ라고 생각할 수 μžˆμŠ΅λ‹ˆλ‹€. λ‚΄λΆ€μ μœΌλ‘œλŠ” ν”„λ‘œμ νŠΈμ— ν•„μš”ν•œ μœ„μ™€ 같은 μ˜μ‘΄μ„± κ·Έλž˜ν”„λ₯Ό μ°Έκ³ ν•˜μ—¬ ν•˜λ‚˜ μ΄μƒμ˜ λ²ˆλ“€λ‘œ λ§Œλ“€μ–΄λƒ…λ‹ˆλ‹€.

### Bundleκ³Ό Chunk

![](https://res.cloudinary.com/practicaldev/image/fetch/s--4_Wazx_7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ukz25x0zjhsu9docg5ob.png)

[좜처](https://dev.to/websavi/how-to-code-split-redux-store-to-further-improve-your-apps-performance-4gg9)

#### Bundle

> Webpackμ—μ„œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό ν¬ν•¨ν•˜μ—¬ μ—¬λŸ¬ λ¦¬μ†ŒμŠ€λ“€μ„ μ—°κ²°ν•œ(Concentarte) κ²°κ³Όλ¬Όμž…λ‹ˆλ‹€. Bundle은 μ—¬λŸ¬ 개의 Chunk둜 κ΅¬μ„±λ©λ‹ˆλ‹€.

#### Chunk

> λͺ¨λ“  μ½”λ“œλ₯Ό ν•˜λ‚˜μ˜ κ±°λŒ€ν•œ 파일(Bundle)둜 λ§Œλ“€μ§€ μ•ŠκΈ° μœ„ν•΄μ„œ μ—¬λŸ¬κ°œμ˜ ChunkλΌλŠ” λ‹¨μœ„λ‘œ λ‚˜λˆ•λ‹ˆλ‹€. μ½”λ“œκ°€ μ–΄λ–»κ²Œ λ‚˜λ‰˜λŠ”μ§€μ— λŒ€ν•œ 방법도 μž„μ˜λ‘œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

### μ™œ Webpack을 μ¨μ•Όν• κΉŒ

μš°λ¦¬κ°€ μ™œ Webpack을 μ‚¬μš©ν•΄μ•Ό ν•˜λŠ”μ§€ μ΄ν•΄ν•˜κΈ° μœ„ν•΄μ„œλŠ” κ·Έ 이전 μ›Ήμ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•  λ•Œ λ²ˆλ“€λŸ¬λŠ” μ–΄λ• λŠ”μ§€ μ‚΄νŽ΄λ΄μ•Ό ν•©λ‹ˆλ‹€.

두 가지 방법이 μžˆμ—ˆλŠ”λ° ν•˜λ‚˜λŠ” λ„ˆλ¬΄ λ§Žμ€ 슀크립트λ₯Ό λΆˆλŸ¬μ˜€λŠ” κ²ƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€. 이 방법은 λ„€νŠΈμ›Œν¬ 병λͺ©μ„ 일으켰고 μš”μ²­ μ§€μ—°μ˜ λ¬Έμ œκ°€ μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ‘λ²ˆμ§Έ 방법은 λͺ¨λ“  μ½”λ“œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆλŠ” ν•˜λ‚˜μ˜ 큰 `.js` νŒŒμΌμ„ μ‚¬μš©ν•˜λŠ” κ²ƒμ΄μ—ˆλŠ”λ°, μŠ€μ½”ν”„, 크기, 가독성, μœ μ§€λ³΄μˆ˜μ„±μ— λŒ€ν•œ 이유둜 λ¬Έμ œκ°€ λ§Žμ•˜μŠ΅λ‹ˆλ‹€.

#### Webpack의 핡심 원리, ν•΄κ²°μ±… [IIFE, Imeadiately invoked function expressions (μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜ ν‘œν˜„)](https://developer.mozilla.org/ko/docs/Glossary/IIFE)

> IIFEλŠ” 슀크립트 νŒŒμΌμ„ ν•˜λ‚˜μ˜ IIFEλ₯Ό μ‚¬μš©ν•¨μœΌλ‘œμ¨ 큰 ν”„λ‘œμ νŠΈμ—μ„œ μŠ€μ½”ν”„ 이슈λ₯Ό ν•΄κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ IIFEλ₯Ό μ‚¬μš©ν•¨μœΌλ‘œμ¨ μŠ€μ½”ν”„ μΆ©λŒμ— λŒ€ν•΄ κ±±μ •ν•  ν•„μš” 없이 μ•ˆμ „ν•˜κ²Œ μ½”λ“œλ₯Ό λ²ˆλ“€λ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Webpack은 IIFEλ₯Ό μ‚¬μš©ν•˜λ©° κ·Έ 밖에 μ‚¬μš©ν•˜λŠ” λ„κ΅¬λ‘œμ¨λŠ” Make, Gulp, Grund, Brocooli or Brunchκ°€ μžˆμŠ΅λ‹ˆλ‹€. 이 도ꡬ듀도 μ•Œλ €μ§„κ³Ό 같이 λ²ˆλ“€λŸ¬(λ˜λŠ” ν…ŒμŠ€ν¬ λŸ¬λ„ˆ)둜써 ν”„λ‘œμ νŠΈ νŒŒμΌλ“€μ„ λͺ¨λ‘ λ²ˆλ“€λ§ν•΄μ€λ‹ˆλ‹€. ν•˜μ§€λ§Œ λ‹€λ₯Έ 도ꡬ듀과 λ‹€λ₯΄κ²Œ Webpack은 [dependency graph](https://Webpack.js.org/concepts/dependency-graph/)λ₯Ό μƒμ„±ν•˜μ—¬ λΉŒλ“œμ‹œμΌœμ£ΌλŠ” λ„κ΅¬λ‘œμ¨ 크고 λ³΅μž‘ν•œ λ¦¬μ†ŒμŠ€κ°€ μžˆλŠ” ν”„λ‘œμ νŠΈμ—μ„œλŠ” Webpack을 μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. (Grunt, GulpλŠ” μ˜€λ‘œμ§€ λ¦¬μ†ŒμŠ€μ— λŒ€ν•œ 툴둜 μ‚¬μš©λ˜λ©° dependency graph κ°œλ…μ΄ μ—†μŒ) λ˜ν•œ λΉ„μŠ·ν•œ Browsify와 λΉ„κ΅ν•œλ‹€λ©΄ μ†λ„λ©΄μ—μ„œ μ’€ 더 μš°μ›”ν•©λ‹ˆλ‹€.

Webpack을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  λ²ˆλ“€λ§μ„ ν•œλ‹€κ³  κ°€μ •ν•΄λ³Έλ‹€λ©΄, ν•˜λ‚˜μ˜ νŒŒμΌμ„ λ³€κ²½ν•œλ‹€λŠ” 것은 (λ²ˆλ“€μ„ μƒˆλ‘œ λ§Œλ“€μ–΄μ•Όν•˜λ―€λ‘œ)전체λ₯Ό λ‹€μ‹œ λΉŒλ“œν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 이λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λ²ˆλ“€λ§μ„ μ‰½κ²Œν•˜λ €λ©΄ νŒŒμΌλ“€ 간에 슀크립트λ₯Ό μž¬μ‚¬μš©ν•΄μ•Όν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이λ₯Ό μ΅œμ ν™”ν•˜μ—¬ λΉŒλ“œν•˜λŠ” 것은 μ–΄λ ΅μŠ΅λ‹ˆλ‹€. λ˜ν•œ μ½”λ“œλ₯Ό μž‘μ„±ν•œ 뒀에 κ·Έ μ½”λ“œκ°€ μŠ€ν¬λ¦½νŠΈμ—μ„œ μ‹€μ œλ‘œ μ‚¬μš©λ˜λŠ”μ§€ μ•„λ‹Œμ§€ μ–΄λ–»κ²Œ μ•Œ 수 μžˆμ„κΉŒμš”?

예λ₯Ό λ“€μ–΄ lodashμ—μ„œ λ‹¨μΌν•¨μˆ˜ 만 μ‚¬μš©ν•˜λ”λΌλ„ lodash 전체 μ½”λ“œλ₯Ό μΆ”κ°€ν•œ λ‹€μŒ ν•¨κ»˜ λ²ˆλ“€λ§ν•΄μ•Όν•©λ‹ˆλ‹€. μ΄λŸ¬ν•œ μ½”λ“œμ˜ 쒅속성은 μ–΄λ–»κ²Œ ν•΄κ²°ν• κΉŒμš”? μ½”λ“œμ˜ λ‘œλ”©μ§€μ—°μ€ μ»€μ§€λŠ” 것을 λ§‰μ•„μ•Όν•˜λ©° 이λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„  개발자의 λ§Žμ€ μˆ˜μž‘μ—…μ΄ ν•„μš”ν•©λ‹ˆλ‹€.

μ΄λŸ¬ν•œ μƒν™©μ˜ ν•΄κ²°ν•˜κΈ° μœ„ν•œ λ°©λ²•μœΌλ‘œ Webpack을 μ‚¬μš©ν•˜μ—¬ κ°œλ°œμžκ°€ 직접 ν•˜κΈ° μ–΄λ €μš΄ **λ²ˆλ“€λ§μ˜ μ„±λŠ₯κ³Ό μ΅œμ ν™”λ₯Ό 비ꡐ적 μ‰½κ²Œ κ°œμ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.** λ˜ν•œ κ°•λ ₯ν•œ κΈ°λŠ₯ 쀑 ν•˜λ‚˜μΈ [μ½”λ“œ μŠ€ν”Œλ¦¬νŒ…](https://webpack.js.org/guides/code-splitting/)을 μ΄μš©ν•˜μ—¬ **ν•„μš”ν•œ λͺ¨λ“ˆλ§Œ λ‘œλ“œν•˜μ—¬ μš”μ²­ 지연을 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.**

### Webpack의 ν•΅μ‹¬μš”μ†Œ

μ•„λž˜λŠ” Webpack의 core라고 ν•  수 μžˆλŠ” μš”μ†Œλ“€μž…λ‹ˆλ‹€. 이 μš”μ†Œλ“€μ„ μ½”λ“œμ™€ ν•¨κ»˜ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

- Entry
- Output
- Loaders
- Plugins
- Mode

#### create-react-app webpack(μ΄ν•˜ 'CRA') μ„€μ • λœ―μ–΄λ³΄κΈ°
CRAλŠ” React둜 κ°œλ°œν•  λ•Œ κ°€μž₯ μœ μš©ν•œ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈμž…λ‹ˆλ‹€. 이 CRA μ„€μ •μ—λŠ” Reactλ₯Ό κ΅¬μ„±ν•˜λŠ”λ° ν•„μš”ν•œ Webpack 섀정듀이 기본으둜 μž‘μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. 이 섀정듀을 보며 Reactμ—μ„œ Webpack을 μ–΄λ–»κ²Œ μ„€μ •ν•˜λŠ”μ§€ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

일반적으둜 CRAλ₯Ό 톡해 React ν™˜κ²½ κ΅¬μ„±μ„ν•˜λ©΄ Webpack κ΄€λ ¨ 섀정듀이 μˆ¨κ²¨μ ΈμžˆλŠ”λ° 이λ₯Ό κΊΌλ‚΄μ–΄ κ°œλ°œμžκ°€ 직접 μˆ˜μ •ν•  수 μžˆλ„λ‘ ν•΄μ•Όν•©λ‹ˆλ‹€.

1. CRAλ₯Ό ν†΅ν•œ React ν™˜κ²½κ΅¬μ„±

```sh
npx create-react-app myapp
```

2. `eject`λ₯Ό 톡해 Webpack 섀정을 μ™ΈλΆ€λ‘œ κΊΌλ‚΄κΈ°

```sh
npm run eject

# λ˜λŠ” yarn
yarn eject
```

μ΄λ ‡κ²Œ `eject` 슀크립트λ₯Ό 톡해 섀정을 κΊΌλ‚Ό 수 있으며 `config`와 `script` 디렉터리가 μƒμ„±λ˜λŠ”λ° `config/webpack.config.js` μ—μ„œ Webpack ν™˜κ²½μ„€μ •μ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

이 μš”μ†Œλ“€μ„ CRAμ—μ„œμ˜ `webpack.config.js` μ½”λ“œμ—μ„œ λͺ¨λ“  섀정을 μ‚΄νŽ΄λ³΄μ§„ μ•Šκ³  핡심적인 λΆ€λΆ„λ§Œ ν•˜λ‚˜μ”© μ‚΄νŽ΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

#### 1. Entry / Output

![entry](https://getdrip.s3.amazonaws.com/uploads/image_upload/image/325131/embeddable_a721c3b5-1335-4b71-aeca-cd4d436f554b.png)

entryλŠ” building의 μ‹œμž‘μ μ΄λΌκ³  λ³Ό 수 있으며, output은 buidling 된 νŒŒμΌμ— κ²°κ³Όλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

```js
entry: [
// dev λͺ¨λ“œλ©΄ Hot reload(파일의 변경사항 μžλ™ 반영) 섀정을 μΆ”κ°€
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),

// src/index.js
paths.appIndexJs
].filter(Boolean), // true값인 결과만 λ°˜ν™˜
```

```js
output: {
// build path, filename 지정
path: isEnvProduction ? paths.appBuild : undefined,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js' // ν•΄μ‹œ 값을 λ„£μŒμœΌλ‘œμ¨ λ‘œμ»¬μ—μ„œ 캐싱을 μœ λ„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
: isEnvDevelopment && 'static/js/bundle.js',
// more...
},
```

#### 2. Loaders

loaderλŠ” λ²ˆλ“€λ§ν•  νŒŒμΌμ— λŒ€ν•œ κ·œμΉ™μ„ μ •ν•˜κ³  μ‹€ν–‰ν•˜λŠ” 역할을 λ‹΄λ‹Ήν•©λ‹ˆλ‹€. μ•„λž˜μ˜ μ½”λ“œλŠ” λͺ¨λ“ˆμ΄ 될 수 μžˆλŠ” νŒŒμΌλ“€μ„ `babel-loader`λ₯Ό 톡해 μ½μ–΄λ“€μ΄λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

```js
loaders: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader")
// ...
}
];
```

λ¦¬μ†ŒμŠ€ νŒŒμΌλ“€ λ˜ν•œ loaderλ₯Ό μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

```js
loaders: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader")
// ...
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader")
}
];
```

#### 3.Plugins

ν”ŒλŸ¬κ·ΈμΈμ€ λ²ˆλ“€ μ΅œμ ν™”, ν™˜κ²½ λ³€μˆ˜ μ£Όμž…κ³Ό 같은 μž‘μ—…λ“€μ„ μˆ˜ν–‰ν•  수 있으며 이외에도 λ‹€μ–‘ν•œ κΈ°λŠ₯듀이 μ‘΄μž¬ν•©λ‹ˆλ‹ˆλ‹€. μ•„λž˜ μ½”λ“œμ—μ„œλŠ” `HtmlWebPackPluglin`을 μ‚¬μš©ν•˜μ—¬ `filename`의 κ°’μœΌλ‘œ μ§€μ •λœ νŒŒμΌμ•ˆμ— `` νƒœκ·Έλ₯Ό μ£Όμž…ν•©λ‹ˆλ‹€.

```js
plugins: [
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml // ./src/index.html
},
isEnvProduction
? {
minify: {
removeComments: true
//...
}
}
: undefined
)
)
// more ...
];
```

#### 4.Mode

webpack을 κ΅¬λ™μ‹œν‚¬ modeλ₯Ό 지정해쀄 수 μžˆμŠ΅λ‹ˆλ‹€. `development`, `production`, `none` 세가지가 μžˆλŠ”λ° 각각의 섀정에 따라 webpack의 λ‚΄μž₯된 μ΅œμ ν™”λ₯Ό μ–΄λ–€ λ°©μ‹μœΌλ‘œ 할지 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. [webpack의 mode λ¬Έμ„œ](https://webpack.js.org/configuration/mode/)λ₯Ό μ°Έκ³ ν•˜μ—¬ μ–΄λ–€ μ΅œμ ν™”κ°€ μ„€μ •λ˜λŠ”μ§€ μžμ„Έν•˜κ²Œ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό λ°”νƒ•μœΌλ‘œ μž„μ˜λ‘œ `optimization` 속성에 μ΅œμ ν™” μ˜΅μ…˜μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

```js
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
```

## 직접 Bundle을 μ΅œμ ν™”ν•˜λ €λ©΄? webpack-bundle-analyzer

λ²ˆλ“€μ˜ ꡬ성사항을 ν•œλ²ˆμ— λ³Ό 수 μžˆλŠ” λ„κ΅¬μž…λ‹ˆλ‹€. 이λ₯Ό ν™œμš©ν•˜μ—¬ μ–΄λ–€ ꡬ성이 bundle의 크기λ₯Ό μ–Όλ§ˆλ‚˜ μ°¨μ§€ν•˜λŠ”μ§€ 확인할 수 있고 이λ₯Ό ν†΅ν•΄μ„œ Webpack 섀정을 μˆ˜μ •ν•˜κ±°λ‚˜ 라이브러리 ꡐ체도 κ³ λ €ν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)

![](https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif)

## 생각

React둜 κ°œλ°œν•˜λ©° λΉŒλ“œμ— λŒ€ν•΄μ„œλŠ” 크게 관심을 가지지 μ•Šμ•˜μ—ˆλŠ”λ° 관심을 가지고 μ‹œκ°„κ³Ό λ…Έλ ₯을 λ“€μΌμˆ˜λ‘ μ„±λŠ₯을 ν–₯μƒμ‹œν‚¬ 수 μžˆλ‹€λŠ” 것을 μ•Œμ•˜μŠ΅λ‹ˆλ‹€. λ˜ν•œ SPAλ₯Ό κ°œλ°œν•  λ•Œ λΉŒλ“œ 도ꡬλ₯Ό 많이 μ‚¬μš©ν•˜κ²Œ λ˜λŠ”λ° 이λ₯Ό 잘 μ΄ν•΄ν•˜μ§€ λͺ»ν•œ 채 κ°œλ°œν•˜λŠ” 건 마치 μΉ΄λ©”λΌμ˜ μ‘°λ¦¬κ°œμ™€ 렌즈λ₯Ό 잘 μ΄ν•΄ν•˜κ³  μžˆλŠ” 사진가가 μΌλ°˜μΈλ³΄λ‹€ 사진을 잘 μ°λŠ” 것과 λ§ˆμ°¬κ°€μ§€ μ•„λ‹κΉŒ 생각이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€. λΉŒλ“œ 도ꡬ도 ν•¨κ»˜ μ΄ν•΄ν•œλ‹€λ©΄ 쒋은 μ„±λŠ₯을 λ‚Ό 수 μžˆμ„ 것 κ°™μŠ΅λ‹ˆλ‹€.

[썸넀일 좜처](https://www.toptal.com/react/webpack-react-tutorial-pt-1)