세팅

리액트 프로젝트 시작할 때 CRA말고 직접 세팅하는 방법에 대한 정리

현재는 기본 세팅이고 해당 프로젝트나 본인 스타일에 맞춰서 수정해서 사용하면 됩니다.

1. webpack

• 설치할 것
  1. webpack관련: npm i -D webpack webpack-cli
  2. webpack-dev-server관련: npm i -D webpack-dev-server react-refresh @pmmmwh/react-refresh-webpack-plugin
  3. react관련 ( babel ): npm i -D webpack wepack-cli babel-loader @babel/preset-env @babel/core @babel/preset-react

• webpack.config.js 파일

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

module.exports = {
  // 웹펙 시작 모드 설정
  mode: "development",

  // 디버깅을 위한 설정 배포 시 eval
  devtool: "source-map",

  // 경로 및 확장자 설정
  resolve: {
    extensions: [".jsx", ".js"],
    alias: {
      components: path.resolve(__dirname, "src/components"),
      util: path.resolve(__dirname, "src/util"),
    },
  },

  // 진입점 설정
  entry: {
    app: "./index.js",
  },

  // 빌드 결과물 위치 지정
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },

  // 로더 설정
  module: {
    rules: [
      // jsx 해석을 위한 babel로더 설정
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          // @babel/preset-env는 브라우저 환경에 맞게 알아서 바벨 설정을 해줌
          // @babel/preset-react는 jsx 지원
          presets: ["@babel/preset-env", "@babel/preset-react"],
          // dev server을 위한 설정
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },

  // 플러그인 설정
  plugins: [new HtmlWebpackPlugin({ title: "bluegram" }), new RefreshWebpackPlugin()],

  // 데브서버 설정
  devServer: {
    // 번들링한 결과물을 저장할 위치 ( 메모리상 )
    devMiddleware: {
      publicPath: "/dist",
    },
    // 정적 파일들의 위치 지정
    static: {
      // 내 컴퓨터에서 공유할 파일들이 있는 경로
      directory: path.resolve(__dirname, "public"),
      // 브라우저상에서 접근할 경로
      publicPath: "/",
      // 정적 파일 수정시 페이지 새로고침 여부
      watch: true,
      // index 파일 없으면 브라우저에서 폴더를 보여줄지 여부
      serveIndex: true,
    },
    hot: true,
    port: 8080,
  },
};

2. eslint/prettier

• 설치할 것
  npm i -D eslint eslint-plugin-react eslint-plugin-hooks eslint-plugin-import eslint-config-prettier eslint-plugin-prettier
  

• prettier는 json으로 만든 이유는 js로 만들면 vscode에서 자동완성 지원이 안돼서입니다.

• .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  extends: [
    // eslint와 prettier가 충돌나는 부분 비활성화 ( eslint-config-prettier )
    "prettier",
  ],
  plugins: [
    // prettier 규칙을 eslint에 적용시키게 해줌 ( eslint-plugin-prettier )
    "prettier",

    // ES2015의 import/export 구문 지원 ( eslint-plugin-import )
    "import",

    // React관련 eslint 설정 지원 ( eslint-plugin-react )
    "react",
  ],
  rules: {
    // prettier 규칙을 어기면 error 발생
    "prettier/prettier": ["error"],
  },
};

• .prettierrc

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}