<aside> 📌

</aside>

📜eslint 재정비

이전에 코딩 컨벤션은 ESLint 설정만 해두고 문서화는 해두지 않고 진행했다. husky를 이용하여 커밋이 되기 전에 eslint 검사를 하도록 설정을 해두었기 때문에 아마 eslint에 설정된 것들은 다 반영이 됐을 것이다.

근데 eslint 설정을 초기에는 잘 몰라서 제대로 안 해두었더니 중간중간 설정이 추가되기도 했다. 이런 것을 보면 지금 리팩토링 과정에서 다시 한 번 코딩 컨벤션을 확인하고 넘어가면 더 좋겠다 싶어서 정리를 하기로 했다.

🐣기존 eslint 설정

루트 디렉토리에는 eslint 설정 파일이 없고, app 디렉토리 내부에 있는 각 서비스마다 다르게 설정되어 있다. 이렇게 한 이유는 초기 설정을 할 때 프론트엔드는 React를 사용하고, 백엔드는 Nest.js를 사용하기 때문에 eslint는 겹치는 부분이 많지 않을 것이라고 생각하여 공통 eslint 파일을 만들지 않았던 것이다.

그렇기 때문에 프론트엔드 디렉토리인 app/client 내부의 eslint 설정 파일만 확인하면 된다.

여기에 좀 더 추가적으로 필요한 설정을 알아보고 추가한 뒤에 다시 ESLint 검사를 해서 코딩 컨벤션을 맞춰보려고 한다.

어떤 설정이 추가되어야할까?

https://eslint.org/docs/latest/rules/

☝️이게 eslint의 공식문서에서 사용할 수 있는 rule들을 정리해놓은 것인데 뭐가 많다….이걸 하나하나 들여다보고 선택해서 만들기보다는 역시 이번에도 잘된 예시를 찾아보자.

Airbnb의 ESLint

https://github.com/apple77y/javascript/tree/master/react ⇒ Airbnb의 React/JSX Style Guide 한글 번역

찾아보니 Airbnb의 스타일 가이드를 가장 많이 참고하는 것 같았다.

Airbnb 스타일 가이드 특징

좀 더 알아보니 특징도 우리 프로젝트에 적용하기에 충분히 장점이 있어보여서 이걸 참고하기로 결정했다.