- Published on
- ·3 min read
Git 커밋 후 자동으로 줄바꿈 되는 문제
문제 상황
이 블로그는 Next.js로 만들었고, Tailwind CSS Blog Starter 템플릿 코드를 사용했습니다.
로컬에서 글을 작성하면서 줄바꿈까지 의도해서 작성을 합니다. 그리고 의도대로 보이는 것을 확인합니다.
그 후, git에 커밋을 하면 멋대로 줄바꿈이 되어버립니다. 아무리 다시 수정을 해도 커밋을 하면 다시 줄바꿈이 되어버립니다.
이 줄바꿈으로 인해 커밋 이후에는 블로그 글이 의도대로 보이지 않습니다.
원인 파악
Tailwind CSS Blog Starter 템플릿 코드에는 husky를 사용해서 커밋 전에 prettier를 실행하도록 설정되어 있습니다.
Husky?
Chat GPT에게 문의했습니다.
Git Hook 중 "Husky"는 Git 저장소에서 코드 변경 사항이 커밋되기 전이나 후에 자동으로 실행되는 스크립트입니다. Husky를 사용하면 개발자는 특정한 시점에서 자동으로 작업을 실행하거나 특정 규칙을 적용할 수 있습니다. 주로 코드 품질 유지, 테스트 자동화, 커밋 메시지 규칙 등을 적용하기 위해 사용됩니다.
Husky는 주로 Node.js 환경에서 사용되며, 아래와 같은 Git Hook들을 지원합니다.
pre-commit: 커밋이 발생하기 전에 실행되는 스크립트입니다. 주로 코드 포맷팅, 린팅, 단위 테스트 등을 수행하여 코드 품질을 유지하거나 보장할 수 있습니다.
pre-push: 푸시가 발생하기 전에 실행되는 스크립트입니다. 주로 테스트나 빌드 등을 실행하여 코드가 레포지토리에 푸시되기 전에 검증하는 용도로 사용됩니다.
commit-msg: 커밋 메시지가 작성된 후에 실행되는 스크립트입니다. 커밋 메시지의 형식을 체크하거나 커밋 메시지에 이슈 번호를 추가하는 등의 작업을 할 수 있습니다.
Husky는 .git/hooks 디렉토리에 훅 스크립트를 생성하거나 기존의 훅을 대체하는 방식으로 동작합니다. 사용자가 직접 스크립트를 작성하거나, 패키지 매니저를 통해 Husky와 함께 제공되는 예제 스크립트를 이용할 수 있습니다.
Husky를 사용하려면 프로젝트 내에서 필요한 훅에 대한 스크립트를 작성하고 설정해야 하며, 이를 통해 개발 프로세스를 자동화하고 효율적으로 관리할 수 있습니다.
husky 관련 코드 확인
Tailwind CSS Blog Starter Kit에서 husky 관련 코드는 다음과 같습니다.
.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
package.json
{
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
"prettier --write"
]
}
}
해결 방법
저는 글 작성을 mdx 확장자로 하고 있습니다.
위에 있는 package.json 코드를 보면 mdx 확장자일 경우 prettier를 실행하도록 되어 있습니다.
그래서 mdx 확장자를 제외하고 prettier를 실행하도록 수정했습니다.
최종 코드는 다음과 같습니다.
package.json
{
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md)": [
"prettier --write"
]
}
}
결론
소스 코드의 경우, 코드 규칙에 맞게 쓰는 것이 좋습니다.
하지만 블로그를 위한 글 작성에는 코드 규칙에 맞춰서 prettier를 실행하는 것이 더 불편하다고 생각됩니다. 그래서 과감히 빼버렸습니다.
이제는 블로그 글이 의도대로 보입니다. 😀