[storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3

(CRA + TypeScript + Prettier + ESLint + husky + lint-staged + Storybook + chromatic)

TypeScript를 기반으로 하는 Create React App 준비는 첫 번째 시리즈에서 다뤘고, ESLiint와 Prettier는 두 번째 시리즈에서 다루었다.

 

2022.01.28 - [분류 전체보기] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1

2022.02.04 - [🛠/Dev Tool] - [storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2

 

---

husky

• Git 은 hook 이라는 기능을 가지고 있다. commit, push 같은 Git과 관련된 어떤 이벤트가 일어날 때 전후로 스크립트를 실행할 수 있다.
• husky 라이브러리는 Git Hook을 사용하기 위해 필요하다.

우선 husky를 다운로드 받아보자.

yarn add -D husky

lint-staged

• husky와 같이 사용된다. Git에 Staged된 파일들에 대해 특정 명령어를 실행할 수 있게 해준다.
• Staged files란, 파일이 수정되고, Git add 명령어로 실행된 파일을 말한다. 만일 staged된 파일을 한 번 더 수정할 경우, 'staged' 상태로 올리기 위해서는 다시 한 번 git add 명령어를 입력해야 한다.

yarn add -D lint-staged

husky, lint-staged 적용하기

• package.json에서 아래처럼 두 라이브러리를 설정해줄 것이다.

{
  "scripts": {
    ...
    "prepare": "husky install"
  },
  "devDependencies": {
    ...
    "eslint": "^8.8.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "husky": ">=6",
    "lint-staged": ">=10",
    "prettier": "^2.5.1",
    ...
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --ext .tsx --ext .ts ./src --fix"
    ],
    "./src/**": [
      "prettier --write ."
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

이제 수정한 파일을 stage에 올릴 때마다 hook에 걸려서, ESLint가 도는 것을 확인할 수 있다. 만일 제대로 코드가 통과되지 못하면 commit을 할 수 없게 되어 있다.

 

원한다면 이를 Github Action을 통해서도 workflow를 만들 수도 있다.