ts react vite mui 보일러플레이트 만들기

https://github.com/XionWCFM/vite-mui

GitHub - XionWCFM/vite-mui: vite-mui

 

next.js 보일러플레이트를 만든것에 이어

cra 환경에서 사용할 보일러 플레이트를 만들어보았습니다.

mui, emotion을 이용하는 것이 코어 컨셉입니다.

 

그 외에 zod, react-hook-form, msw, react-query , react-router-dom 등

프로젝트에 일반적으로 필요한 라이브러리들을 install 해두었고

 

lint-staged , husky , svgr , path 편의성 설정 또한 해두었습니다.

역시 문제가 되었던 부분들은 eslint 쪽일 것 같은데요

그 부분에 대해서만 간단하게 정리하도록 하겠습니다.

---

svgr을 깔아주어야한다.

svg파일을 마치 리액트 컴포넌트처럼 사용하기 위해서는 조금 해주어야할 세팅이있습니다.

 

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

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

바로 vite-plugin-svgr인데요

npm i -D vite-plugin-svgr

vite.config.ts 파일에서 import 하여 plugins 배열에 추가시켜주면 되겠습니다.

 

타입스크립트에서 사용하기 위해서는 약간의 추가설정이 더 필요합니다.

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

src/custom.d.ts 파일을 생성해주고 안에 이러한 내용물을 넣어줍니다.

import '@/App.css';
import { ReactComponent as ReactIcon } from '@/assets/react.svg';
import React from 'react';
function App() {
  return (
    <div>
      <React.Suspense fallback={<div>로딩중입니다.</div>}>
        <div>암</div>
        <ReactIcon />
      </React.Suspense>
    </div>
  );
}

export default App;

그 이후 이렇게 사용해주면 되겠습니다.

---

eslint ignore

/* eslint-env node */
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: true,
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/no-non-null-assertion': 'off',
  },
  ignorePatterns: ['.eslintrc.cjs', "vite.config.ts"],
}

설정 파일들은 건드리기는 애매한데 eslint가 에러를 내뱉곤합니다.

그런 경우 eslintrc.cjs 파일의 ignorePatterns 옵션을 사용하면 됩니다.

---

절대 경로 설정

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

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

vite에서 절대 경로를 사용해주기 위해서 plugin을 설치해야합니다.

npm i -D vite-tsconfig-paths

위 플러그인을 설치하고 마찬가지로 vite.config.ts 파일에서 사용해줍니다.

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", ".eslintrc.cjs"],
  "exclude": ["node_modules", ".husky", "public"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

이후 tsconfig.ts 파일에서 컴파일러 옵션부분에 paths를 취향대로 넣어줍니다.

저는 @로 import하는 것이 편하기 때문에 위와같이 설정해주었습니다.