[Node] React 정리(1) - 프로젝트 구성 방법

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다.

 

 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다.

 

 

# Contents

---

• 프로젝트 기본 설정 - index.html 사용 X 
• 프로젝트 기본 설정 - index.html 사용 O

 

 

# 프로젝트 기본 설정 - index.html 사용 X

---

 리액트 프로젝트를 생성할 때 템플릿 index.html 을 사용할 지 안할지에 대해 구성파일을 이용하여 변경할 수 있습니다. 아래는 전체 구성파일 입니다. 참고하시기 바랍니다.

 

 webpack.config.js

 

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackRootPlugin = require("html-webpack-root-plugin");

module.exports = function () {
    return {
        entry: "./src/frontend/index.js",
        output: {
            filename: "main.js",
            path: resolve(__dirname, "public"),
            publicPath: "/",
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"],
                            plugins: ["@babel/plugin-transform-runtime"],
                        },
                    },
                },
            ],
        },
        optimization: {},
        plugins: [new HtmlWebpackPlugin(), new HtmlWebpackRootPlugin()],
    };
};

 

 package.json

 

{
    "name": "07-frontend-only-app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js",
        "start": "webpack-dev-server --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.9.0",
        "@babel/plugin-transform-runtime": "^7.9.0",
        "@babel/preset-env": "^7.9.0",
        "babel-loader": "^8.1.0",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-root-plugin": "^0.10.0",
        "terser-webpack-plugin": "^2.3.5",
        "webpack": "^4.42.1",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
        "htm": "^3.0.3",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-router-dom": "^5.1.2"
    },
    "engines": {
        "node": ">=14"
    },
    "engineStrict": true
}

 

 시작은 아래와 같은 명령어를 사용합니다.

 

npm install
npm start

 

 

# 프로젝트 기본 설정 - index.html 사용 O

---

 리액트 프로젝트를 생성할 때 템플릿 index.html 을 사용할 지 안할지에 대해 구성파일을 이용하여 변경할 수 있습니다. 아래는 전체 구성파일 입니다. 참고하시기 바랍니다.

 

 webpack.config.js

 

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "index_bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

 

 package.json

 

{
    "name": "react-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-runtime": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "babel-loader": "^8.2.2",
        "html-webpack-plugin": "^5.3.2",
        "webpack": "^5.58.1",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.15.4",
        "htm": "^3.1.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

 

 .barbel.rc

 

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

 

 index.html

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>My React App</title>
    </head>
    <body>
        abcdefg ... <br />
        <div id="app"></div>
    </body>
</html>

 

 시작은 아래와 같습니다.

 

npm install
npm start