client 초기 설정

CRA(create-react-app)

사용 이유

// webpack을 따로 설정하지 않고 CRA를 사용하는 것에 대한 이유.

1. 이미 내부에 많은 기능을 포함한 package들이 설치되어있음

eject 명령어로 확인가능하다. CRA2가 나오면서 왠만한 기능을 지원한다.

yarn eject
or
npm run eject

아래는 CRA 프로젝트 생성 시 의존성을 갖는 패키지 목록이다.

//package.js 
"dependencies": {
    "@babel/core": "7.6.0",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "^2.2.0",
    "@typescript-eslint/parser": "^2.2.0",
    "babel-eslint": "10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.4",
    "babel-preset-react-app": "^9.0.2",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.2",
    "eslint-loader": "3.0.2",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.0",
    "mini-css-extract-plugin": "0.8.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.4",
    "react-dev-utils": "^9.1.0",
    "react-dom": "^16.12.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.4",
    "url-loader": "2.1.0",
    "webpack": "4.41.0",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.1.1",
    "workbox-webpack-plugin": "4.3.1"
  },

2. 커스텀 가능

만약 커스텀이 필요하다면 eject를 통해 설정을 변경하거나 react-app-rewired와 같은 패키지를 사용하여 확장할 수 있다.

설치

sudo yarn global add create-react-app --prefix /usr/local
or
sudo npm install create-react-app -g

실행

create-react-app client
cd client
rm -rf node_modules yarn.lock
cd ..
yarn install

우리 프로젝트는 root에서 모듈을 관리하기 때문에 설치된 모듈을 지워준다. yarn install 이전에 workspaces가 설정되있어야한다.

eslint

1. config 파일 생성

VScode의 팔레트에서 Create eslint config 생성 후 옵션을 입력한다. 이때, 마지막의 npm 패키지 설치는 하지않는다.(root에서 관리하기 위해)

2. airbnb config 패키지 설치

airbnb style guide를 사용하기 위해 아래의 패키지를 설치한다. 연관된 패키지도 설치하라고 경고 메시지 나오는데 cra로 이미 설치된 패키지들이다.

yarn workspace client add eslint-config-airbnb

3. 기본적인 rule 추가

// .eslintrc.json
{
  ...
  "rules": {
      "react/jsx-filename-extension": [
        1,
        {
          "extensions": [".js", ".jsx"]
        }
      ]
    }
  ...
}

참고: airbnb style guide rules