React와 뗄래야 뗄 수 없는 Eslint에 대해 알아봅시다.
ESLint란?
위키백과에 따르면 lint 혹은 linter는 프로그래밍 내부의 에러나 버그를 잡아내는 툴을 말한다고 하네요. 영어사전에 찾아보니 lint가 보푸라기라는 뜻이 있던데! 보풀 하나 없이 깨끗한 코드를 만들어내겠다!! 저는 이런 의미로 받아들였습니다.ㅋㅋ
사실 조사하기 전까지 ESLint가 Prettier의 React 버전이라고 생각했는데.. 완전 잘못 짚었네요 ㅠㅠ (조사해보라고 숙제 내주신 위코드 2기 권진세님 감사합니다~!)
여튼 기본적으로 EsLint는 코드를 검사해서 잘못된 부분들을 짚어주기도 하고, Prettier와 함께 사용하면 EsLint 규칙에 맞게 코드를 쫙~ 정리해줍니다!
ESLint의 규칙은 기본적으로 React에 내장되어 있다는데.. 우리가 정해진 규칙에 맞게 코드를 쓰고 있는건지, 추가적인 에러가 또 있는지는 확인을 못한다.. 그래서 CRA에 직접 ESLint를 설치해줘야 합니다~ (설치 방법은 yeri-kim님의 블로그를 참고했습니다. 세상에서 젤 정확한 설치방법이니까 출처의 첫 줄 블로그로 이동 고고!)
ctrl+shift+x를 눌러서 VScode 내부에서 ESLint 확장팩을 설치해주세요~- 현재 내 프로젝트의 root파일 안에
.eslintrc.json파일 추가 후,
{
"extends": "react-app"
}위의 내용을 써줍니다!
- Prettier 깔기. 저는 이미 설치해서 패쓰~
npm i prettier eslint-config-prettier eslint-plugin-prettier -D이 작업을 통해 prettier와 eslint를 연결해줍니다.- 2번의 코드를 업데이트 해주세요~
{
"extends": ["react-app", "plugin:prettier/recommended"]
}—> 저는 일단 여기까지 해보고 있습니다.. 지난번에 ESLint 깔다가 localhost가 안 켜지는 불상사가 있었기 때문에.. 별로 안 중요한 CRA에 ESLint를 다시 깔아보고 있습니다!
—> 휴… 다행히 아무 문제 없어서 다시 6번부터 이어가겠습니다!
- VScode의 setting에 들어가서 우측 상단 {}를 눌러주세요. 아래 캡쳐에서 종이에 화살표 있는 아이콘을 눌러주세요~
- 원래 있던 객체 파일안에 아래의 프로퍼티를 추가해주세요! 객체니까 쉼표에 유의해주세요~ 저는 이날 너무 멘붕이라 그런게 1도 안 보였어요 ㅠㅠ
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"- 끝~ 여태 썼던 코드를 확인해보면 희한한 모양으로 바뀌어 있을거에요.
이런식으로 뭔가 코드가 얇아진 느낌적인 느낌…? 아직 이 스타일이 넘 어색하고 이상하지만.. 대세를 따라서 Airbnb 스타일로 쓰면 모두에게 읽기 편한 코드가 되겠죠?
에러에 대처하는 자세..
stackoverflow 누가 만든 사이튼지 참.. 솔루션 맛집이네요! 어제 참 이런저런 에러가 떠서 멘붕이였는데.. stackoverflow에서 다 알아냈어요.
진짜 이런 저런 방법을 다 시도해봤어요.. package.json을 삭제 해보고, node module도 삭제해보고, npm과 yarn도 삭제하고 재설치하고… 삽질 오브 삽질을 했습니다!
ESLint를 설치하는 다양한 방법이 있는데.. 제발! 꼭! 하나만 보고 쓰세요!!!!
제가 하나의 포스팅 대충 보고 안되니까 다른 포스팅도 보다가 망한 케이스입니다. 하나의 포스팅을 정독 또 정독 하세요! 그리고 -g는 갖다 버리세요!! global로 깔면 오류가 진짜 진짜 잘 나는것 같아요. 제가 우분투 유저라서 그런줄 알았는데 다 그냥 제 탓입니다 ㅋㅋㅋㅋㅋㅋㅋ
여튼.. 다음번에 기회가 된다면 sass에 대해서도 쓰고 싶네요~!