[튜토리얼] Next.js 프로젝트 시작하기 5편 - 1 (코드 포맷 툴 적용)

프로젝트 진행 틈틈이 프로젝트에 사용하는 여러 툴을 추가해 보고 있다.

기존 프로젝트를 하면서 써봤던 것도 있는데 직접 설정할 기회가 많지는 않았기 때문이다.

 

코드 포맷 툴에는 대표적으로 eslint와 prettier가 있다.

프론트엔드 개발을 하면 거의 모든 프로젝트에서 이 같은 툴을 사용한다.

 

포맷을 맞춰주지 않으면 세미콜론을 넣냐 안 넣었냐나,

띄어쓰기는 몇 개나 들어가냐 하는 사소한 것으로 변경 내역이 표시된다.

이러면 git에서 올릴 때 중요한 변경 내역만 표시하지 못 하게 된다.

 

eslint의 주요 기능은 다음과 같다.

 

• 문법 오류: 정의되지 않은 변수, 미사용 변수, 잘못된 문법 사용 등과 같은 문제를 탐지합니다.

• 베스트 프랙티스: 성능에 영향을 미치는 코드 패턴이나 잘못된 코딩 습관을 경고합니다.

• 코드 품질: 코드 복잡성, 유지보수성을 향상시키기 위한 규칙을 적용합니다.

• 커스텀 규칙 적용: 프로젝트에 맞는 규칙을 설정할 수 있으며, 다양한 플러그인을 통해 추가적인 기능을 확장할 수 있습니다.

• 자동 수정: 일부 문제는 자동으로 수정할 수 있습니다. 예를 들어, 불필요한 세미콜론 제거 등.

 

eslint가 더 다양한 기능으로 사용되고, prettier는 이 중에서 주로 코드 품질, 자동 수정에 집중한 라이브러리라고 보면 된다. 이름 그대로 코드의 스타일링에만 집중하는 Formatter의 역할을 한다.

 

코드 스타일링 관련해 비슷한 기능을 제공하기 때문에 상호 충돌이 발생하는 경우가 생길 수 있어,

다음과 같은 조치가 필요할 수도 있다.

• 보통 ESLint와 Prettier를 동시에 사용할 경우, ESLint의 style rule을 전부 Disabled 한다.
• eslint-config-prettier 패키지의 경우, Prettier와 충돌 가능성이 있는 옵션을 전부 Off 해준다.

일단 내 프로젝트에서는 eslint만 사용하고 prettier는 필요가 생기면 추가하기로 했다.

nextjs 같은 경우는 프로젝트 생성할 때 자동으로 세팅할 수 있기 때문에 따로 설치할 필요는 없다.

 

다만 설정을 수정할 때마다 .eslintrc.json 파일을 건드려 줄 필요가 있다.

내 경우 코드 끝에 세미콜론을 안 쓰는 방향으로 코드를 수정해주고 싶어,

일단 rules 부분에 세미콜론 관련 설정을 추가했다.

{

  "extends": ["next/core-web-vitals", "next/typescript"],

  "rules": {

    "semi": ["error", "never"]

  }

}

 

이렇게 해두면 수십 개 되는 파일에 있는 ; 부분에 빨간 줄이 뜬다.

전체를 일일히 수정하는 건 너무 오래 걸리니 일괄 수정 커맨드를 실행해준다.

 

npx eslint . --fix

 

이렇게만 쳐주면 알아서 전체 파일에 걸린 ;를 삭제해준다.

사소해 보이지만 거의 모든 프로젝트에서 사용되는 보편적이고 편리한 툴이니,

어떤 설정이 들어가나 시간 날 때 틈틈이 살펴 보면 좋다.