Next.js 블로그 템플릿 뜯어보기

여러 사람들의 기술블로그를 돌아다니던 중 Next.js, Tailwind로 만들어진 블로그 템플릿을 발견했다. Next.js를 공부하는데 도움이 될 것 같아 프로젝트를 뜯어보았다. 뜯어보니 많은 모듈들이 합쳐진 프로젝트였고 좋은 Next.js best practice 프로젝트가 될 것 같다.

Husky

폴더 중에서 처음으로 눈에 들어왔던 것은 .husky 폴더였다. husky는 몇번 본 적은 있었는데 무엇을 하는 모듈인지 모르기 때문에 이번에 알고 넘어가야겠다는 생각이 들었다.

프론트엔드 개발 환경에서 git hook을 손쉽게 제어하도록 도와주는 매니저라고 한다.

여기서 git hook은 갈고리라는 의미를 가진다. git을 사용하다가 커밋, 푸쉬 등 특정 이벤트가 일어났을 때 그 순간 갈고리를 걸어서 특정 스크립트가 실행되도록 도와주는게 git hook이라고 한다.

CI/CD에 도움이 될 것 같다.

git hook의 활용방안으로는 scripts, lint staged, 자동 이미지 최적화, 브랜치에 적어놓은 이슈번호를 읽어 커밋 메시지에 이슈번호 자동 추가 등이 있다.

이 프로젝트에서는 pre-commit 폴더에서 npx --no-install lint-staged를 사용하여 커밋 전 staged 된 파일들을 lint하는 작업 script가 git hook으로 추가되어 있었다.