CRA 없이 React 개발 환경 구축하기

1. 프로젝트 파일 생성하기

mkdir project_name
cd project_name
npm init -y

2. 필요한 폴더 생성하기

mkdir src 
mkdir dist 
mkdir public

• src : 소스 파일이 저장될 폴더
• dist : 번들링된 파일이 저장될 폴더
• public : 정적 파일이 저장될 폴더

3. 리액트 설치하기

npm install react react-dom

• react : 리액트 코어
• react-dom : 리액트와 DOM을 연결

4. 바벨 설치하기

npm install @babel/core @babel/preset-react @babel/preset-env -D

• @babel/core : 바벨 코어
• @babel/preset-react : JSX코드를 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인
• @babel/preset-env : ES6 코드를 ES5 코드로 변환

5. 바벨 설정하기 (preset)

• babel.config.js 파일 생성 후 설정

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
};

6. 웹팩 설치하기

npm install webpack webpack-cli webpack-dev-server -D

• webpack : 웹팩의 코어
• webpack-cli : 터미널에서 웹팩 커맨드를 실행할 수 있도록 하는 도구
• webpack-dev-server : 디스크에 저장되지 않는 메모리 컴파일을 사용하는 개발 서

7. 로더 설치하기

npm install babel-loader css-loader style-loader -D

• babel-loader : JSX, ES6+ 문법 변환
• css-loader : CSS 코드를 자바스크립트로 변환
• style-loader : JS로 변환된 스타일시트를 동적으로 돔에 추가하는 로더

8. 플러그인 설치

npm install html-webpack-plugin -D

• html-webpack-plugin : 웹팩이 html 파일을 빌드

9. 웹팩 설정

• webpack.config.js 생성 후 설정

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    entry: "./src/app.jsx",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js",
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.(scss|css)$/,
            use: ["style-loader", "css-loader"],
        }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, './dist'),
        inline: true,
        hot: true,
        port: 3030
    },

    plugins: [new HtmlWebpackPlugin(
        {
            template: 'public/index.html'
        }
    )]
}

• mode : devlopment(개발) / production(배포) / none
• entry : 웹팩을 실행할 대상 파일

10. package.json에 스크립트 입력하기

{
  "scripts": {
      "start": "webpack-dev-server -w",
      "build": "webpack"
    }
}

• -w : 코드 변경 시 매번 새로고침하지 않아도 변경되도록 하는 옵션
• 커맨드 창에 npm start로 실행