본문 바로가기

React

CRA없이 React 프로젝트 구성하기 with Javascript

반응형

1. yarn 설치

yarn init

2. React 설치

yarn add react react-dom

3. Webpack 설치

yarn add -D webpack webpack-cli

 

npx webpack init

 

 

4. Babel 설치

yarn add -D @babel/core @babel/preset-react @babel/preset-env

5. webpack.config.js 수정

devServer: {
    hot: true, //추가
    open: true,
    host: "localhost",
},

...

module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env'], //추가
        },
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: 'asset',
      },
    ],
  },

6. Prettier 설치

yarn add -D prettier

7. .prettierrc 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "endOfLine": "lf"
}

8. eslint 설치 

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier

9. .eslintrc 생성

{
  "plugins": ["prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "ignorePatterns": ["*.config.js"],
  "rules": {
    "prettier/prettier": "error",
  }
}

 

그런데 이렇게 하고나니 eslint가 react 문법을 이해하지 못하는 문제가 생겼다.

 

 

그래서 다음과 같이 해결해줬다.

 

yarn add -D eslint-plugin-react

 

.eslintrc 수정

 

"extends": [
  "eslint:recommended",
  "plugin:prettier/recommended", 
  "plugin:react/recommended" //추가
 ],

10. public 폴더 생성 후, 그 안으로 index.html 옮기기

 

webpack.config.js 수정

 

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

 

resolve: {
  modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  extensions: ['.js', '.jsx'],
},
반응형

'React' 카테고리의 다른 글

클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전  (0) 2021.10.16
useMemo vs useCallback vs React.memo  (0) 2021.08.24
Redux  (0) 2021.06.23
State vs Props  (0) 2021.06.22
Immutable이란?  (0) 2021.06.22