React 앱 (빌드 환경)

Webpack 모듈 번들러, Babel 컴파일러를 로더로 설정하는 간단한 개발 환경을 구성한 후 React, React DOM 패키지를 설치해 React 앱을 렌더링 하는 실습을 진행합니다.

숙련도 설문 결과

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

Webpack 빌드 시스템 구성

webpack, webpack-cli, webpack-dev-server 패키지를 설치한 후 Webpack 개발 구성 파일을 작성해 entry, output, mode, devtool, devServer 등을 설정해 개발 서버를 구성합니다.

패키지 설치

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

설정	설명	설정 참고
entry	진입(입력) 파일 설정	main
output	출력 파일 설정	path, filename, publicPath
mode	개발 / 배포 모드 설정	development, production
devtool	소스 매핑 스타일 설정	eval
devServer	개발 서버 설정	contentBase, index, port, hot

개발에 적합한 소스맵 설정은 다음 값 사용이 권장됩니다. (소스맵 출력 참고)

• eval

• eval-source-map

• eval-cheap-source-map

• eval-cheap-module-source-map

React, ReactDOM 패키지 설치

react, react-dom 패키지를 설치합니다. (--save 버전 설치)

패키지 설치

npm i react react-dom

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

src/index.js

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

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

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

라이브 예제

Babel 로더 구성 (옵션)

babel-loader, @babel/core, @babel/preset-env 패키지를 설치한 후 Webpack 로더(참고)를 구성합니다.

패키지 설치

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

Browserslist 통합

Browserslist Integration을 참고하여 "browserslist"를 통합하는 설정을 진행합니다.

package.json

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

또는

.browserslistrc

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

• browserslist

• browserl.ist

• browserslist 쾌속 가이드