> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/learning-history/from-pure-dev-to-react/react-app-on-the-build-envrionment.md).

# React 앱 (빌드 환경)

[Webpack](https://webpack.js.org/) 모듈 번들러, [Babel](https://babeljs.io/) 컴파일러를 로더로 설정하는 간단한 개발 환경을 구성한 후 React, React DOM 패키지를 설치해 React 앱을 렌더링 하는 실습을 진행합니다.

#### 숙련도 설문 결과

오리엔테이션 설문 Webpack, Babel 숙련도 설문 결과입니다.

![](https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUfqhMWK9ILIx0SXJTa%2Fuploads%2F8AaqnBX5mIfKIC1OkT2s%2Ffile.png?alt=media)

## Webpack 빌드 시스템 구성 <a href="#config-webpack-dev-build-system" id="config-webpack-dev-build-system"></a>

[webpack](https://www.npmjs.com/package/webpack), [webpack-cli](https://www.npmjs.com/package/webpack-cli), [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server) 패키지를 설치한 후 Webpack 개발 구성 파일을 작성해 entry, output, mode, devtool, devServer 등을 설정해 개발 서버를 구성합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i -D webpack webpack-cli webpack-dev-server
```

{% endtab %}
{% endtabs %}

| 설정                                                               | 설명            | 설정 참고                                 |
| ---------------------------------------------------------------- | ------------- | ------------------------------------- |
| [entry](https://webpack.js.org/concepts/#entry)                  | 진입(입력) 파일 설정  | `main`                                |
| [output](https://webpack.js.org/concepts/#output)                | 출력 파일 설정      | `path`, `filename`, `publicPath`      |
| [mode](https://webpack.js.org/concepts/#mode)                    | 개발 / 배포 모드 설정 | `development`, `production`           |
| [devtool](https://webpack.js.org/configuration/devtool/#devtool) | 소스 매핑 스타일 설정  | `eval`                                |
| [devServer](https://webpack.js.org/configuration/dev-server/)    | 개발 서버 설정      | `contentBase`, `index`, `port`, `hot` |

{% hint style="info" %}
[개발에 적합한 소스맵 설정](https://webpack.js.org/configuration/devtool/#development)은 다음 값 사용이 권장됩니다. (소스맵 출력 [참고](https://github.com/webpack/webpack/tree/master/examples/source-map))

* eval
* eval-source-map
* eval-cheap-source-map
* eval-cheap-module-source-map
  {% endhint %}

## React, ReactDOM 패키지 설치 <a href="#install-react-react-dom" id="install-react-react-dom"></a>

[react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) 패키지를 설치합니다. (`--save` 버전 설치)

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i react react-dom
```

{% endtab %}
{% endtabs %}

프로젝트 엔트리 파일에 React, ReactDOM API 코드를 추가해 앱 UI를 렌더링 합니다.

{% tabs %}
{% tab title="src/index.js" %}

```jsx
import { createElement as h } from 'react'
import { render } from 'react-dom'

// React 요소 생성
const uploadButton = h(/* ... */)

// ReactDOM 렌더링
render(uploadButton, document.getElementById('domNode'))
```

{% endtab %}
{% endtabs %}

#### 라이브 예제

{% embed url="<https://codesandbox.io/s/react-react-dom-api-nodejs-880bp?file=/src/index.js>" %}

## Babel 로더 구성 (옵션) <a href="#config-babel-loader" id="config-babel-loader"></a>

[babel-loader](https://www.npmjs.com/package/babel-loader), [@babel/core](https://www.npmjs.com/package/@babel/core), [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) 패키지를 설치한 후 Webpack 로더([참고](https://webpack.js.org/loaders/babel-loader))를 구성합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i -D babel-loader @babel/core @babel/preset-env
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}

#### **Browserslist 통합**

[Browserslist Integration](https://babeljs.io/docs/en/babel-preset-env#browserslist-integration)을 참고하여 "browserslist"를 통합하는 설정을 진행합니다.

{% code title="package.json" %}

```javascript
"browserslist": [
  "> 1% in KR”,
  “not ie <= 10”,
  "last 2 versions"
]
```

{% endcode %}

또는

{% code title=".browserslistrc" %}

```bash
> 1% in KR
not ie <= 10
last 2 versions
```

{% endcode %}

* [browserslist](https://github.com/browserslist/browserslist#full-list)
* [browserl.ist](https://browserl.ist/)
* [browserslist 쾌속 가이드](https://blog.shiren.dev/2020-12-01/)
  {% endhint %}