리액트 보일러플레이트 만들기(typescript, vite, eslint, prettier, recoil)

백우진·2023년 1월 3일

ESLint Prettier Recoil typescript vite 리액트 보일러플레이트

보일러플레이트?

최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드

기술 스택

React

Typescript

vite

eslint

prettier

react-router-dom

styled-components

recoil

다음과 같은 기술스택을 가진 리액트 프로젝트 보일러플레이트를 생성하여 재사용성을 높여보자!

1. Typescript, vite 기반 React 프로젝트 생성

yarn create vite [프로젝트 명] --template react-ts
or
npm create vite@latest [프로젝트 명] --template react-ts

2. Prettier, Eslint 세팅

prettier, eslint 설치

eslint, prettier, typescript 설치
npm install --save-dev eslint prettier typescript
typescript에서 eslint를 사용하기 위한 플러그인 설치
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
eslint, prettier를 동시에 사용하기 위한 플러그인 설치
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
airbnb 스타일의 eslint 설정
npm install --save-dev eslint-config-airbnb-base # 리액트 관련 규칙 X
npm install --save-dev eslint-config-airbnb # 리액트 관련 규칙 O
리액트를 사용하는 경우 추가적인 플러그인 필요!
React 규칙이 들어있는 플러그인 : eslint-plugin-react
React Hooks 규칙이 들어있는 플러그인 : eslint-plugin-react-hooks
JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인 : eslint-plugin-jsx-a11y
ES6의 import, export 구문을 지원하는 필수 플러그인 : eslint-plugin-import

Prettier 설정

// .prettierrc

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

singleQuote : quote를 single로 사용할지, double로 사용할지 결정
semi : 명령문 마지막에 semiclons를 붙일지 말지의 여부
quoteProps : 객체 안에 key의 따옴표를 quote를 감싸지 않으면 안되는 문자가 있을때만 사용
useTabs : 공백 대신 탭으로 줄을 들여 쓸지에 대한 여부를 물어본다.
printWidth : 라인의 최대 길이 설정으로 120으로 설정했다.
tabWidth : 들여쓰기의 칸 수를 말하며 2칸으로 설정했다.
arrowParens : 화살표 함수에서 매개변수를 항상 괄호로 감싸도록 설정했다.

추가적인 옵션 : https://prettier.io/docs/en/options.html

Eslint 설정

// .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
    //'react-hooks' // eslint-plugin-react-hooks 설치한 경우
  ],
  extends: [
    'airbnb-base', // or airbnb
    // 'plugin:react/recommended', // eslint-plugin-react 설치한 경우
    // 'plugin:jsx-a11y/recommended', // eslint-plugin-jsx-a11y 설치한 경우
    // 'plugin:import/errors', // eslint-plugin-import 설치한 경우
    // 'plugin:import/warnings', // eslint-plugin-import 설치한 경우
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: [
          '.js',
          //   '.jsx',
          '.ts',
          //   '.tsx',
        ],
      },
    },
  },
};

3. React-router-dom 세팅

react-router-dom 패키지, types을 프로젝트에 설치
npm install react-router-dom @types/react-router-dom

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<div></div>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

4. Styled-componets 세팅

styled-components와 types을 프로젝트에 설치
npm install styled-components @types/styled-components

5. recoil 세팅

리코일 설치
npm install recoil

6. 기타 설정

SVG 확장자 사용 세팅

custom.d.ts 작성

// .svg 확장자의 파일에서 ReactComponent의 존재를 인식시켜 주는 부분

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

vite 플러그인 설치
npm i vite-plugin-svgr

vite.config.ts 수정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});