husky hook 설정을 통한 타입 에러 방지

Why husky?

지난번 타입 스크립트 마이그레이션을 하며 React Native에서는 타입에러가 발생하여도 메트로 서버에서 실행되는 번들은 자바스크립트로 컴파일된 파일이기 때문에 문제 없이 실행이 잘 되는 아쉬운 점이 있었다.

때문에 엄격한 타입 관리를 위해 빨간색 에러에 신경을 곤두세우며 마이그레이션을 진행하였는데 그럼에도 불구하고 미처 빨간 에러를 발견하지 못하고 넘어갔다가 나중에 발견하는 경우가 더러 있었다.

 

사실 혼자 개발하면서는 크게 문제가 되지 않을 부분이라고 생각했으나 새로운 프로젝트는 협업을 필요로 했고 미처 발견하지 못한 타입 에러를 서로 발견하지 못한채로 개발을 하다가 큰 문제를 겪을 수 있겠다는 생각이 들었다.

협업하면서 발생할 수 있는 실수를 방지하고자 커밋시에 타입 및 린트 검사를 함으로써 강제성을 가질 수 있는 husky라는 툴을 적용하게 되었다.

 

husky 설치

npx husky-init && npm install

 

husky 설정

 

husky hook 추가하기

npx husky add .husky/pre-push 'npm run type'

 

/.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run type

 

lint-staged 적용하기

커밋 할때마다 모든 파일을 검사하지 않고 내가 수정한 파일만 검사할 수 있도록 lint-staged를 적용한다.

npm install --save-dev lint-staged

package.json의 scripts

prepare은 허스키 설치를 하면 자동으로 생성되는 스크립트이며 lint 검사와 type 검사를 하는 스크립트를 추가한다.

두가지 검사를 순서대로 실행하는 type-lint 스크립트를 작성한 후 src 디렉토리 내의 모든 타입스크립트 파일을 검사 할 수 있도록 설정한다.

{
  "scripts": {
    ...
    "lint-staged": "lint-staged",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prepare": "husky install",
    "type": "tsc --pretty --noEmit",
    "type-lint": "tsc --pretty --noEmit && eslint . --ext .js,.jsx,.ts,.tsx"
  }
  "lint-staged": {
    "./src/**/*.{ts,tsx}": ["npm run type-lint"]
  }
}

 

다시 /.husky/pre-commit 

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

 

작동 확인

아래 코드와 같이 타입에러를 방치한채로 커밋을 해서 잘 작동하는지 확인해본다.

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
import Config from 'react-native-config';

// 타입 에러
const MyPageScreen = (): null => {
  return (
    <SafeAreaView>
      <Text>{Config.ENV}</Text>
    </SafeAreaView>
  );
};

MyPageScreen.navigationOptions = {
  headerShown: false,
};

export default MyPageScreen;

 

원하는대로 잘 작동하며 커밋이 되지 않는다.