협력 가능한 react 개발 환경 구축 (feat.Vite)

CRA 를 이용하여 환경 구축을 하니 지원도 안해서 경고문도 많고 그러다 보니, 속도도 빠른 vite 를 선호하게 되었고 개발 환경 구축에 대해 알아보자!

✨ vite 를 활용하여 react 환경 구축 및 prettier, eslint 설정

1. vite 를 이용하여 react typescript 설치

npm create vite@latest ./ -- --template react-ts

2. prettier / eslint 설치

# prettier, eslint-config 설정
npm install prettier eslint-config-prettier --save-dev

• vite 는 기본적으로 eslint 설치되어 있어 eslint-config-prettier 추가 설치

• eslint 는 코드 린터 기능

• pretter 는 코드 포맷팅 담당

• eslint 에도 코드 format 기능이 있어, eslint-config-prettier 해당 부분으로 eslint 는 린팅만 담당하도록 설정

3. prettier 스크립트 작성

// package.json
{
  "scripts: {
      "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", //기존
	  "format": "prettier --cache --write ." // 추가
  }
}

4. eslint 설정

// 기본 vite 설정에서 prettier 만 추가 설정

// .eslintrc.cjs
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:react-hooks/recommended',
  'prettier', // 추가
],

• prettier 플러그인 추가해서 eslint 의 포맷팅을 prettier 로 위임!

5. husky 설정

• husky 를 통해 Git Hook 설정
• git hook 이란 commit, push 를 수행된 경우 특정 기능을 hook(갈고리)으로 걸어서 특정 기능을 수행할 수 있도록 설정할 수 있다.

npm install husky --save-dev

# 처음 husky 사용자만 수행 - husky 설치
# npx husky install

// package.json
{
  "scripts": {
    "postinstall": "husky install"
  },
}

• postinstall 은 npm 의 hook 으로 npm installl 시 수행되어 husky install 도 수행되도록 설정함

• git commit / push 시 수행되도록 스크립트 설정

npx husky add .husky/pre-commit "npm run format"

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

# .husky/pre-psuh

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

npm run lint

# .husky/pre-commit

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

npm run format

6. lint-staged 수행하기

• lint-staged를 사용할 시 아래의 장점을 얻을 수 있음

1. 포맷팅을 수행 한 뒤 git add 명령어를 자동으로 수행되게 할 수 있음

2. 포맷팅을 전체 파일 대상이 아닌 현재 git stage에 올라온 변경사항 대상으로만 수행할 수 있음

npm install -D lint-staged

// package.json
{
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "npm run format",
      "npm run lint"
    ]
  },
}

# .husky/pre-commit

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

npx lint-staged

# .husky/pre-psuh

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

npx lint-staged

• npx lint-staged 로 스크립트 변경

✨  추가 설정

개인적으로 import 를 규칙대로 정렬하는 import-order 기능과 사용하지 않는 import 구문은 제거하는 것을 선호하기에 해당 부분을 추가 설정하였다.

npm install --save-dev eslint-plugin-simple-import-sort # import-order
npm i eslint-plugin-unused-imports # unused-imports

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['react-refresh', 'simple-import-sort', 'unused-imports'],
  rules: {
    'react-refresh/only-export-components': 'warn',
    'simple-import-sort/imports': [
      'error',
      {
        groups: [
          ['^', '^@'],
          ['^@/', '^./', '^../'],
        ],
      },
    ],
    'unused-imports/no-unused-imports': 'error',
  },
};

module.exports = {
  // ...
  plugins: ['react-refresh', 'simple-import-sort', 'unused-imports'],
	rules: {
	    'react-refresh/only-export-components': 'warn',
	    'simple-import-sort/imports': [
	      'error',
	      {
	        groups: [
	          ['^', '^@'],
	          ['^@/', '^./', '^../'],
	        ],
	      },
	    ],
	    'unused-imports/no-unused-imports': 'error',
	  },

• plugins 에 'simple-import-sort', 'unused-imports' 을 추가하였다.

• rules 에 simple-import-sort/impots 와 unused-imports/no-unused-imports 를 추가하였다.
simple-import-sort/impots 에서 groups 로 리액트 외부라이브러리 패턴인 react, @emotion/styled 와 같이 아무런 키워드 없이 라이브러리명과 @라이브러리명 으로 시작하면 같은 레벨로 import 하게 하였다.
그 외에 개발자가 사용하는 패턴인 @/path 또는 상대 경로 ./ ../ 인 경우에 같은 레벨로 정렬되게 하였다.

• 정렬된 것을 확인하면 아래와 같다

import ReactMarkdown from 'react-markdown';
import { useParams } from 'react-router-dom'; // 라이브러리 import

import { getIssue } from '@/apis';
import { IssueItem } from '@/components/IssueItem';
import { Avatar } from '@/components/ui/Avatar';
import { useIssue } from '@/context/issue/useIssue.tsx';
import { useFetch } from '@/hooks/useFetch.ts';
import * as S from './IssueDetailPage.styles.tsx'; // 개발자 import 

✨ 알아두면 좋은 사전 지식

prettier

• 코드 포맷팅 툴

• 포맷팅 룰을 커스터마이징할 수 있다

• 코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅스타일을 공유할 수 있게 된다.

• 그로인해서 개발자는 포맷팅등 다소 중요하지 않은 요소들에 에너지를 낭비하지 않고 핵심적인 개발에 집중할 수 있게 된다.

eslint

• 일관되고 버그를 피할수 있는 코드를 짜기위해서 만들어진 코드 분석 툴

• 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.

• 설정 커스터마이징을 허용해주기 때문에 필요한 규칙들을 커스텀해서 적용가능하다.

husky

• git hook 설정을 도와주는 npm package

• 번거로운 git hook 설정이 편함 + npm install 과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있어서 모든 팀원이 git hook 실행이 되도록 하기가 편함

• husky를 통해서 pre-commit, pre-push hook을 설정 가능함

lint-staged

• lint-staged를 사용할 시 아래의 장점을 얻을 수 있음

1. 포맷팅을 수행 한 뒤 git add 명령어를 자동으로 수행되게 할 수 있음

2. 포맷팅을 전체 파일 대상이 아닌 현재 git stage에 올라온 변경사항 대상으로만 수행할 수 있음

reference

• cra vite 설정

• boilerplate 환경