Day-10 Eslint, Prettier

이영주·2022년 5월 20일
0
post-custom-banner

개발을 할 때 혼자 프로젝틀 진행하는 경우는 거의 없다.
여러명이서 협업하며 진행하는 경우가 대부분인데 각각의 규칙과 방식으로 코드를 작성하면 서로 코드를 알아보기가 힘들고 소통이 어려워지게 되어 이를 방지하기 위해 일정한 규칙을 정하게 된다.

코드린터(eslint)

코드린터란 문법에는 어긋나지 않지만 에러로 약속하자고 규칙을 정하는 것을 말한다.

에러가 나게되면 에러 부분에 빨간색 물결줄이 그어지게 되는데 어떤 규칙에서 에러가 나는지 확인해 볼 수 있다.
코드린터의 eslint 규칙으로는 import 순서, ==금지, ===허용 등을 확인해주어 규칙을 통해 통일감을 줄 수 있다.
(eslint 자체에 포메터 기능이 어느 정도 가지고 있다!)

하지만 eslint를 설치하게 되면 내 코드가 거의 빨간색으로 뜨는 것을 볼 수 있는데... 너무 충격받지 말고 신경을 쓰지 않아도 되는 오류는 off를 하기 위해 npx eslint .를 터미널에 작성하여 off 해야할 부분을 찾아서 .eslintrc.js에 작성하면 해결!

코드포메터(prettier)

코드포메터란 코드를 보기 좋고 이쁘게 만들어주는 것을 말한다.

띄어쓰기나 줄바꿈 등에 대해서 자동으로 보기 좋게 만들어 주는데 prettier 규칙을 사용하여 저장시 자동으로 이쁘게 변경이 되는 것을 볼 수 있다.


✍추가 공부!

리팩토링이란 코드의 가독성을 올리고 효율적으로 바꿔주는 작업을 말한다.

erly-exit패턴이란 리팩토링 중에 하나로 실무에서 자주 사용되는 패턴이다.
(if문에서 조건이 참이면 무언가를 실행하는 방식이라면 early-exit 패턴에서는 반대로 거짓일 때를 먼저 실행하는 방식으로 변경된다.)

함수에서의 return은 값을 반환해주기도 하지만 해당함수를 종료시키는 기능이 있다.

profile
= ["꼼꼼한", "프론트엔드 개발자"]
post-custom-banner

0개의 댓글