[#1] React Base Project 설정 (eslint / prettier)

 React 프로젝트를 경험해봤지만 프로젝트 기본 틀 자체를 만들고 시작해 본적은 없는 것 같아서 이번 기회에 처음부터 만들어 보고자 좋은 기회가 생겼다. 세세한 module 핸들링에는 eject 도 필요하고 적합하지 않다고 하는 사람들도 있지만 mini project 자체가 그렇게 세세한 module 핸들링을 필요로 할거 같진 않아서 일단 create-react-app 을 이용해 보기로 했다.

1. create-react-app Setup 

npm install -g create-react-app

create-react-app wds-client

해당 module을 글로벌로 활용하기 위해 -g 옵셥을 주어서 설치 했다. 설치된 후에는 우리가 작업 할 프로젝트 이름을 주어 react 기본을 생성 했다. react 기본 화면까지 잘 render 된다 

https://reactjs.org/docs/create-a-new-react-app.html

Create a New React App – React

 

2. eslint Setup

사실 react 로 프로젝트를 해보기 전까지는 이 모듈에 대해서 잘 알지 못했다. 하지만 프로젝트를 진행해보니 정말 필수 불가결하다고 생각이 되었다. 이번 프로젝트에도 여러 개발자간의 협업간 실수를 줄이기 위해 반드시 추가 하기로 한다.

npm install -g eslint

eslint 는 어떠한 룰셋에 의해 우리가 개발한 코드를 체크하도록 할 것인지 룰셋 설정이 필요하다. 물론 원하시는 분들은 모든 eslint 룰셋을 참조하여 개개의 룰셋을 넣어주어도 된다. 하지만 우리는 기본적으로 많이들 활용하는 airbnb 룰셋을 활용하려고 한다.

npm install --save-dev eslint-config-airbnb

 

airbnb 룰셋을 셋팅하기 위해 모듈을 설치하여 준다. eslint 관련된 설정은 .eslintrc.js 라는 파일을 프로젝트 root에 생성해줌으로써 구체적으로 룰셋 및 각종 config 설정을 가능하게 해준다.

module.exports = {
   ...
    "extends": ["react-app", "prettier", "airbnb"],
   ...
    "rules": {
        "prettier/prettier": ["error"],
        "react/jsx-filename-extension": 0,
        "react/jsx-one-expression-per-lint": 0,
        "linebreak-style": 0,
        "react/prefer-stateless-function": 0,
        "object-curly-newline": 0,
        "import/no-unresolved": 0
    }
};

위에 보는 것과 같이 "airbnb" 룰셋을 적용시켜놓고 우리 프로젝트에서 불필요하다고 생각하는 ruleset은 0 값을 주어 해제 할 수 있다. 참고 바란다.

https://eslint.org/

ESLint - Pluggable JavaScript linter

3. prettier Setup

 개발을 진행하다보면 저마다 개발 스타일도 다르고 줄바꿈부터 object 선언, 값할당 등 코딩 스타일도 매우 다름을 많이 느낀다. 프로젝트를 진행 하면서 prettier는 협업을 위해서는 정말 좋다고 개인적으로 생각한다. 해당 모듈은 코드를 정리하는 룰셋을 일원화 하여 가져갈 수 있도록 도와준다. 때문에 eslint 에서 체크된 부분을 수정함에 있어서 다시 prettier 코드 정리 룰에 맞추어서 정리할 수 있어 둘 사이에 매우 밀접하게 활용하기가 좋은 것 같다.

npm - i --save-dev prettier

prettier 모듈 역시 프로젝트 환경에 맞추어서 코드 정리 룰을 지정할 수 있다. 우리 프로젝트는 우선 필요해 보이는 룰셋만 기본적으로 지정하여 개발자들간에 코드 정리를 맞추려고 한다.

module.exports = {
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  arrowParens: 'avoid',
  printWidth: 100,
};

prettier 에 대한 설정은 .prettierrc 파일을 생성하여 변경하고자 하는 config 설정을 줄 수 있다. tab 크기를 얼마로 할지, 싱글 쿼트를 쓰도록 할지, 한 라인에 몇자를 코딩하도록 할지 등 다양한 룰셋을 활용하여 적용 할 수 있다.

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

앞서서 설명한 eslint 에서 체크된 부분을 prettier 룰셋 기반으로 fix 할 수 있도록 위의 모듈들을 같이 설치 및 사용하면 좋다.

https://prettier.io/

Prettier · Opinionated Code Formatter