[타임세이버] Husky와 함께하는 React 프로젝트 세팅

 

내가 디자인한 프로젝트 로고다 후후 :)

 

기술 스택 선정 이유

React vs Next.js

•  SEO를 챙길 필요가 없음
• 사용자 인터랙션 중심의 서비스

대시보드를 통한 컬럼 및 카드 생성, 수정, 조회, D&D 등 사용자 인터랙션 중심의 서비스이기 때문에 SEO를 챙기는 것이 중요하지 않았을 뿐더러, Next.js의 이점 중 하나인 검색 엔진 최적화를 활용할 수도 없었고 앱 라우터의 서버 컴포넌트 등도 필요하지 않아 React로 진행하기로 했다.

 

Tailwind vs Styled-Components

Tailwind의 장점인 빠른 개발 속도 및 작은 번들 크기가 큰 이점이기에 마지막까지 고민을 하였으나, prop으로 동적으로 스타일을 변경할 수 있고, 기존 CSS의 @Keyframes을 그대로 사용할 수 있는 Styled-Components를 사용하기로 결정했다.

+ 이번 프로젝트에서 다양한 애니메이션을 적용하고자 하는 목표가 있었기 때문에 더 Styled-Components 사용에 마음이 쏠리기도 했다.

 

본격적으로 프로젝트 세팅을 해보자 !

커맨드를 사용해서 프로젝트를 초기화해준 뒤, 우리가 사용할 것들을 차근 차근 세팅해줄 것이다.

 

1. 프로젝트 초기화 (React 프로젝트 생성하기)

npx create-react-app {프로젝트 명} --template typescript

 

2. Styled-Components 설치

생성한 프로젝트 디렉토리로 이동한 뒤에, Styled-Components를 설치해준다.

우리는 TypeScript도 사용할 것이기 때문에, 관련 타입 정의 파일도 함께 설치해주어야 한다.

npm install styled-components
npm install --save-dev @types/styled-components

 

3. ESLint와 Prettier 설정

휴먼 에러를 줄여주는 중요한 Lint 설정을 위해 ESLint와 Prettier을 설치하자

// ESLint 설치
npm install eslint --save-dev
npx eslint --init

// Prettier 설치 및 설정
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

ESLint와 Prettier를 원하는 대로 설정하고 싶으면 .eslintrc.json 파일과 .prettierrc 파일에 원하는 스타일을 정의해두어야 한다.

기획 단계에서 미리 이야기해둔 컨벤션에 맞추어 작성해 적용이 되도록 해주었다.

 

아래는 .eslintrc.json과 .prettierrc 파일을 정리해둔 것이다

주석으로 각각의 설정이 어떤 것을 허용하고 금지하는 지를 적어두었으니 궁금하신 분들은 눌러보시면 됩니다 !

// .eslintrc.json
{
  "env": {
    "browser": true, // window와 document같은 브라우저 전역 변수 허용
    "es2021": true, // EC<AScript2021 기능 사용 가능
    "node": true // Node.js 환경에서 사용되는 전역 변수와 require같은 기능 허용
  },
  "parser": "@typescript-eslint/parser", // typescript 구문을 이해하고 검사할 수 있게 함
  "extends": ["eslint:recommended" // *ESLint의 권장 기본 규칙 적용, 
	  "plugin:@typescript-eslint/recommended" //Typescript와 관련된 권장 규칙 적용, 
	  "plugin:react-hooks/recommended" // React Hooks 관련 권장 규칙 적용],
  "parserOptions": {
    "ecmaVersion": "latest", // 최신 ECMAScript 버전 사용
    "sourceType": "module", // ECMAScript 모듈 사용 (import/export)
    "requireConfigFile": false // @typescript-eslint/parse에 별도의 설정 파일이 필요하지 않음을 명시
  },
  "plugins": ["react" // React관련 규칙 활성화,
	   "@typescript-eslint" // TypeScript 관련 규칙 활성화, 
	   "import" //import / export 관련 규칙 활성화],

  "rules": {
    "import/order": // import문을 그룹별로 정렬하도록 강제
	    [
	      "error",
	      {
	        "groups": ["builtin" // Node.js 내장 모듈, 
		        "external" // 외부 라이브러리, 
		        "internal" // 내부 모듈, 
		        "parent" // 부모 디렉토리의 모듈, 
		        "sibling" // 동일 디렉토리의 모듈, 
		        "index" // index 파일, 
		        "object" //객체, 
		        "type" // 타입
		        ]
	      }
	    ],
    "@typescript-eslint/no-explicit-any": 0, // type : any 사용을 경고하지 않음
    "semi": ["error", "always"], // 세미 콜론 필수
    "quotes": ["error", "double"], // 문자열은 큰따옴표
    "react/prop-types": "off", // propTypes 검사 규칙 비활성화 (타입 스크립트 사용하면 불필요)
    "@typescript-eslint/no-unused-vars": "warn", // 사용하지 않는 변수 경고
    "react/no-unused-state": "error", // 사용하지 않는 상태 정의는 오류
    "no-unused-vars": "error", // 사용하지 않는 변수 오류
    "react-hooks/rules-of-hooks": "error", // Hooks 규칙을 위반하면 오류
    "react-hooks/exhaustive-deps": "warn", // Hooks의 의존성 배열에 필요한 종속성을 추가하지 않으면 경고
    "array-callback-return": 0, // "array-callback-return": Array.prototype.map, filter, forEach 등의 콜백에서 return을 요구하지 않음
    "react/self-closing-comp": "warn" // 불필요한 자식 요소가 없는 경우 Self-closing 태그를 사용하지 않으면 경고
  }
}

 

// .prettierrc
{
  "arrowParens": "avoid", // 화살표 함수의 매개변수가 하나일 때 괄호 생략
  "bracketSpacing": true, // 객체 리터럴의 중괄호 {}, 와 그 안의 내용 사이에 공백 추가
  "bracketSameLine": true, // HTML/XML/JSX 요소의 닫는 괄호를 같은 줄에 배치
  "jsxBracketSameLine": true, // JSX의 >를 같은 줄에 유지
  "jsxSingleQuote": false, // JSX에서 문자열 리터럴에 큰따옴표 "를 사용
  "printWidth": 120, // 코드의 최대 줄 길이를 120자로 설정합니다. 이를 초과하면 자동으로 줄 바꿈
  "semi": true, // 문장 끝에 세미콜론 ;을 자동으로 추가
  "tabWidth": 2, // 탭 문자의 너비를 2칸으로 설정 = 들여쓰기
  "trailingComma": "es5", // ES5 문법에서 허용되는 위치에 쉼표를 추가 (객체와 배열의 마지막 요소에 쉼표 추가)
  "endOfLine": "auto" // 운영 체제에 따라 적절한 줄바꿈을 사용 (윈도우는 CRLF, 유닉스는 LF)
}

기본적으로 필요한 것들은 다 설치하고 설정했으니 이제 허스키 설정을 해볼까 한다.

 

4. 허스키 설치 및 설정하기

허스키 설정하는 것만 따로 빼서 포스팅할까 했지만, 생각보다 별 게 없어서 여기서 바로 정리해보겠다 !

 

허스키가 뭔데?

허스키는 커밋을 남기기 전, 푸시하기 전 등 코드 스타일 및 테스트 통과 여부를 확인할 수 있게 해주는 라이브러리이다.

컨벤션을 미리 정해두었음에도 잊어버리는 것이 사람이기에, 이러한 휴먼 에러를 방지해주기 위해서 이번 프로젝트에 도입해보았다.

 

4.1 허스키 설치 및 초기화하기

npm install husky --save-dev
npx husky install

이렇게 초기화를 하게 되면 `.husky` 폴더가 생성되는데 여기에는 Git hooks 관련 스크립트가 저장될 것이다

 

4.2 package.json에 prepare 스크립트 추가하기

Husky가 설치될 때마다 Git hooks를 설정하기 위해서 `package.json` 파일에 prepare 스크립트를 추가해야 한다.

{
  "scripts": {
    "prepare": "husky install"
  }
}

이렇게만 하면 한 번 커밋을 쓸 때마다 전체 파일에 대해서 검사를 하기 때문에 시간이 굉장히 오래 걸리게 된다.

우리는 프로젝트 세팅부터 허스키를 적용하여 커밋을 작성할 예정이기 때문에 앞으로 작성될, 변경된 파일을 대상으로만 linting을 적용하여 검사하기 위해서 따로 설정을 해줘야 한다.

 

4.3 Lint-staged 설치

npm install lint-staged --save-dev

 

4.4 Husky Git hook 추가하기

우리는 크게 커밋할 때, 푸시할 때 이렇게 두 번 검사를 하도록 했다.

커밋 전에 ESLint와 Prettier을 실행하여 컨벤션을 올바르게 지켰는지 자동으로 검사할 수 있도록 하는 것이다.

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

 

그리고 `.husky` 폴더 안에

`pre-commit`과 `pre-push` 파일을 생성하여 아래와 같이 추가해주었다.

// pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged && npm run lint


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

npm run build

 

4.5 Lint-staged 설정

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

package.json 파일에 'lint-staged' 설정 위처럼 추가하면 아래의 형식에 맞는 파일들을 대상으로 검사가 수행될 것이다.

 

 

이렇게 허스키까지 설정했다면, 프로젝트를 시작할 준비는 모두 끝났다.

중간에 프로젝트 세팅과 관련된 오류가 있다면 여기에 덧붙여서 작성해보도록 하겠다.

 

그럼 오늘은 이만~ 안뇽 !