Vite로 React 프로젝트 5분 만에 시작하기

React 프로젝트 설정에 10분 이상 쓰고 계신가요? 이제 그럴 필요 없어요!

안녕하세요! 오늘은 정말 짧은 시간에 React 프로젝트를 시작할 수 있는 방법을 알려드릴게요. 바로 Vite로 React 프로젝트 5분 만에 시작하기예요. 솔직히 말하자면 저도 예전에는 Create React App(CRA)만 썼거든요. 근데 프로젝트 설정할 때마다 커피 한 잔 마실 시간이 필요했어요. 빌드 속도도 느리고 말이죠. 그러다가 Vite를 처음 써봤는데... 진짜 충격이었어요. 2026년 현재 많은 개발자들이 CRA에서 Vite로 넘어오고 있는데, 한번 써보면 왜 그런지 바로 이해가 되실 거예요. 오늘은 제가 직접 경험한 것을 바탕으로 Vite를 이용해서 React 프로젝트를 빠르게 시작하는 방법을 알려드릴게요!

⚡ Vite가 뭐길래? CRA보다 빠른 이유

Vite(비트라고 읽어요!)는 프랑스어로 '빠르다'는 뜻이에요. 이름부터가 속도를 자랑하는 거죠. 근데 진짜 이름값 하는 도구예요. Create React App이 웹팩(Webpack)을 기반으로 동작한다면, Vite는 ES 모듈을 네이티브로 활용해서 개발 서버를 구동하거든요. 그니까요, 프로젝트가 커질수록 CRA는 점점 느려지는데 Vite는 여전히 빠른 속도를 유지해요.

제가 처음 Vite를 써봤을 때 가장 놀란 건 핫 모듈 리플레이스먼트(HMR) 속도였어요. 코드를 수정하고 저장하면 거의 즉시 브라우저에 반영되더라고요. CRA에서는 큰 프로젝트일 때 몇 초씩 기다려야 했는데 말이죠. 뭐랄까, 개발하면서 느끼는 쾌적함이 완전히 달라요. 2026년 현재 React 공식 문서에서도 Vite 사용을 권장하고 있을 정도니까요.

사실은요, Vite가 빠른 건 기술적인 이유가 있어요. 개발 모드에서 모든 코드를 번들링하지 않고 브라우저의 네이티브 ES 모듈 기능을 활용하거든요. 그래서 필요한 부분만 로드하니까 시작 시간이 엄청 짧아지는 거예요. 큰 프로젝트에서도 변함없이 빠른 속도를 유지하는 게 바로 이 때문이죠.

⚡ Vite React 프로젝트 설치 가이드

자, 이제 본격적으로 Vite로 React 프로젝트를 시작해볼까요? 솔직히 말하자면 정말 간단해요. 제가 처음 Vite로 React 프로젝트 만들었을 때 "이게 끝이야?" 했거든요. 기존에 CRA(Create React App) 쓰시던 분들은 진짜 놀라실 거예요.

? Node.js 버전 확인부터 하세요

먼저 Node.js가 설치되어 있어야 하는데요, Vite는 Node.js 14.18+ 버전이 필요해요. 2026년 현재 기준으로는 Node.js 18 이상을 추천드려요. 터미널에서 확인해보세요.

node -v

만약 버전이 낮다면 Node.js 공식 사이트에서 최신 LTS 버전을 다운받으시면 돼요.

? Vite React 프로젝트 생성 명령어

자, 이제 진짜 프로젝트를 만들어볼게요. 패키지 매니저별로 명령어가 조금씩 다른데요, 여러분이 선호하는 걸 쓰시면 돼요. 참고로 저는 npm을 주로 쓰는 편이에요.

? 프로젝트 설정 단계별 가이드

명령어를 실행하면 뭐랄까, 친절한 설치 마법사가 나타나요. 하나씩 선택하면 되는데요, 저랑 같이 해볼까요?

npm create vite@latest

# 프로젝트 이름 입력
? Project name: › my-react-app

# React 선택
? Select a framework: › React

# TypeScript 또는 JavaScript 선택
? Select a variant: › TypeScript (추천!) 또는 JavaScript

여기서 잠깐! TypeScript와 JavaScript 중에 뭘 선택할지 고민되시죠?

? 의존성 설치하고 개발 서버 실행하기

프로젝트 생성이 끝났으면 이제 필요한 패키지들을 설치해야 해요. 근데... 정말 간단해요.

# 프로젝트 폴더로 이동
cd my-react-app

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

`npm run dev` 실행하면 진짜 순식간에 서버가 뜨는데요, 보통 http://localhost:5173에서 확인할 수 있어요. CRA는 3000번 포트였는데, Vite는 5173번이에요.

⚙️ 프로젝트 생성 옵션 비교

사실은요, 명령어에 옵션을 붙여서 한 번에 설치할 수도 있어요. 대화형으로 선택하는 게 귀찮으신 분들한테 좋죠.

? 설치 시간 실제 비교

제가 직접 측정해봤는데요, 패키지 매니저별로 속도 차이가 꽤 나더라고요. 2026년 3월 기준 제 맥북 M2에서 테스트한 결과예요.

bun이 압도적으로 빠르긴 한데요, 아직은 생태계가 npm이나 yarn만큼은 아니에요. 안정성을 중요하게 생각한다면 pnpm이나 yarn을 추천드려요.

? 프로젝트 구조 살펴보기

Vite로 React 프로젝트를 생성하면 정말 깔끔한 구조의 파일들이 만들어지는데요. 처음 보시는 분들은 "이게 뭐지?" 할 수 있거든요. 근데 걱정 마세요! 하나씩 뜯어보면 엄청 직관적이에요.

?️ 기본 폴더 구조 한눈에 보기

프로젝트를 생성하면 이런 구조가 보이실 거예요. 각 폴더마다 명확한 역할이 있답니다.

my-react-app/
├── node_modules/        # 라이브러리들이 사는 집
├── public/              # 정적 파일 보관소
│   └── vite.svg         
├── src/                 # 여러분이 작업할 공간
│   ├── assets/          # 이미지, 폰트 등
│   ├── App.css          
│   ├── App.jsx          # 메인 컴포넌트
│   ├── index.css        
│   └── main.jsx         # 시작점
├── .gitignore           
├── index.html           # HTML 진입점
├── package.json         # 프로젝트 설정 파일
└── vite.config.js       # Vite 설정

솔직히 말하자면 처음엔 이 구조가 복잡해 보일 수 있어요. 근데요... 실제로 우리가 주로 건드릴 곳은 src 폴더랑 vite.config.js 정도거든요!

? 핵심 파일들 상세 분석

각 파일이 정확히 뭘 하는지 알아볼게요. 이거 알아두면 나중에 커스터마이징할 때 완전 편해요!

? main.jsx 코드 파헤치기

제가 처음 Vite로 React 프로젝트를 만들었을 때 가장 궁금했던 파일이에요. 코드가 엄청 간단하거든요!

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

여기서 주목할 점들이 있어요:

• React.StrictMode는 개발 모드에서 잠재적 문제를 찾아주는 도구예요. 진짜 유용해요!
• document.getElementById('root')는 index.html의 div#root를 찾는 거죠
• 2026년 현재 React 18 버전에서는 createRoot 방식을 사용한답니다
• CSS 파일도 여기서 import해서 전역 스타일을 적용할 수 있어요

⚙️ vite.config.js 설정 알아보기

이 파일은 Vite의 동작 방식을 커스터마이징할 수 있는 곳이에요. 기본 설정도 충분하지만, 나중에 필요하면 여기서 조정하면 돼요.

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

export default defineConfig({
  plugins: [react()],
})

진짜 심플하죠? 근데 여기에 이런 것들을 추가할 수 있어요:

• 포트 번호 변경 - 기본 5173 포트가 마음에 안 들면 바꿀 수 있어요
• 경로 별칭 설정 - import 경로를 짧게 만들 수 있죠
• 프록시 설정 - API 서버 연결할 때 CORS 문제 해결용
• 빌드 옵션 - 번들 사이즈 최적화나 소스맵 설정

? public vs src/assets 폴더 차이점

이거 완전 헷갈리실 수 있는데요. 둘 다 파일을 넣는 곳이지만 용도가 달라요!

뭐랄까... 간단히 말하면요:

• public: 절대 변하면 안 되는 파일, SEO 관련 파일
• src/assets: 컴포넌트에서 사용할 모든 리소스

? 효율적인 프로젝트 구조 만들기

솔직히 처음엔 기본 구조 그대로 써도 돼요. 근데 프로젝트가 커지면 이렇게 정리하면 엄청 편해요!

src/
├── components/          # 재사용 가능한 컴포넌트
│   ├── Button/
│   └── Header/
├── pages/               # 페이지 단위 컴포넌트
│   ├── Home.jsx
│   └── About.jsx
├── hooks/               # 커스텀 훅
├── utils/               # 유틸리티 함수
├── services/            # API 호출 함수
├── styles/              # 전역 스타일
└── assets/              # 이미지, 폰트 등

이렇게 정리하면 좋은 이유요:

1. 찾기 쉬워요 - "아, 버튼 컴포넌트는 components/Button에 있겠구나!"
2. 협업할 때 편해요 - 팀원들도 금방 이해하거든요
3. 유지보수가 쉬워요 - 나중에 수정할 때 시간 절약 완전 되더라고요
4. 확장성이 좋아요 - 기능 추가해도 구조가 안 무너져요

참고로요, Vite 프로젝트 구조는 정답이 없어요. 팀마다, 프로젝트마다 다르죠. 근데 일관성은 진짜 중요해요. 한번 정한 규칙은 계속 따라가는 게 좋답니다!

? 개발 서버 실행하고 첫 화면 보기

자, 이제 진짜 재밌는 순간이에요. Vite로 만든 React 프로젝트를 실제로 브라우저에서 확인해볼 차례거든요. 명령어 하나만 입력하면 바로 개발 서버가 실행되는데, 솔직히 말하자면 이 속도가 진짜 장난 아니에요.

⚡ 개발 서버 실행 명령어

개발 서버를 실행하는 방법은 정말 간단해요. 프로젝트 폴더에서 아래 명령어를 입력하기만 하면 되거든요.

npm run dev

명령어를 실행하면 터미널에 로컬 서버 주소가 뜨는데요, 보통 http://localhost:5173으로 나와요. 이 주소를 브라우저에 입력하거나 터미널에서 Ctrl + 클릭하면 바로 접속되죠.

? 첫 화면에서 뭘 볼 수 있나요?

브라우저를 열면 Vite와 React 로고가 빙글빙글 돌아가는 걸 보실 수 있어요. 그리고 카운터 버튼이 하나 있는데, 클릭할 때마다 숫자가 올라가죠. 진짜 간단하지만 React가 제대로 동작한다는 걸 확인할 수 있는 기본 예제예요.

근데요, 여기서 진짜 신기한 게 있어요.

? 핫 모듈 리플레이스먼트(HMR) 체험하기

Vite의 진짜 매력은 바로 이 HMR이거든요. src/App.jsx 파일을 열어서 텍스트를 아무거나 바꿔보세요. 예를 들어 "Vite + React"를 "나의 첫 React 앱"으로 바꾸고 저장하면요. 새로고침 안 해도 브라우저가 순식간에 업데이트돼요.

솔직히 처음 봤을 때 완전 놀랐어요. 저장하자마자 바로 반영되는 게 뭔가... 마법 같잖아요?

// src/App.jsx
function App() {
  return (
    <div>
      <h1>나의 첫 React 앱</h1>
      <p>Vite로 만들었어요!</p>
    </div>
  )
}

? Vite vs 기존 도구 개발 서버 비교

개발 서버 성능이 얼마나 차이나는지 궁금하셨죠? 제가 직접 2026년 현재 시점에서 측정해본 결과를 정리해봤어요.

보시다시피 Vite가 압도적이죠? 특히 프로젝트가 커질수록 이 차이는 더 확실하게 느껴져요.

⚙️ 개발 서버 유용한 옵션들

기본 실행도 좋지만, 상황에 따라 옵션을 추가하면 더 편하게 쓸 수 있어요. 제가 자주 쓰는 옵션들을 알려드릴게요.

# 브라우저 자동 열기
npm run dev -- --open

# 포트 번호 변경
npm run dev -- --port 3000

# 네트워크 접속 허용 + 자동 열기
npm run dev -- --host --open

참고로 -- 두 개를 먼저 붙이는 게 중요해요. npm 명령어에 추가 옵션을 전달할 때 필요한 문법이거든요.

? 개발 서버 터미널 메시지 이해하기

개발 서버를 실행하면 터미널에 여러 정보가 뜨는데요, 각각 뭘 의미하는지 알아두면 좋아요.

개발 서버 실행은 정말 간단하지만, 막상 해보면 이것저것 궁금한 게 생기거든요. 근데 걱정 마세요. 터미널에 뜨는 메시지들이 친절하게 안내해주니까 천천히 따라하시면 돼요. 저도 처음엔 포트 번호가 뭔지도 몰랐지만, 지금은 완전 자유자재로 다루고 있거든요!

? 프로덕션 빌드와 배포하기

이제 Vite React 프로젝트를 실제로 배포할 준비를 할 차례예요. 개발 모드로 작업하는 건 편한데요, 실제 사용자들에게 보여주려면 프로덕션 빌드를 해야 하거든요. 걱정 마세요! 생각보다 진짜 간단해요.

빌드 명령어로 배포 파일 생성하기

프로덕션 빌드를 만드는 건 정말 쉬워요. 터미널에서 이 명령어 하나만 실행하면 되거든요:

npm run build

이 명령어를 실행하면 Vite가 알아서 코드를 최적화해줘요. 그니까요, 불필요한 공백도 제거하고, 파일도 압축하고, 로딩 속도도 엄청 빠르게 만들어주죠. 완료되면 dist 폴더가 생성되는데요, 이게 바로 배포할 파일들이에요.

주요 호스팅 플랫폼 배포 방법 비교

2026년 현재 Vite 프로젝트를 배포할 수 있는 플랫폼이 정말 많아요. 각각 장단점이 있는데요, 어디가 제일 좋은지 비교표로 정리해드릴게요:

솔직히 말하자면요, 처음 배포해보시는 분들한테는 Vercel이나 Netlify를 추천해요. 진짜 클릭 몇 번이면 끝나거든요!

Vercel로 1분 만에 배포하기

제가 가장 자주 사용하는 방법을 알려드릴게요. Vercel이 진짜 편한 게요, Git에 푸시만 하면 자동으로 배포되거든요.

GitHub Pages로 무료 배포하기

GitHub Pages도 좋은 선택이에요. 특히 개인 포트폴리오나 프로젝트 문서 사이트를 만들 때 유용하죠. 근데요, 설정이 조금 필요해요.

먼저 vite.config.js 파일에서 base 경로를 설정해야 해요:

// vite.config.js
export default {
  base: '/repository-name/',  // 저장소 이름으로 변경하세요
}

그 다음엔 gh-pages 패키지를 설치하고 배포 스크립트를 추가하면 돼요:

npm install --save-dev gh-pages

// package.json에 추가
"scripts": {
  "deploy": "npm run build && gh-pages -d dist"
}

이제 npm run deploy 명령어 하나면 자동으로 빌드하고 GitHub Pages에 올려줘요. 정말 편리하죠!

빌드 최적화 옵션 설정하기

기본 빌드 설정도 충분히 좋지만요, 더 최적화하고 싶다면 몇 가지 옵션을 추가할 수 있어요. 2026년 현재 성능 최적화는 정말 중요하거든요!

좋은 소식은요, Vite가 이런 최적화를 대부분 자동으로 해준다는 거예요. 특별히 설정 안 해도 이미 엄청 빠르죠!

배포 후에는 꼭 실제 사이트에서 테스트해보세요. 로컬에서 잘 작동했어도 프로덕션 환경에서 문제가 생길 수 있거든요. 특히 API 엔드포인트나 환경 변수 설정을 다시 한번 확인하는 게 좋아요!

? Vite 실무 활용 팁과 꿀팁 모음

자, Vite로 React 프로젝트를 만드는 건 완전 마스터하셨죠? 근데요, 여기서 끝이 아니에요. 제가 2026년 현재까지 Vite 사용하면서 진짜 유용했던 팁들을 공유해드릴게요. 사실 이런 거 알고 모르고의 차이가... 생각보다 엄청 크거든요!

⚡ 개발 서버 속도 더 빠르게 만들기

Vite가 이미 빠른데 더 빠르게 할 수 있냐고요? 네, 있어요! 몇 가지 설정만 추가하면 체감상 확실히 달라져요.

? 알아두면 좋은 Vite 설정 파일 커스터마이징

솔직히 말하자면요, 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'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

이 설정 하나로 import 경로가 엄청 깔끔해져요. import Button from '../../../components/Button' 이런 거 대신 import Button from '@components/Button' 이렇게 쓸 수 있거든요!

? 환경 변수 제대로 활용하기

아, 그리고요! 환경 변수 사용할 때 주의할 점이 있어요. Vite에서는 VITE_ 접두사가 붙은 변수만 클라이언트에 노출되거든요. 이거 모르고 삽질한 적이 한두 번이 아니에요...

? 빌드 최적화 꿀팁

프로덕션 빌드할 때도 신경 쓸 게 많아요. 제가 실무에서 꼭 적용하는 설정들 공유해드릴게요!

1. 청크 크기 조절: build.chunkSizeWarningLimit 옵션으로 경고 기준 조정 가능해요. 기본은 500KB인데, 필요에 따라 늘리거나 줄일 수 있죠
2. 소스맵 제거: 프로덕션에선 build.sourcemap: false로 설정하면 빌드 파일 크기가 확 줄어들어요
3. 코드 스플리팅: manualChunks 설정으로 라이브러리별로 청크를 나눠주면 캐싱 효율이 좋아져요
4. 압축 최적화: build.minify: 'terser' 옵션으로 더 강력한 압축이 가능하지만, 빌드 시간은 좀 느려질 수 있어요

? 자주 만나는 문제와 해결법

진짜 솔직하게 말씀드리면요, Vite 사용하다가 가끔 이상한 에러 만날 때 있어요. 근데 대부분 알고 보면 간단한 거더라고요.

? Vite 플러그인 추천

마지막으로 제가 실제로 쓰면서 완전 유용했던 플러그인들 알려드릴게요. 이것만 설치해도 개발 경험이 확 달라져요!

• vite-plugin-svgr: SVG를 React 컴포넌트로 바로 사용할 수 있어요. 아이콘 관리가 정말 편해져요
• vite-plugin-pwa: PWA 설정 자동화해주는데, 오프라인 지원 추가할 때 완전 꿀이에요
• @vitejs/plugin-legacy: 구형 브라우저 지원이 필요하다면 이거 쓰세요. 자동으로 폴리필 추가해줘요
• vite-plugin-checker: TypeScript나 ESLint 에러를 브라우저에서 바로 볼 수 있어서 편해요

참고로요, 플러그인 너무 많이 설치하면 오히려 빌드 속도가 느려질 수 있으니까 정말 필요한 것만 골라서 쓰는 게 좋아요!

❓ 자주 묻는 질문

✨ 마무리하며

여기까지 Vite로 React 프로젝트를 5분 만에 시작하는 방법을 알아봤어요. 진짜로 명령어 몇 개만 치면 끝나잖아요? 솔직히 2026년에 새로운 React 프로젝트 시작한다면 Vite가 정답이에요. 개발 서버 속도도 빠르고, 빌드 시간도 훨씬 짧고, 설정도 간단하거든요.

아직 안 써보셨다면 한번 시도해보세요. npm create vite@latest 이 명령어 하나면 시작할 수 있어요. 처음에는 CRA랑 좀 다르다고 느껴질 수도 있는데, 며칠만 쓰면 왜 다들 Vite로 넘어가는지 알게 되실 거예요. 저도 처음엔 "뭐가 다르지?" 했는데 지금은 돌아갈 수가 없네요.

궁금한 점 있으시면 댓글 남겨주시고요, 이 글이 도움이 되셨다면 주변 개발자분들께도 공유해주세요. 다들 Vite로 빠르고 편한 React 개발 경험하시길 바랄게요!