eslint + prettier

(eslint + prettier) + husky 환경을 구축중이다.

간단히 정리하면,

• eslint: 코드 포맷 및 문법적 개선포인트까지 지적
• prettier: 단순 코드 포맷만 지적
• husky: git hook 을 잡아주는 패키지
  가 된다.

(eslint + prettier) 과정을 들여다보면,
eslint와 prettier는 별개로 동작한다.

따라서 이 둘이 같은 내용을 지적하다가 충돌이 발생할 수 있다.
이러한 충돌을 막기 위해eslint의 규칙에 prettier에서 사용하는 포맷팅 규칙을 추가하여 충돌을 회피할 수 있다.

자세한 내용은 여기를 참고하자

진행하면서 발생한 에러

'prettier/prettier': context.getPhysicalFilename is not a function

eslint 와 최신 eslint-plugin-prettier 패키지간의 버전 호환문제다.
eslint를 최신버전으로 올려주자 (참고문서)

> npm update eslint

src/.eslintrc.json » eslint-config-airbnb » /home/project/node_modules/eslint-config-airbnb/rules/react.js:
Configuration for rule "react/function-component-definition" is invalid:
Value ["function-declaration","function-expression"] should be equal to one of the allowed values.

eslint의 react 플러그인의 규칙과 airbnb 규칙간의 충돌이 발생한듯 하다.
충돌이 발생하지 않는 버전으로 수정해주자. (참고문서)

.eslintrc.json

"rules": {
    "react/function-component-definition": [
        2,
        {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
        }
    ]
}

packege.json

"devDependencies": {
    "eslint-config-airbnb": "^18.2.1", // downgraded version from ^19.0.4
  }

CRA가 아닌 React 프로젝트에서 환경변수 사용

dotenv 패키지는 node환경에서만 환경변수 파일을 읽어주는 패키지다.
react 코드는 node가 아닌 브라우저에서 동작하므로 웹팩에서 별도의 설정을 해주어야한다.

환경변수파일을 react에서 읽을 수 있도록 해주는 다양한 웹팩플러그인들이 있지만, 가장 간단한 방법을 기록한다. (참고문서)

> node install dotenv-webpack --save-dev

// webpack.config.js

const Dotenv = require('dotenv-webpack');
module.exports = {
  // ...
  plugins: [
    // ...
    new Dotenv(),
    // ...
  ]
  // ...
}