Lefthook

개요

프론트엔드 개발시, Husky와 lint-staged를 사용하여 Git의 commit을 실행할 때, 자동으로 ESLint나 Prettier를 실행하도록 설정하여 사용하였습니다.

[React] Husky, lint-staged

최근에 Golang을 사용한 웹 서버 개발이나, Flutter를 사용하여 앱 개발을 하고 있는데, Node 기반이 아닌 프로젝트에서 Husky와 lint-staged와 같이 Linter나 테스트 코드를 실행시키는 방법을 필요했습니다.

이번 블로그 포스트에서는 Lefthook을 사용해서 Git의 commit을 실행할 때, Linter나 테스트 코드를 실행하는 방법에 대해서 알아보도록 하겠습니다.

Lefthook: https://github.com/evilmartians/lefthook

Lefthook 설치

Lefthook은 다양한 언어와 OS를 지원하고 있습니다. 자신의 개발 환경에 맞게 Lefthook을 설치하시기 바랍니다.

저는 macOS를 사용하고 있기 때문에, 다음 명령어를 사용하여 Lefthook을 설치하였습니다.

brew install lefthook

Lefthook 설정

이렇게 설정한 Lefthook을 사용하기 위해서는, 개발중인 프로젝트 폴더에 ./lefthook.yml 파일을 만들고 다음과 같이 수정할 필요가 있습니다.

pre-commit:
  parallel: true
  commands:
    pretty:
      glob: './src/**'
      run: npx prettier --check {staged_files}
    linter:
      glob: 'src/**/*.{ts,tsx}'
      run: npx eslint {staged_files}

pre-commit이나 pre-push를 사용하여 Git의 commit나 push 이전에 특정 동작을 하도록 설정할 수 있습니다. parallel 옵션을 사용하여 실행할 명령어들을 병렬로 실행하도록 설정할 수 있습니다. commads에는 특정 액션의 이름(pretty, linter 등)에 실행할 명령어(run)를 설정합니다.

glob을 사용하여 파일 리스트를 필터링할 수 있으며, root 옵션을 사용하여 명령어를 실행할 폴더를 지정할 수 있습니다.

Execute in sub-directory

pre-commit:
  commands:
    backend-linter:
      root: "api/" # Careful to have only trailing slash
      glob: "*.rb" # glob filter
      run: bundle exec rubocop {all_files}

이 밖에도 다음과 같은 기능을 사용할 수 있습니다.

Lefhook 실행

이렇게 설정한 Lefthook이 잘 실행되는지 확인하기 위해 다음 명령어를 실행해 봅니다.

lefthook run pre-commit

그럼 ./lefthook.yml에 설정한 명령어들이 실행되는 것을 확인할 수 있습니다.

Lefthook 적용

lefthook run ... 명령어는 ./lefthook.yml 파일의 내용을 한번만 실행합니다. 하지만, 우리는 Git의 commit이 실행될 때마다, 설정한 명령어를 실행하도록 만들고 싶습니다. 이제 다음 명령어를 실행하여 Git의 commit이 실행될 때마다, ./lefthook.yml에 설정한 명령어들이 실행되도록 설정합니다.

lefthook install

이후, Git의 commit 명령어를 실행할 때, ./lefthook.yml에 설정한 명령어들이 실행되는 것을 확인할 수 있습니다.

특정 폴더 하위 파일이 변경될 때만 실행하기

Lefthook을 사용할 때, 특정 폴더 밑에 파일들이 변경되었을 때에, 특정 명령어를 실행하고 싶을 때가 있습니다. 예를 들어, 프론트엔드와 백엔드를 동시에 관리하는 프로젝트에서 프론트엔드 코드만 수정하였을 경우, 백엔드에 관한 명령어는 실행하고 싶지 않을 때가 있습니다.

이때 다음과 같이, files 옵션을 사용하면 특정 폴더에 파일이 변경되었을 경우에만 특정 명령어를 실행할 수 있도록 설정할 수 있습니다.

pre-commit:
  parallel: true
  commands:
    linter:
      files: git diff --name-only HEAD | grep "frontend/" || echo ''
      root: "frontend/"
      run: npm run lint
    test:
      files: git diff --name-only HEAD | grep "backend/" || echo ''
      root: "backend/"
      run: go test ./backend/test/...

완료

이것으로 Lefthook을 사용하여 Git의 commit을 실행할 때, Linter와 테스트 코드 실행 등의 명령어를 실행하는 방법에 대해서 알아보았습니다. Lefthook은 다양한 개발 환경을 지원하므로, Node 개발 환경이 아닌 프로젝트에서도 사용할 수 있습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.