React Basic (리액트 환경설정)

React를 개발하며 아주 기본적인 설정들을 정리한다.

프로젝트 생성 후 환경설정

npm init

npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin 
npm i -D webpack webpack-cli webpack-dev-server	

webpack 왜 쓰는지?
: 여러 파일(.js, .jsx ...) 을 하나의 파일로 합쳐서 app.js파일로 만들어줌
최신 문법들을 옛날 브라우저에서도 돌아갈 수 있도록 만들어줌

webpack.config.js 파일 생성 후 환경설정

webpack.config.js

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    name: ***,
    mode: 'development',
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: {
        app: ['./Client'],
    },
    module:{
        rules: [{
            test:/\.jsx?$/,
            loader: 'babel-loader',
            options:{
                presets: [
                    ['@babel/preset-env',{
                        targets: {
                            browsers: ['> 1% in KR'],
                        }
                    }],    
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel'
                ],
            }
        }],
    },
    plugins: [
        new RefreshWebpackPlugin()
    ],
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
    },
    devServer: {
        devMiddleware: { publicPath: '/dist/' },
        static: { directory: path.resolve(__dirname) },
        hot: true
    }
}

package.json 파일

{
  "name": "***",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "***",
  "license": "***",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
    "babel-loader": "^8.2.4",
    "react-refresh": "^0.11.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}