💬 Background
이번 방학에 GitHub을 이용해 협업하는 방법을 배우고 있다.
Issue를 작성하고 로컬에서 나만의 작업 환경인 브랜치를 파서 push를 하면 pull request를 작성할 수 있게 되고 나의 코드를 팀원들이 본 뒤 리뷰를 해준다.
팀원들의 approve를 받으면 나의 코드를 develop 브랜치로 merge할 수 있다.
뿐만 아니라 issue 및 pull request의 템플릿 역시 원하는데로 수정할 수 있다.
정말로 체계적인 깃헙 협업 구조를 알면 알수록 놀라울 따름이다.
GitHub에서 제공하는 기능 말고도 eslint, prettier 같은 패키지들을 사용하면 들여쓰기는 띄어쓰기 몇번으로 할지, 큰 따옴표를 사용할지 작은 따옴표를 사용할지와 같은 세밀한 설정들도 통일시켜준다.
팀원들 각각 다른 방식으로 코드를 작성해도 이를 자동적으로 통일시켜주는 것이다.
그런데 팀원 한명이 prettier 설정을 하지 않고 commit을 하는 경우가 있을 수 있다.
그러면 commit을 하기 전에 자동적으로 prettier를 실행시켜줄 순 없을까??
이를 가능하게 해주는 husky에 대해서 알아보자.
🐩 husky
❓❗ What?!
husky는 git hooks를 쉽게 설정해주는 툴이다.
git hooks란 git 명령어를 실행할 때, 무언가를 처리하고 싶은게 있으면 이를 처리하도록 도와준다.
위의 상황처럼 commit을 하면 prettier 처리도 함께 해주는 것이다.
❓❗ How?!
$ git i husky -D # devDependancies로 husky 설치
$ npx husky install # git hooks 설치package.json의 script 수정
//...
"script": {
//...
"prepare": "husky install",
//...
},$ npx husky add .husky/pre-commit "commit 전에 실행하고자 하는 명령어!"명령어를 추가하기 전에
그러기 전에 prettier와 husky를 연결시켜주는 lint-staged에 대해 알아보자
😀 lint-staged
❓❗ What?!
git staged files에 linter를 실행하는 것이다!
git staged files는 commit하기 전에 add된 파일이란 것을 알겠다.
그러면 linter는 무엇일까?
linter란 정적 프로그램 분석 도구이다.
쉽게 ESlint를 떠올리면 된다.
문법 오류나 코드 스타일을 분석하고 표시하거나 수정해주는 도구를 말한다.
정리하자면, lint-staged란 내가 add한 파일들에 대해서 문법 오류나 스타일 오류를 분석하고 표시 및 수정해주는 도구이다.
❓❗ How?!
$ npm i lint-staged -D # 설치!
$ npx husky add .husky/pre-commit "npx lint-staged"package.json에
"lint-staged": {
"**/*.js": [
"prettier --write",
"git add",
]
},이를 추가하자!
어떤 폴더에 있든 .js확장자를 가진 파일에 설정된 prettier를 적용하는 것이다!
여기서 git add를 하는 이유는 무엇일까?!
prettier를 실행하면 코드들이 수정될 것이다.
만약 코드가 수정된다면?
다시 add를 해줘야한다.
이제 commit 하면,
npx lint-staged가 자동적으로 먼저 실행된다. (pre-commit!!)
npx lint-staged를 하면 실행될 명령어들, 그리고 이 명령어가 적용될 파일이 package.json에 들어있다.
그럼, 설정에 맞게 코드들이 실행되고 파일들에 적용이 된 다음 commit이 된다! 😁
😂 Feelings
이런 기능들 볼때마다 진짜로 좀 감동적이다.😂
🐩husky, 이름 그대로 정말 충성스런 녀석이다.
