React[Creating Project] - Prettier

01.What is Prettier?

• 파일을 저장할때마다 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 Node.js 패키지
• 일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴 입니다.
• 코드 품질을 위해 사용하는 ESLint와는 다르게 사용자의 옵션에 따라 코드 스타일을 이쁘게 맞춰줍니다.

02.패키지 설치

$ mkdir prettier-test
$ cd prettier-test
$ npm init -y
$ npm i prettier -D    // 패키지 설치

03.index.js & prettierrc.json

index.js

• index.js 파일을 생성하여 prettier를 테스트 합니다.

console.log('Hello')

$ npx prettier index.js

• 출력 결과: console.log("Hello");
• 실제 소스 코드에는 반영되지 않지만 prettier에서는 해당 코드를 쌍 따음표("")로 묶어주고 마지막에 세미콜론(;)으로 꾸며주는 포멧팅을 하겠다는 의미입니다.

$ npx prettier index.js --write

• 만약 prettier를 소스 코드에 반영하고 싶다면 해당 명령어를 터미널에 입력하면 됩니다.

prettierrc.json

{
  "singleQuote": true
}

• prettierrc.json 파일을 새로 생성하여 해당 소스코드 처럼 원하는 prettier를 직접 설정 해줄 수 있습니다.
• 해당 소스는 싱글 따음표로 사용하겠다는 옵션을 직접 설정한 예시 이며 이는 index.js 소스 코드에 반영됩니다.

04.EsLint와 다른 점

• EsLint 는 문법에러를 잡아주거나 더 좋은 문법을 사용하게 에러 표기 를 강제해주는 툴 🪓
• Prettier 는 코드의 퀄리티가 아닌 스타일 교정 ✨
• EsLint 는 적용하게 된다면 코딩의 결과가 바뀌기도 하지만 Prettier 는 단순히 스타일 교정해주기에 결과에 영향은 없다.

05.Prettier와 ESLint를 도입해야하는 배경 👽

• 프로젝트를 유지보수 하는데 투자되는 비용을 최소화하기 위해 통일된 코드 작성법 제시 💁🏻‍♀️
• 포맷팅과 관련된 부분에 대한 논쟁을 없애서 각 프로젝트들의 개발 생산성을 높임 📈
• 인계자 또는 최초 개발자가 아닌 사람도 코드를 빠르고 정확하게 이해 가능 👩🏻‍🎓

06.세줄요약

• 일관적인 코딩 스타일을 유지할 수 있는 Code Fomatter
• 코드의 퀄리티가 아닌 스타일을 수정하며 결과에 영향을 끼치지않음
• 코드를 빠르고 정확하게 이해 가능