[React] vite로 프로젝트 template 만들기

vite 프로젝트 생성

npm create vite@latest

 

의존성 설치

npm i

 

prettier 설치

npm install --save-dev --save-exact prettier

 

.prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

 

eslint config prettier 설치

npm install --save-dev eslint-config-prettier

 

eslint.config.js 파일에 추가

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import eslintConfigPrettier from 'eslint-config-prettier'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
    eslintConfigPrettier,
  },
)

 

tailwind 설치

Install Tailwind CSS with Vite - Tailwind CSS

 

auto import 설치

npm install -D unplugin-auto-import

 

auto router 설치

npm install -D vite-plugin-pages

 

auto component 설치

npm install -D unplugin-react-components

 

react router dom 설치

npm install react-router-dom

 

material ui 설치

npm install @mui/material @emotion/react @emotion/styled

 

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

 

App.tsx

import routes from '~react-pages'
import './App.css'

function App() {
  const element = useRoutes(routes)
  return element
}

export default App

 

pages.d.ts 파일 생성(~react-pages의 type 오류를 잡기 위함)

declare module '~react-pages' {
  import { RouteObject } from 'react-router-dom'

  const routes: RouteObject[]
  export default routes
}

 

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

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

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", "auto-imports.d.ts", "components.d.ts", "pages.d.ts"]
}

 

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import AutoImport from 'unplugin-auto-import/vite'
import Pages from 'vite-plugin-pages'
import Components from 'unplugin-react-components/vite'
import { MuiResolver } from 'unplugin-react-components'
import path from 'node:path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [
    react(),
    AutoImport({
      imports: ['react', 'react-router-dom'],
      dts: true,
    }),
    Pages({
      dirs: [{ dir: './src/pages', baseRoute: '' }],
      extensions: ['jsx', 'tsx'],
    }),
    Components({
      dts: true,
      resolvers: [MuiResolver()],
    }),
  ],
})