xction-dev / xflix

리액트 & Next.js 공부하자
4 stars 0 forks source link

[ANNOUNCEMENT] ESLint & Prettier #25

Open designDefined opened 1 year ago

designDefined commented 1 year ago

코드 분석 / 스타일 도구

코드 정적 분석이란, 소스 코드 실행 전에(정적), 코드에서 발생할 수 있는 문제를 찾아서 알려 주는 작업입니다. 자바스크립트 같은 경우는 ESLint라는 툴을 가장 많이 사용합니다(타입스크립트도 이와 비슷하게, 정적 타입 언어죠. ESLint와 함께 많이 쓰는 편입니다.)

코드 스타일 포매터란, 코드의 작동에 영향을 주지는 않지만 가독성 있게 보기 좋은 방식으로 서식을 편집해주는 작업입니다. 자바스크립트와 같이 들여쓰기나 줄바꿈에 큰 제한이 없는 언어의 경우, 그냥 쓰다 보면 사람들마다 서식이 다르거나, 심지어 내가 작업한 코드 사이에서도 스타일이 중구난방인 경우가 생깁니다. 이 경우 보기에 어려울 뿐더러 자칫하면 불필요한 git diff가 마구 생기는 경우도 있습니다. 자바스크립트에서는 이러한 포매터로 Prettier를 주로 사용합니다.

둘은 협업에 있어서 매우 중요한 작업입니다. 여러 명이 쓴 코드도 한 명이 쓴 것처럼 보기 좋게 만들어주고, 이로 인해 코드를 읽을 때 드는 시간과 피로를 크게 단축시켜주죠. 또한 스타일을 바꾸는 과정에서 생기는 사소한 git diff들을 줄여주어 PR 리뷰도 훨씬 수월하게 만듭니다.

따라서 코드 분석 도구와 포매터의 설정은 합의 후에 모두 git으로 관리! 하여 사람들 간의 차이를 없게 하는 게 중요합니다!

ESLint

Prettier

참고 / 출처