[워다타 프로젝트] 1. 프로젝트 세팅

package.json eslint rule 부분 추가 필요

 

[참고]

airbnb 스타일 가이드

airbnb/javascript

ESLint & Prettier, Airbnb Style Guide로 설정하기

ESLint & Prettier, Airbnb Style Guide로 설정하기

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

---

지금까지 개별적으로 실습했던 내용들을 응용해 협업 프로젝트를 진행한다.

 

1. 사용 라이브러리

 

1. react router dom 

공식문서

용도 : 라우팅

npm install react-router-dom

 

2. redux

공식문서

용도 : flux 디자인 패턴에 의거한 상태관리

npm install react-redux

 

3. axios

공식문서

용도 : api 통신

npm install axios

 

4. react-tabulator

공식문서

용도 : 데이터 테이블

npm install react-tabulator

 

5. material ui

공식문서

용도 : ui

npm install @material-ui/core
npm install @material-ui/lab
npm install @material-ui/icons

 

※ 원칙적으로는 --save 옵션이 있어야 package.json에서 dependency를 관리해주지만 디폴트값으로 들어가 있어서 따로 명시하지 않아도 됨 npm 문서 참고

※ 개발에 필요한 라이브러리는 반드시 -D (--save-dev) 옵션을 명시해 개발용 devDependency에 넣어주자

 

---

2. 스타일 가이드 적용

Eslint 와 prettier 사용 - airbnb 스타일 가이드 적용하기

 

1.vscode 확장 프로그램에서 EsLint 랑 Prettier 설치

 

 

2. eslint-config-airbnb 설치 

설치하기 앞서서

eslint-config-airbnb의 peerdependency(의존성 모듈)들은 다음과 같이 확인 할 수 있다.

npm info "eslint-config-airbnb@latest" peerDependencies

 

 

목록에 있는 의존성 모듈을 함께 설치하려면 다음과 같이 -peerdeps 옵션을 주면 된다.

npx install-peerdeps -D eslint-config-airbnb

 

하지만 create-react-app 의 최신버전으로 react 프로젝트를 생성했다면 eslint를 비롯한 의존성 모듈들이 이미 설치되어있을 것이다.

package-lock.json 파일에서 찾아보면 확인 가능하다.

 

이미 설치가 되어있다면 옵션을 빼고 eslint-config-airbnb만 설치하도록 한다

npx install -D eslint-config-airbnb

 

 

3. eslint에 적용

//package.json
  
  "eslintConfig": {
    "extends": ["react-app", "airbnb"]
  },

 

eslint에 커스텀 설정을 추가하는 방법은 여러가지가 있다.

pacakge.json의 eslintConfig 항목 안에 적어줘도 되고, 프로젝트 최상단에 .eslintrc 파일을 따로 만들어서 작성해도 된다.

 

 

4. rules 추가 - 무시하거나 경고로 처리할 규칙 설정

//package.json
  
  "eslintConfig": {
    "extends": [
	...
    ],
    "rules": {
      "react/prefer-stateless-function": 1,
      "react/jsx-filename-extension": 0, 	
      "react/jsx-one-expression-per-line": 0	
      "react/prop-types": 0,
      "import/no-unresolved": 0,
      "react/jsx-props-no-spreading" : 0
    }
  },

 

에러 대신 경고만 남길 규칙은 1, 아예 무시할 규칙은 0을 준다.

규칙들을 하나하나 살펴보면 다음과 같다

1. react/prefer-stateless-function : state나 메서드가 없는 컴포넌트는 class 대신 function형으로 만들어라
2. react/jsx-filename-extension : jsx 코드를 사용하는 파일은 .jsx 확장자를 사용해야 한다.
3. react/jsx-one-expression-per-line : jsx 표현식은 한 줄에 하나씩만 사용한다.
4. react/prop-types : props의 타입 등을 밝히도록 한다.
5. import/no-unresolved : 모듈을 import 할 때 표준 노드 시스템에서 정의한 방식대로 가져오게 한다.
6. react/jsx-props-no-spreading : 컴포넌트의 props를 스프레드 연산자로 전달 할 수 없게 한다.

 

5번을 추가한 이유는 추후에 나오겠지만 jsconfig 설정을 변경해서 절대경로로 임포트해오는 방식을 사용할 것이기 때문이다. 

 

 

5. env 추가 - 브라우저 내장 객체 조회 활성화 및 기타 설정

//package.json

  "eslintConfig": {
    "extends": [
	...
    ],
    "rules": {
	...
    },
    "env": {
      "browser": true,
      "es6": true,
      "node": true
    }
  },

 

※ eslint 규칙을 아예 무시할 파일은 최상단에 다음을 명시

/* eslint-disable */

 

 

6. prettier 설정

프로젝트 최상단에 .prettierrc 파일 작성.

내용은 prettier 국룰 커스텀

// .prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

 

7. eslint-config-prettier & eslint-plugin-prettier 설치

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

 

 

8. 최종적으로 적용하기 - eslintConfig 의 extends 변경

//package.json


  "eslintConfig": {
    "extends": [
      "airbnb",
      "plugin:prettier/recommended"
    ],
    "rules": {
	...
    },
    "env": {
	...
    }
  },

 

 

9. 에러 해결

여기까지 해서 가이드대로 완벽하게 동작하길 바랐는데 항상 내 마음대로 되지 않는다. 

 

첫번째 문제. prettier not found  

 

이게 무슨 개똥같은 소린가

살다살다 prettier 모듈을 찾을 수 없다는 소리는 첨 들어봄.

분명 vscode extension으로 prettier도 설치해줬고, 혹시나 싶어서 vscode 세팅에서 다음과 같이 설정해 

"editor.defaultFormatter": "esbenp.prettier-vscode"

디폴트 포맷터를 prettier로 설정까지 해줬다. 

 

더 환장하겠는건 아무리 구글링을 해도 이런 경우가 없음ㅋㅋ

eslint-config-prettier가 없다, eslint-plugin-prettier가 없다는 많이 나오는데 prettier가 없다는데요?? 는 왜 없는건가.

 

남들은 vscode 확장 프로그램 설치만으로 되는 것 같은데 대체 나는 왜 이런 문제가 발생...?

슬프지만 어떻게든 해결은 해야 했기 때문에 하라는대로 모듈이 없다니까 설치해줬다.

-E 옵션으로(--save-exact) 버전 와리가리 못하게도 해줌

npm install prettier -D -E

 

 

 

 

 

기억해 둘 스타일 가이드

자꾸 내용이 추가돼서 포스팅 따로 함

kline1103.tistory.com/93

eslint & react 기억해 둘 스타일 가드

 

---

 

3. 프로젝트 최상단 

1. 홈 디렉토리 절대경로 설정 변경

앞서 언급한 모듈 임포트 방식을 커스텀하기 위한 설정이다.

프로젝트의 depth가 깊어질수록 상대경로로 import 하는 방식이 불편해 임의로 홈 디렉토리를 추가해서 절대경로로 임포트를 해올 것이다.

프로젝트 최상단에 jsconfig.json 파일 추가하고 다음의 내용을 작성하면 됨.

//jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "."
    },
    "include": ["."]
}

 

 

4. webpack 커스텀

내용