# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/learning-react-app/learning-history/from-pure-dev-to-react/react-app-on-the-build-envrionment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.