[React] 2. Vite로 프로젝트 셋팅하기

1. Vite란?

• 프론트엔드 개발을 위한 빌드 도구이자 개발 서버
• ✅ 기본 구조 잡아줌
• ✅ HMR: 코드 수정 시, 전체 페이지를 다시 로드하지 않고 바뀐 부분만 즉시 반영해줌
• ✅ 모던 브라우저 환경 최적화: ES Module 기능을 적극적으로 활용 (불필요한 번들링을 줄이므로 더 빠르게 동작함)
• ✅ 빌드 도구 포함: 개발용 서버 뿐 아니라 배포용 파일 생성 가능

 

셋팅

npm create vite@latest <디렉토리 경로> -- --template react-ts

 

2. 주요 디렉토리/파일

파일/디렉토리	역할	알아야 할 점
src/	애플리케이션 소스 코드	대부분의 개발이 여기서 이루어짐
src/main.tsx	React 앱 시작점	보통 건드릴 일 거의 없음
src/App.tsx	첫 화면 컴포넌트	React 공부 초반에는 거의 여기만 수정
public/	정적 파일 저장소	이미지, favicon, robots.txt 등을 넣음
node_modules/	설치된 라이브러리	직접 수정 금지, Git 커밋 금지
package.json	프로젝트 설정 및 의존성 관리	가장 중요한 설정 파일 중 하나
package-lock.json	의존성 버전 고정	Git 커밋 필수
index.html	브라우저가 최초 로드하는 HTML	React 앱이 붙는 root 요소 존재
vite.config.ts	Vite 설정	경로 별칭(alias), 프록시 설정 등을 추가
eslint.config.js	코드 품질 검사 규칙	팀 규칙에 따라 수정 가능
tsconfig.json	TypeScript 공통 설정	strict 여부 등 타입 검사 수준 결정
tsconfig.app.json	브라우저 코드용 TS 설정	보통 잘 안 건드림
tsconfig.node.json	Node 실행 코드용 TS 설정	Vite 설정 파일 등에 적용

 

예시) vite.config.ts

import { defineConfig } from 'vite'             // vite 설정 정의 함수
import react from '@vitejs/plugin-react'        // React 플러그인 (Vite가 JSX, TSX를 이해할 수 있게 해줌)
import path from 'path'		

export default defineConfig({
  plugins: [react()],                           // 사용할 플러그인 등록

  resolve: {                                    // 모듈 Import 경로 해석 규칙 설정
    alias: {							
      '@': path.resolve(__dirname, './src'),    // @ = src로 해석. import Button from '@/components/Button'
    },
  },

  server: {                                     // 개발 서버 관련 설정 (npm run dev 일때만 적용됨)
    proxy: {									
      '/api': {                                 // 해당 path를 가로챔
        target: 'http://localhost:8080',        // 해당 타겟으로 보냄
        changeOrigin: true,                     // 요청 Host 헤더를 대상 서버 기준으로 변경
      },
    },
  },
})

 

 

예시) 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 { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
])

 

예시) tsconfig.json

 

 

예시) tsconfig.app.json

 

 

예시) tsconfig.node.json