[초기세팅] Husky·Prettier·ESLint 설정

[전체 흐름]

git commit 입력
    ↓
Husky가 가로챔
    ↓
lint-staged 실행 (변경된 파일만 대상)
    ↓
Prettier → 코드 포맷 자동 정리
ESLint   → 코드 규칙 위반 자동 수정
    ↓
문제 없으면 커밋 완료 / 있으면 차단

 

[Husky가 뭘까]

 

Git에는 특정 시점에 자동으로 스크립트를 실행할 수 있는 기능인 훅!이 있다. 

pre-commit 훅 = 커밋 직전에 실행 

Husky는 이 Git 훅을 프로젝트 코드로 관리할 수 있게 한다. 

pnpm install만 하면 자동으로 훅 등록 !

☆ Husky는 Git의 Hook을 프로젝트에 설정해 커밋이나 푸시 전에 원하는 작업을 자동으로 실행하는 도구이다.

 

[lint-staged가 뭘까]

git add한 파일들에만 lint를 돌린다. 

= 즉 내가 수정한 파일만 검사를 하는 것.

 

[Prettier랑 EsLint 역할 차이]

• Prettier: 포맷 담당. 들여쓰기, 따옴표, 세미콜론 같은 "코드 생김새"를 통일해줌. 자동으로 고쳐줌(--write).
• ESLint: 규칙 담당. any 금지, arrow function 강제, import 순서 같은 "코드 작성 방식"을 검사함. 고칠 수 있는 건 자동 수정(--fix), 아닌 건 에러로 차단.

동시에 실행하면 섞이니까 prettier → eslint 순서로 순차 실행하도록 설정함. 

 

[App Router 예약 파일 예외]

// 일반 컴포넌트
export const Button = () => { ... }

 

평소에는 컴포넌트를 화살표 함수로 강제하는데 

Next.js App Router의 page.tsx, layout.tsx 같은 예약 파일은

Next.js 표준이 export default function Page()임. 

ESLint가 화살표 함수만 허용하도록 강제하면 충돌이 나서 예약 파일들에만 예외 둠. 

 

                                      언제                                     어디서                                     우회 가능 여부

Husky	커밋할 때	내 컴퓨터	--no-verify로 가능
CI (#23)	PR 올릴 때	GitHub 서버	불가능

Husky는 git commit --no-verify로 뚫을 수 있어서, PR 단계에서 CI가 한 번 더 잡아주는 구조.