ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [React] 리액트 프로젝트 초기 셋업 (Webpack, babel 설정)
      Development/React 2020. 10. 8. 12:23
      728x90

      # 들어가기전에

      CRA를 사용하면 쉽고 간편하게 React 개발 환경 구축을 할 수 있지만, 자동으로 다수의 패키지들이 설치되고 Webpack 및 babel설정도 자동으로 셋업되서 숨겨지기 때문에 번들링 옵션을 변경 때 번거롭다.

      또한, CRA만 사용하여 Webpack과 babel이 뭔지도 모르는 사람을 많이 봤다....

      이 포스팅을 보는 사람들은 그런 일이 없길 바라면서, React 초기 개발환경 셋업에 대한 포스팅을 하겠다.

      Let's start 🥳

      # React 프로젝트 환경 구성

      npm 설치

      React는 Webpack과 Babel을 사용하는데 이것을 사용하기 위해 Node가 필요하다.

      또한, 의존성관리를 npm을 사용하기 때문에 Node가 필요하다.

      아래 명령어를 입력하여 npm을 설치한다.

      npm init

       

      React 설치 및 사용하기

      React를 사용하기 위해서는 React와 ReactDOM 패키지가 필요하다.

      • react : 리액트가 동작하는 핵심적인 코드가 들어있는 자바스크립트 파일

      • react-dom : 리액트 코드를 웹에다가 붙여주는 역할을 하는 자바스크립트 파일

      아래 명령어를 사용해서 React와 ReactDOM 패키지를 설치한다.

      npm i react react-dom

      폴더 루트에 src와 public폴더를 생성한다.

      src폴더에 index.jsx파일과 App.jsx파일을 생성한다.

      index.jsx

import React from "react";
import ReactDom from "react-dom";
import App from "./App.jsx";

ReactDom.render(<App />, document.querySelector("#root"));
      App.jsx

import React from "react";

const App = () => {
    return (
        <>
            <h1>React initial setup</h1>
        </>
    );
};

export default App;

      public폴더에 css파일을 담는 css폴더와 index.html파일을 생성한다.

      필자는 스타일하기 쉽게 css reset을 하므로 css파일을 생성했다.

      <html>
    <head>
        <meta charset="UTF-8" />
        <title>Basic React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

      환경변수 사용하기

      webpack에서 development모드나 production모드 설정을 해줘야한다.

      이럴 때 일일이 세팅을 변경하지 않고, 환경변수에 모드를 저장하고 실행하게 하면 굉장히 편리하다.

      아래 명령어를 입력하여 패키지를 설치한다.

      • cross-env : CLI 환경에서 실행시킬 때에 환경변수를 설정하는 기능으로, 각 OS마다 환경변수를 자동으로 설정한다.
      npm i cross-env --save-dev

      Bebel 세팅

      최신 Javascript문법을 사용하기 위해서는 Bebel이 필요하다.

       

      아래 명령어를 입력하여 필요한 패키지들을 설치한다.

      • @babel/core: 바벨을 사용하기 위한 필수 패키지

      • @babel-polyfill: ES2015의 새로운 객체와 메소드를 사용할 수 있도록 도와주는 패키지

      • @babel/preset-env: 최신 자바스크립트 기능을 ES5로 트랜스파일 해주는 패키지

      • @babel/preset-react: 리액트 환경(JSX)을 위한 패키지

      • @babel/plugin-proposal-class-properties: 클래스 프로퍼티를 사용할 수 있도록 도와주는 바벨 플러그인

      • babel-loader: 바벨이랑 웹팩 연결해주는 패키지

      npm i @babel/core @babel/polyfill @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader --save-dev

      Babel을 프로젝트에 적용하기 위해서 폴더 루트에 .babelrc 파일을 생성한다.

      {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

      webpack 세팅

      React는 SPA로, 쪼개진 자바스크립트 파일을 html이 실행할 수 있는 자바스크립트 파일로 번들링 해야하므로, 자바스크립트 모듈 번들러인 Webpack이 필요하다.

      아래 명령어를 입력해서 필요한 패키지를 설치한다.

      • webpack: 웹팩을 사용하기 위한 필수 패키지

      • webpack-cli: 웹팩을 CLI환경에서 사용하기 위한 패키지

      • webpack-dev-server: 웹팩 개발서버 패키지

      • html-webpack-plugin: html파일을 생성하기 위한 플러그인

      • mini-css-extract-plugin: css파일을 생성하기 위한 플러그인

      • css-loader: css파일을 읽기 위한 패키지

      npm i webpack webpack-cli webpack-dev-server --save-dev
npm i html-webpack-plugin mini-css-extract-plugin css-loader --save-dev

      webpack을 프로젝트에 적용하기 위해서 폴더 루트에 .webpack.config.js 파일을 생성한다.

      const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const MODE = process.env.WEBPACK_ENV;
const ENTRY_FILE = path.resolve(__dirname, "src", "index.jsx");
const OUTPUT_DIR = path.join(__dirname, "dist");

const config = {
    mode: MODE,
    entry: {
        app: ["@babel/polyfill", ENTRY_FILE],
        style: path.resolve(__dirname, "public", "css", "styles.css"),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "public/index.html",
            // favicon: 'public/favicon.ico'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
    ],
    output: {
        path: OUTPUT_DIR,
        filename: "bundle.[hash].js",
    },
    devServer: {
        host: "localhost",
        port: 4000,
        open: true,
    },
};

module.exports = config;

      react-hot-loader 설치

      react-hot-loader는 변경사항을 새로고침없이 바로 반영해준다.

      편한 개발을 위해 설치해주자.

      아래 명령어를 입력하여 패키지를 설치한다.

      npm i react-hot-loader --save-dev

      src/App.jsx파일에 react-hot-loader을 import하고 적용한다.

      import React from "react";
import { hot } from "react-hot-loader";

const App = () => {
    return (
        <>
            <h1>React initial setup</h1>
        </>
    );
};

export default hot(module)(App);

      .babelrc파일에 플러그인을 추가한다.

      "plugins": ["@babel/plugin-proposal-class-properties", "react-hot-loader/babel"]

       

      script 작성

      개발용 start와 빌드용 build 명령을 각각 작성했다.

      아래 명령어를 package.json에 scripts안에 입력한다.

      "start": "cross-env WEBPACK_ENV=development webpack-dev-server --hot",
"build": "cross-env WEBPACK_ENV=production webpack"

      이제 모든 설정이 완료되었다.

      npm start 명령어를 입력하면 dev-server가 실행되고,

      npm run build 명령어를 입력하면 폴더 root에 dist폴더가 생성되면서 빌드된 파일이 생성된다.

       

      완성된 코드는 아래 GITHUB에서 확인할 수 있다.

       

      Joooohee/basic-react

      React Project Initial Setup with babel, webpack. Contribute to Joooohee/basic-react development by creating an account on GitHub.

      github.com

      🎉  피드백은 언제나 환영입니다. 🎉

      728x90

      'Development > React' 카테고리의 다른 글

      [React] CRA 프로젝트에서 환경변수 사용하기  (0) 2021.08.12

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바