Frontend setup

[wogns3623]

프론트엔드 셋업 과정

[wogns3623]

Todo List

• SSR

Done

Create react project with typescript

yarn create react-app frontend --template typescript

Auto linting when commit code

• Add lint-staged to lint staged files and husky to bind linting script with git commit command

  yarn add --dev lint-staged husky

• Add auto lint check in package.json

  "lint-staged": {
  "*.js": [
  "eslint --fix",
  "git add"
  ]
  },
  husky": {
  hooks": {
  "pre-commit": "lint-staged"
  }
  }

Auto prettier

• Add prettier to unify code style and some necessary packages to integration with ESLint

  yarn add --dev prettier
  yarn add --dev eslint-config-prettier eslint-plugin-prettier

• Add prettier setting in package.json

  "prettier": {
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5"
  }

• Modify ESLint setting in package.json

  "eslintConfig": {
  "extends": [
  "react-app",
  "react-app/jest",
  "prettier"
  ],
  "plugins": [
  "prettier"
  ],
  "rules": {
  "prettier/prettier": [
    "error"
  ]
  }
  }

• Add .prettierignore

  /node_modules
  yarn.lock

ESLint plugin for react hooks

yarn add --dev eslint-plugin-react-hooks

• Modify .eslintrc.json

  "extends": [
  // ...
  "plugin:react-hooks/recommended"
  ]

Setting absolute & alias path

• Add base root url in tsconfig.json to use absolute path

  {
  "compilerOptions": {
  "baseUrl": "src"
  }
  }

• Add react-app-rewired package to modify webpack.config.js without eject This isn't working in CRA 4.*! yarn add --dev react-app-rewired

• Instead, Use CRACO to override config

  yarn add @craco/craco
  yarn add --dev craco-alias

• Create tsconfig.paths.json to setting path

  {
  "compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "~/*": ["./*"],
    "@components/*": ["components/*"],
    "@pages/*": ["pages/*"],
    "@styles/*": ["styles/*"]
  }
  }
  }

• Add "extends" option on the top row in tsconfig.json to attach path config

  {
  "extends": "./tsconfig.paths.json",
  "compilerOptions": { ... }
  }

• Finally, create craco.config.js to override webpack config

  
  const CracoAlias = require("craco-alias");

module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", // as you know, CRA doesn't allow to modify tsconfig's compilerOptions // so you should create a separate JSON file and extend tsconfig.json from it // and then just specify its path here: tsConfigPath: "tsconfig.paths.json", }, }, ], };