리액트 프로젝트 세팅 가이드

1. 프로젝트 폴더 생성 및 초기화

mkdir my-project

cd ./my-project

npm init

결과 : 프로젝트 루트에 package.json 파일 생성

 

2. 리액트 설치

npm install react react-dom

yarn add react react-dom

react : 리액트 라이브러리

react-dom : 리액트 엘리멘트 렌더링 라이브러리

 

3. 바벨 설치

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

@babel-core : babel의 core 코드

@babel-preset-react : jsx를 javascript로 트랜스파일링

@babel-preset-env : es6+ 문법을 구브라우저에서도 이해할 수 있도록 es5로 트랜스파일링

 

4. 웹팩 설치

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

webpack : 개발자의 코드와 소스를 하나로 합쳐주는 번들러

webpack-cli : 웹팩의 커맨드를 이용해 빌드나 실행을 하기 위함

webpack-dev-server : 핫로딩

@webpack-cli/serve : ?

 

5. 웹팩 로더와 플러그인 설치

npm install -D css-loader sass-loader style-loader url-loader babel-loader@8

loader : 모듈(js, css, png 등)을 자바스크립트 코드 안으로 가져온다.

css-loader : css 확장자 파일을 찾으면 안의 내용을 처리해서 자바스크립트 코드 안으로 가져옴 

sass-loader : sass, scss 확장자 파일을 안의 내용을 css로 변환 

style-loader : css를 html의 style태그를 생성해 넣음

url-loader : 파일 내용을 모듈에 문자열 형태로 추가

babel-loader : javascript코드를 트랜스파일링

 

npm install -D clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin

clean-webpack-plugin : 빌드 이전 결과물을 제거

html-webpack-plugin : html 파일에 번들된 js파일을 자동 연결해서 생성

mini-css-extract-plugin : css 파일을 별도로 파일로 추출

 

결과물 package.json

{
  "name": "my-project",
  "version": "1.0.0",
	...
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.16.7",
    "@babel/preset-env": "7.16.7",
    "@babel/preset-react": "7.16.7",
    "@webpack-cli/serve": "1.6.0",
    "babel-loader": "8.2.3",
    "clean-webpack-plugin": "4.0.0",
    "css-loader": "3.2.0",
    "file-loader": "6.2.0", //필요한가?
    "html-webpack-plugin": "4.5.2",
    "node-sass": "4.14.1", //필요한가?
    "sass-loader": "8.0.0",
    "style-loader": "1.0.0",
    "url-loader": "4.1.1",
    "webpack": "4.46.0",
    "webpack-cli": "4.9.1",
    "webpack-dev-server": "4.7.2"
  }
}

 

6. 웹팩 설정

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        main: "./src/index.js"
    },
    output: {
        path: path.resolve("./dist"),
        filename: "[name].js",
        publicPath: "/"
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src/components")
        }
    },
    module: {
        rules: [
            {
                 test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            },
            {
                test: /\.(scss|css)/,
                exclude: /node_modules/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|otf)(\?v=[0-9]\.[0-9])?$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[hash].[ext]",
                            limit: 10000
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            templateParameters: {
                env: process.env.NODE_ENV === "development" ? "(개발용) " : "" 
            }
        }),
        new webpack.BannerPlugin({
            banner: `Build Time: ${new Date().toLocaleString()}`
        }),
        new CleanWebpackPlugin()
    ],
    devServer: {
        port: 5500,
        historyApiFallback: true
    }
}

 

7. 바벨 설정

웹팩에서 설정하지 않고, 별도로 바벨을 설정할 경우

/* babel.config.js */

module.exports = {
  preset: ["@babel/preset-env",
    {
      targets: {
        chrome: "79", // 크롬 79버전까지 지원하는 코드를 만들어라
        ie: "11", // ie 11까지 지원하는 코드를 만들어라
      }
    }  
  ]
}

 

8. 린트설정

린트를 사용하면 코드의 가독성을 높이고, 런타임 버그를 예방할 수 있다.

/* .eslintrc.js */

module.exports = {
  extends: [
    "eslint:recommended"
  ]
}

 

9. 리액트 써보기

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App/>, document.getElementById('app'))