<div id="readability-page-1" class="page"><div><h2 id="eslint--prettier">eslint + prettier</h2>
(<code>eslint</code> + <code>prettier</code>) + <code>husky</code> 환경을 구축중이다.
간단히 정리하면,
<ul>
<li><code>eslint</code>: 코드 포맷 및 문법적 개선포인트까지 지적</li>
<li><code>prettier</code>: 단순 코드 포맷만 지적</li>
<li><code>husky</code>: git hook 을 잡아주는 패키지 
가 된다.</li>
</ul>
(<code>eslint</code> + <code>prettier</code>) 과정을 들여다보면, 
<code>eslint</code>와 <code>prettier</code>는 별개로 동작한다.
따라서 이 둘이 같은 내용을 지적하다가 충돌이 발생할 수 있다. 
이러한 충돌을 막기 위해<code>eslint</code>의 규칙에 <code>prettier에서 사용하는 포맷팅 규칙</code>을 추가하여 충돌을 회피할 수 있다.
자세한 내용은 <a href="https://velog.io/@recordboy/ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">여기</a>를 참고하자
<h2 id="진행하면서-발생한-에러">진행하면서 발생한 에러</h2>
<blockquote>
'prettier/prettier': context.getPhysicalFilename is not a function
</blockquote>
<code>eslint</code> 와 최신 <code>eslint-plugin-prettier</code> 패키지간의 버전 호환문제다. 
eslint를 최신버전으로 올려주자 (<a href="https://velog.io/@qhgus/React-ESLint-prettier-%EC%84%B8%ED%8C%85-%ED%9B%84-%EC%97%90%EB%9F%ACcontext.getPhysicalFilename-is-not-a-function">참고문서</a>)
<pre><code>&gt; npm update eslint</code></pre>
<hr>
<blockquote>
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.
</blockquote>
eslint의 <code>react</code> 플러그인의 규칙과 <code>airbnb</code> 규칙간의 충돌이 발생한듯 하다. 
충돌이 발생하지 않는 버전으로 수정해주자. (<a href="https://github.com/facebook/create-react-app/discussions/11864">참고문서</a>)
.eslintrc.json
<pre><code>"rules": {
 "react/function-component-definition": [
 2,
 {
 "namedComponents": "arrow-function",
 "unnamedComponents": "arrow-function"
 }
 ]
}</code></pre>
packege.json
<pre><code>"devDependencies": {
 "eslint-config-airbnb": "^18.2.1", // downgraded version from ^19.0.4
 }</code></pre>
<h2 id="cra가-아닌-react-프로젝트에서-환경변수-사용">CRA가 아닌 React 프로젝트에서 환경변수 사용</h2>
<code>dotenv</code> 패키지는 node환경에서만 환경변수 파일을 읽어주는 패키지다. 
react 코드는 node가 아닌 브라우저에서 동작하므로 웹팩에서 별도의 설정을 해주어야한다.
환경변수파일을 react에서 읽을 수 있도록 해주는 다양한 웹팩플러그인들이 있지만, 가장 간단한 방법을 기록한다. (<a href="https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">참고문서</a>)
<pre><code>&gt; node install dotenv-webpack --save-dev</code></pre>
<pre><code>// webpack.config.js

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

ginameee.log

Jangchun Lee

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(),
    // ...
  ]
  // ...
}

2022.03.29

댓글