34일차

🦊

34일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 3. Creating React Project

 

---

 

 

Ch 3. Creating React Project

 

 

https://create-react-app.dev/

Create React App

 

$ npx create-react-app my-app

 

// package.json

{
    "scripts": {
        "start": "react-scripts start", // npm start (개발용)
        "build": "react-scripts build", // npm run build (프로덕션용)
        "test": "react-scripts test", // npm test (테스트용)
        "eject": "react-scripts eject" // npm run eject (꺼냄 => create-react-app 사용X 추천ㄴㄴ)
    },
}

$ npm run build
$ npx serve -s build

 

 

 🔗 ESLint  (React 기본 제공) => The pluggable linting utility for JavaScript and JSX

 

$ npm i eslint -D
$ npx eslint --init
$ npx eslint index.js // eslint 확인
$ npx eslint index.js --fix // eslint 확인 => fix

// .eslintrc.js

module.exports = {
  ...
  rules: {
    semi: ["error", "always"],
  },
};

 

 

 🔗 Prettirer  => An opinionated code formatter

 

https://prettier.io/

Prettier · Opinionated Code Formatter

 

$ npm i prettier -D
$ npx prettier index.js // eslint 확인
$ npx prettier index.js --write // eslint 확인 => fix

// .prettierrc.json

{
  "singleQuote": true
}

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

 

https://github.com/prettier/eslint-config-prettier

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

// eslint-config-prettier

{
    ...
    "eslintConfig": {
        "extends": [
            "react-app",
            "prettier"
        ]
    }
}

 

 

 🔗 husky  => Git hooks made easy

 

https://github.com/typicode/husky

GitHub - typicode/husky: Git hooks made easy 🐶 woof!

 

$ npm i husky -D
$ npx husky install
$ npx husky add .husky/pre-commit "npm test"
$ git add -A
$ git commit -m "husky test"

// package.json

{
  "scripts": {
    "prepare": "husky install",
    ...
  },
}

 

 

 🔗 lint-staged  => Run linters on git staged files

 

$ npm i husky -D
$ npx husky install
$ npx husky add .husky/pre-commit "npx lint-staged"
$ npx i lint-staged -D

// package.json

{
  "scripts": {
    "prepare": "husky install",
    ...
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
  ...
}