[React]개발환경 설정

01 개요

본 문서에서는 React를 이용한 개발을 위한 기초적인 설정 방법에 대해 다룬다.

최종 수정일 : 2023.03.10

---

02 기본 패키지 설치

//React
npm install react react-dom --save

//WebPack
npm install webpack-cli webpack-dev-server --savedev

//WebPack Plug-in
npm install babel-loader --savedev
npm install html-webpack-plugin --savedev
npm install clean-webpack-plugin --savedev
npm install css-loader --savedev
npm install style-loader --savedev
npm install cross-env --savedev
npm install dotenv --savedev
npm install dotenv-webpack --savedev
npm install @pmmmwh/react-refresh-webpack-plugin --savedev

//Babel
npm install @babel/core --save
npm install @babel/preset-env --savedev
npm install @babel/preset-react --savedev

---

03 패키지 설정

03.01 웹팩 설정

//webpack.config.js

const path = require('path')
const webpack = require('webpack')
const dotenv = require("dotenv");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin') // eslint 사용할 경우

const isDevelopment = process.env.NODE_ENV !== "production";
const envPath = `./.env.${isDevelopment ? "development" : "production"}`;

dotenv.config({
	path: envPath,
});

const config = {
	name: 'React18-webpack-babel-setting', // 설정 이름
	mode: 'development', // production, development // 설정 모드
	devtool: 'eval',
	entry: {
		app: './src/index.js',
	},
	resolve: {
		extensions: ['.js', '.jsx'],
	},
	module: {
		rules: [
			{   // 리액트 바벨 설정
				test: /\.js/, 
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env', '@babel/preset-react']
					}
				}
			},
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
			},
		]
	},
	plugins: [
		new Dotenv({
		path: envPath,
		}),
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin(
			{ 
				template: './public/index.html', // 템플릿 설정
				minify: true, // 압축 설정
			}
		),
		new webpack.ProvidePlugin({ // 리액트 자동 로드
			"React": "react",
		}),
		new ESLintPlugin()
   ],
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js',
		publicPath: '/',
	},
	devServer: {						// 개발 서버 설정
	static: './dist',
		port: 3000,						// 포트 설정
		hot: true,						// 핫 모듈 교체(HMR) 활성화
		compress: true,					// 압축 유무
		open: true,						// 기본 브라우저에서 실행
		historyApiFallback: true,		// connect-history-api-fallback error 방지
	}
}

if (isDev && config.plugins) {
	onfig.plugins.push(new webpack.HotModuleReplacementPlugin())
	config.plugins.push(new ReactRefreshWebpackPlugin())
}

module.exports = config

03.99 package.json

//package.json
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "cross-env webpack serve --env development",
	"build": "cross-env NODE_ENV=production webpack"
}