개발 공부를 하다보면 평소에 사소하게 여기고 대충했던 일들을 다시끔 되돌아볼 때가 많다.
예를 들자면,
- 글 제목 짓기 / 별명 짓기
- 글이나 워드 작성시 깔끔히 정렬해서 쓰기 / 줄 맞추기
- 주제 / 태마별로 폴더, 파일 정리하기
위 세가지의 일만 보더라도 한가지 공통된 점을 가지고 있다.
"나만 알아볼 수 있다면 문제될 것이 없다."
라는 점이다.
그렇다. 혼자 할 때는 아무런 문제가 되지 않는 일들이다.
하지만 아쉽게도
개발자들은 대부분 혼자서 일을 하지 않는다.
자신이 짠 코드들을 공유하며, 다른 개발자들이 짠 코드들을 들을 들여다 볼 기회가 수도 없이 많을 것 이다.
하지만 코드를 짜본지 얼마 안된 초보들 포함, 이미 코드에 익숙해진 개발자들 조차 남이 짠 코드를 한번에 보고 전부 파악하기란 쉽지 않을 것이다.
마찬가지로 코드를 작성할 때 또한 실수 하지 않으리라는 보장은 없다.
이럴 때 (코드를 짜거나 / 들여다 볼 때) 실수들을 줄이고 좀 더 쉽게 코드를 보여주도록 도와주는 좋은 도구들이 있는데 그게 바로
ESLint
Prettier
이다.
다양한 소스 코드 편집기가 있겠지만, 나는 VS Code를 사용하므로, VS Code를 쓰는 입장으로써 정리하자면, 쓰기 매우 편한 도구들이며 확장(Extension)기능을 통해 쉽게 설치 할 수 있다.
현재 기준 이미 사용자도 2천만이 넘어가기 때문에 사실 개발을 하고 있는 사람이라면 대부분 쓴다고 봐도 무방할 정도이다.
주요 기능은
ESLint 같은 경우
이전에 JS와 같은 느슨한 언어는 코드에러가 나기 쉽다고 정리했었는데, 이와 같은 코드에러를 코드 실행 시키기 전에 먼저 찾아주는 기능이 ESLint이다. 물론 모든 에러를 다 잡아주진 않지만, 코딩 컨벤션에 위배되는 코드(잘못 지어진 코드)나 안티 패턴을 자동으로 검출해서 띄워 준다.
어떻게 뜨는지는 Youtube나 구글에 이미지로 검색해보면 나와있으니 확인해보자
https://www.youtube.com/watch?v=KCHg9f2B1I8
ESLint를 써야하는 이유에 대해 자세히 설명해주고
에러가 송출되는 것도 볼 수 있다.
ESLint가 실수를 잡아주는 역할이 였다면
Prettier 같은 경우
말 그대로 코드를 포맷팅해주는 기능을 한다.
또한 일관적인 코드 스타일을 유지할 수 있게 도와준다.
(즉 코드를 규칙에 맞게 끔 자동 정렬 시켜주고, 속성에 따라 자동으로 색깔을 부여해준다)
아까도 얘기했지만 코딩에서의 가독성이란 혼자 일 할 때는 그렇게 크게 도움이 되지 않지만, 여러 사람과 협업을 하게 될 때에는 매우 중요하게 작용된다.
ESLint와 Prettier 이외에도 많은 도구들이 존재하지만,
개발을 처음 시작하시는 분들에게 어딜가나 추천해주는 최소한의 도구들이 저 두 개 이니, 도구들 따위에 도움을 받지 않겠다는 이상한 고집과 억지 부리지 말고(내 얘기임)
유용하게 써보도록 하자.
