React와 Vite로 빠른 개발 환경 구성

개요

Vite는 빠른 개발 서버와 효율적인 번들링으로 프론트엔드 개발 속도를 크게 향상시킨다. React와 결합하면 반복적인 빌드 시간을 줄이고 즉각적인 피드백을 받을 수 있다. 이 글에서는 처음 시작하는 사람도 따라할 수 있도록 설치부터 설정, 성능 최적화까지 단계별로 설명한다.

준비물

기본 요구사항은 Node.js(14 이상 권장)와 npm 또는 pnpm, 또는 yarn이다. 프로젝트 목적에 따라 TypeScript 사용 여부를 결정한다. 여기서는 JavaScript 기반의 예시와 Vite 설정을 중심으로 설명한다.

빠르게 시작하기

1. 프로젝트 생성

터미널에서 Vite의 공식 템플릿을 사용해 새 프로젝트를 만든다. 아래 명령은 React 템플릿을 이용한 기본 설정 예시다.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

2. 주요 파일 구조

기본 구조는 간단하다. 핵심 파일은 index.html, src/main.jsx, src/App.jsx다. main.jsx에서 ReactDOM을 통해 루트 노드에 앱을 마운트한다.

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// src/App.jsx
import React from 'react'

export default function App() {
  return (
    <div>Hello Vite + React</div>
  )
}

Vite 설정 살펴보기

vite.config.js 기본

기본 설정으로도 충분하지만, 개발 편의성과 번들 성능을 위해 플러그인과 alias를 추가하면 좋다. 예시는 path alias와 React fast refresh를 포함한다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

환경별 빌드 설정

프로덕션 번들에서 코드 분할과 압축을 적극 활용한다. rollupOptions로 외부 의존성을 관리하면 번들 크기를 제어할 수 있다.

성능 최적화 포인트

여기서는 Vite 번들 성능을 끌어올리는 핵심 항목을 정리한다.

• 의존성 사전 번들링: Vite는 초기 빌드 시 deps를 pre-bundle로 처리한다. 필요 시 optimizeDeps.include로 조정.
• 코드 분할: dynamic import로 라우트 단위 분할을 적용해 초기 로드 시간을 줄임.
• 이미지와 정적 자원: 적절한 포맷과 크기 조절, CDN 사용 권장.
• 서버 사이드 캐싱: HTML과 API 응답 캐싱으로 반복 요청 부담 감소.
• 프로덕션 빌드 옵션: terser 대신 esbuild 사용으로 빌드 속도 개선 가능.

예: 라우트 기반 코드 분할

// src/App.jsx
import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))

export default function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

개발 생산성 팁

• Hot Module Replacement(HMR)를 활용해 변경 즉시 반영 상태를 확인한다.
• ESLint와 Prettier를 통합해 코드 품질을 유지한다.
• 환경 변수는 .env 파일로 관리하며 Vite 규칙에 맞춰 VITE_ 접두사를 사용한다.
• 테스트는 Jest 또는 Vitest로 설정해 빠른 피드백 루프를 만든다.

배포 시 고려사항

프로덕션 빌드는 npm run build로 생성한다. 생성된 dist를 정적 호스팅 서비스에 배포하면 된다. 빌드 후 파일은 캐싱 정책을 적용해 CDN으로 서빙하면 응답 속도가 개선된다.

마무리

Vite와 React 조합은 개발 속도를 크게 올려준다. 초기 설정은 간단하지만, 성능과 확장성을 고려한 추가 설정이 중요하다. 위에서 설명한 설정과 최적화 포인트를 적용하면 안정적이고 빠른 개발 환경을 만들 수 있다.