프로젝트 시작하기.md

프로젝트 시작하기

[TOC]

---

• https://github.com/enaqx/awesome-react
• https://github.com/dustinspecker/awesome-eslint

01. 개발 환경

필수요소

• 텍스트 편집기
• 터미널
• 자바 스크립트 엔진 -> Node.js
• 패키지 설치 -> npm
• DB -> mongodb
• api -> GraphQL
• 버전 관리 -> git
• 리액트 네이티브 -> expo
• 번들러 -> parcel
• prettier
• ESLint
• nodemon
• .env

ESLint

• 자바스크립트 정적 코드 분석 도구
• 규칙을 정하여 문제가 되는 패턴을 검출

eslint 설치

1. 설치: npm install eslint --save-dev
2. eslintrc.json파일 생성: `npx eslint --init``

• eslintrc.json파일: eslint 설정 작성
• eslintignore파일: eslint가 무시할 디렉토리, 파일 목록 작성

eslint 플러그인

• npm i eslint-plugin-react-hooks --save-dev: 리액트 훅스 규칙 적용 https://www.npmjs.com/package/eslint-plugin-react-hooks

//eslintrc.json
...
"plugins": [
        "react-hooks"
    ],
"rules": {
        "react-hooks/rules-of-hooks": "error",
    	"react-hooks/exhaustive-deps": "warn"
    }
...

• npm install eslint --save-dev: 접근성 규칙 적용 https://www.npmjs.com/package/eslint-plugin-jsx-a11y

//eslintrc.json
"extends": [
        "plugin:jsx-a11y/recommended"
    ],
"plugins": ["jsx-a11y"]

padding-line-between-statements: 리턴문 바로 윗줄을 공백으로

{
  "extends": [
...
  ],
  "plugins": 
    "rules": {
      "padding-line-between-statements": [
        "error",
        { "blankLine": "always", "prev":"*", "next":"return"}
      ],
        ...
    }
}

Prettier

1. 설치: npm install --save-dev --save-exact prettier

• .prettierrc.json: 설정 파일
• .prettierignore: Prettier가 무시할 파일 목록
• Prettier 옵션에 대한 설명 https://prettier.io/docs/en/options.html

//.prettierrc.json
{
    "semi": true,
    "trailingComma": none,
    "singleQuote": false,
    "printWidth": 80
}

VSCode에서 사용하기: https://github.com/prettier/prettier-vscode

WebStorm에서 사용하기: https://prettier.io/docs/en/webstorm.html

ESLint와 Prettier 통합

• npm i eslint-config-prettier eslint-plugin-prettier --save-dev

• 권장 사양으로 .eslintrc.json 수정 https://www.npmjs.com/package/eslint-plugin-prettier

  //.eslintrc.json
  {
    "extends": ["prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error",
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off"
    }
  }

• 특정 폴더 내 파일 형식화 prettier --write "src/*.js"

PropTypes

• 설치: npm install prop-types --save-dev https://www.npmjs.com/package/prop-types

• App.propTypes = {
  	name: PropTypes.string.isRequired,
  	age: PropTypes.number.isRequired,
  };