안녕하세요, 감자입니다
이번에 회고해볼 내용은 4월 원티드 프로온보딩 프론트엔드 인터십 1주차 입니다.

그 중에서도 husky와 carco로 절대경로 설정하기에 대해서 기록해보려고 합니다.

프리온보딩 1주차 과제

동료학습을 통해서 팀에서 생각한 원티드 프리온보딩 프론트엔드 인턴십 선발 과제의 Best Pratice를 만들고 제출해주세요

이번 과제는 10명의 팀원들이 제출한 사전 과제중 좋은 점들을 모아 하나의 결과물로 내는 과제였습니다. 다른 분들의 코드를 보면서 많은 것을 배웠지만, 그 중에서도 협업에 필수적이라고 느겼던 husky와 절대경로 설정에 사용한 craco 라이브러리를 복습하기 위해 정리해보았습니다.

TEAM 보람삼조 제출 결과물

• 👉 팀 git 주소
• 👉 팀 결과 배포 링크

husky 사용하기

먼저 hustkey에 대해서 알아보도록 하겠습니다.

husky? 멍멍?

바로 강아지 허스키가 떠올랐지만 역시나 아니겠죠?ㅎㅎ
husky는 git hook 설정을 도와주는 npm package입니다. 그렇다면 git hook이 뭔지도 알아야겠죠?

git hook?

• git의 특정 이벤트가 발생하기 전, 후로 자동으로 스크립트를 실행할 수 있게 도와주는 라이브러리

git hook과 husky를 도입하는 이유

• 각자 개발환경에서 eslint + prettier 설정을 끄는게 가능하여 코드의 일관성이 지켜지지 않을 수 있음
• git hook을 통해 이를 강제하는게 가능하지만, 수동으로 명령어를 입력 해야하는 단점이 존재
• husky를 통해 git hook을 자동화할 수 있음

eslint + prettier rule에 통과한 경우에만 git commit/push가 가능하도록 하고 이 과정을 자동화하기 위해서

husky 적용하기

참고로 기존 진행하던 프로젝트에서 설정하기 때문에, prettier와 eslint 설정은 생략합니다

패키지 추가하기

• husky 패키지 설치

  npm install husky --save-dev

• lint-staged 패키지 추가
  lint-staged는 git의 staged된 파일을들에 특정 명령어를 실행할 수 있도록하는 도구입니다.

  npm install lint-staged --save-dev

pakage.json 수정하기

• npm hook으로 husky 자동 설치 추가하기

  {
    "scripts": {
      "postinstall": "husky install"
    },
  }

  npm install 후에 자동으로 husky install을 실행하는 설정 다른 개발자가 npm install 후 자동으로 husky가 설치되도록 하는 npm hook입니다.

• prettier, eslint 자동실행 명령어 추가

  {
    "scripts": {
      "lint": "eslint --cache .",
      "lint-staged": "lint-staged"
    },
  },
  "lint-staged": {
      "**/*.{tsx,ts,jsx,js}": [
          "prettier --write"
      ]
  },

  eslint --cache . 명령어는 전에 검사했던 파일이나 항목을 cache에 저장하여 변경 사항이 발생한 파일에 대해서만 eslint 검사를 하겠다는 명령어입니다.

husky hooks 추가

husky는 hook를 쉽게 추가할 수 있도록 cli 명령어를 제공합니다

• commit 전에 lint-staged(prettier) 실행하기 hook 생성

  npx husky add .husky/pre-commit "npm run lint-staged"

• push 전에 lint-staged(prettier) 실행하기 hook 생성

  npx husky add .husky/pre-push "npm run lint"

craco로 절대경로 설정하기 (feat. CRA)

이번 프로젝트는 요구 조건상 CRA에로만 구현하도록 되어 있어 CRA를 통해 프로젝트를 생성하였습니다. 그래서 CRA에서 절대경로를 설정는 방법을 알아보겠습니다.

상대 경로 지옥

import SignUpPage from '../../pages/SignUp';
import SignInPage from '../../pages/SignIn';
import TodoPage from '../../pages/Todo';
import WelcomePage from '../../pages/Welcome';

해당 부분은 비교적 상대경로가 간단한 편이라 괜찮지만 폴더 깊이가 있는 컴포넌트라면 ../../../상대경로지옥처럼 되기 때문에 파악하기 어려워집니다. 또한, 파일의 위치를 종종 옮겨야할 경우가 발생하는데 이럴때 수정하기 매우 난감해집니다.
물론 vscode 등과 같은 에디터에 도움을 받는다면 문제는 없겠지만, 그래도 이러한 부분을 없앨 수 있다면 좋겠죠?
이러한 문제를 해결하는 가장 간단한 방법은 바로 상대경로가 아닌 절대 경로를 사용하는 것입니다.

craco로 절대 경로 설정하기

craco는 Create React App Configuration Override의 약자로 CRA의 기본 설정들을 eject 없이 설정할 수 있도록 해주는 라이브러리입니다.

craco 설치

npm i -D @craco/craco craco-alias

craco.config.ts 생성

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};

export {};

tsconfig.paths.json 생성 (ts 절대경로 추가)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

package.json의 scripts 명령어 carco로 수정하기

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  }

절대 경로 적용하기

import SignUpPage from '@pages/SignUp';
import SignInPage from '@pages/SignIn';
import TodoPage from '@pages/Todo';
import WelcomePage from '@pages/Welcome';

마무리

carco로 절대경로를 설정하는 방법을 학습하였는데, 상대경로를 없애준다는 장점도 있었지만 개인적으로 가독성 측면에서도 ../이 없어져서 좋아졌다는 생각이 들었다. 이후 새로 프로젝트를 진행한다면 절대경로는 꼭 적용해야겠다.