2025년 Vite로 빠르게 React 프로젝트 만들기! (JavaScript 버전)

2025년 Vite로 빠르게 React 프로젝트 만들기!
(JavaScript 버전)

“요즘 create-react-app 쓰면 손가락질 받는다? 😅”
빠르고 가볍게 시작하고 싶다면,
Vite로 React 프로젝트를 만들어보세요!

 

안녕하세요, 개발자 여러분! 혹시 아직도 create-react-app으로 새 프로젝트 시작하시나요?
그럼 오늘 이 글이 꽤 도움이 될지도 몰라요. 😊
2025년 현재, 더 이상 CRA는 주류가 아니에요.

개발자 커뮤니티에서도 빠르고 가벼운 도구로 Vite가 대세로 떠오르고 있습니다.
이 글에서는 초보자도 따라할 수 있도록, Vite로 React 프로젝트를 만들고 실행하는 전 과정을
이미지와 명령어 중심으로, 하나하나 쉽게 설명드릴게요.

목차

1. Vite란? 왜 써야 할까? 2. Node.js 설치 및 확인하기 3. Vite로 React 프로젝트 생성 4. 프로젝트 실행과 개발 서버 확인 5. 프로젝트 폴더 구조 이해하기 6. App.jsx 수정해서 화면 바꾸기

1. Vite란? 왜 써야 할까? ⚡

여러분은 React 프로젝트를 만들 때 어떤 도구를 쓰시나요?
불과 몇 년 전만 해도 create-react-app(CRA)이 대세였죠. 하지만 요즘은 좀 다릅니다.
빠르고 가벼운 빌드 도구, 바로 Vite(비트)가 대세로 떠오르고 있어요!

📌 기존 CRA의 단점

• 느린 초기 빌드 시간 — 개발 서버 실행하는 데 시간이 오래 걸려요.
• 불필요한 파일 생성 — 쓰지도 않는 파일이 덕지덕지...
• 유지보수 어려움 — 커스터마이징하려면 eject 해야 되는 복잡함...

🌟 그래서 등장한 Vite!

Vite는 Rollup 기반의 번들러로서, 빠른 개발 서버 실행과 즉각적인 반영을 제공합니다.
무려 HMR(Hot Module Replacement)도 기본 탑재되어 있고요.

• ⚡ 엄청나게 빠른 실행 속도 — CRA랑 비교 불가!
• 🔄 HMR 지원 — 수정한 파일이 바로 반영!
• 🧼 미니멀한 템플릿 — 불필요한 설정 없이 바로 사용 가능!

기능	create-react-app	Vite
개발 서버 실행 속도	느림	매우 빠름 ⚡
기본 프로젝트 크기	무거움	가벼움
파일 구조	복잡	심플 & 직관적

 

이쯤 되면 "그래서 어떻게 쓰는 건데?"라는 궁금증이 생기시겠죠?
이제 다음 섹션에서 바로 Node.js 설치부터 확인해볼게요!

 

2. Node.js 설치 및 확인하기 🧱

Vite를 사용하려면 Node.js가 필수예요. 왜냐고요?
Vite는 Node 환경에서 동작하는 도구이기 때문에 npm과 함께 동작하거든요.
그래서 먼저 우리 컴퓨터에 Node가 깔려 있는지부터 확인해봐야 합니다.

✅ 설치 여부 확인 방법

터미널이나 명령 프롬프트(cmd)를 열고 아래 명령어를 입력해보세요.

node -v

 

아래처럼 버전이 뜨면 성공! 🎉

예를 들어 이렇게 나올 거예요:

v18.17.1

❌ 설치 안 되어 있으면?

그럴 땐 아래 공식 사이트에서 LTS 버전을 받아 설치하면 됩니다.

👉 https://nodejs.org/ko

참고로,

설치 시 윈도우 사용자라면 Node.js + npm이 함께 설치되기 때문에 따로 설정할 필요는 없어요.
정말 간단하죠?

📌 npm도 같이 확인해보세요!

npm -v

 

Node.js 설치 실습 영상

https://youtu.be/WmcLI60OnU0

 

 

이 명령어도 잘 작동한다면, 이제 다음 단계인 Vite로 프로젝트 생성하기로 넘어갈 준비 완료입니다! 😎

 

3. Vite로 React 프로젝트 생성하기 🛠️

자, 이제 본격적으로 Vite로 리액트 프로젝트를 만들어볼 시간입니다!
아래 단계별로 명령어를 따라가면 누구나 쉽게 첫 Vite 프로젝트를 만들 수 있어요.

① 프로젝트 생성 명령어

npm create vite@latest my-react-app

 

위 명령어를 입력하면 아래와 같이 프롬프트가 순차적으로 나옵니다.

1. ✔ 프로젝트 이름 입력 — 기본값: my-react-app
2. ✔ 프레임워크 선택 — React 선택
3. ✔ Variant 선택 — JavaScript 선택 (TypeScript도 선택 가능)

② 프로젝트 폴더로 이동 & 패키지 설치

cd my-react-app
npm install

 

이제 Vite가 기본 세팅해준 프로젝트 템플릿이 준비되었어요!
이 상태에서 바로 실행까지 할 수 있답니다.

 

Vite로 React 프로젝트 생성 실습 영상

https://youtu.be/cSApyMgNq1Q

 

💡 참고 꿀팁!

• VSCode로 폴더 열기: code . 입력하면 바로 열려요!

여기까지 오셨으면 거의 70%는 끝났다고 보셔도 됩니다.
이제 남은 건 개발 서버 실행해서 직접 React 화면을 확인하는 것뿐!

 

4. 프로젝트 실행과 개발 서버 확인하기 🚀

이제 진짜 React 프로젝트가 작동하는지 확인해봐야죠!
Vite는 CRA보다 훨씬 빠르게 개발 서버를 실행할 수 있어요.

▶ 개발 서버 실행

npm run dev

 

명령어를 실행하면, 아래와 같이 개발 서버 주소가 출력될 거예요:

  Local: http://localhost:5173/

 

해당 주소를 브라우저에 붙여넣거나, 커맨드라인에서 Ctrl + 클릭으로 열어보세요.
기본 Vite + React 화면이 나온다면... 성공입니다! 🎉

 

💡 팁: 종료할 땐?

• Ctrl + C 누르면 서버를 종료할 수 있어요!

지금까지 따라오셨다면, 이제 React + Vite 환경이 완벽하게 준비된 상태입니다. 👏
이제 코드도 살펴보고, 직접 수정해보면서 익숙해지면 됩니다.

 

5. 프로젝트 폴더 구조 이해하기 🗂️

이제 프로젝트가 실행됐으니, 내부 구조도 좀 살펴볼까요?
처음엔 폴더 안에 뭐가 뭔지 잘 모를 수 있지만, 핵심만 알면 금방 익숙해집니다!

📁 기본 디렉토리 구성

my-react-app/
├── public/          # 정적 파일 (favicon 등)
├── src/             # 실제 소스 코드 위치
│   ├── App.jsx      # 메인 React 컴포넌트
│   ├── main.jsx     # 진입 파일 (엔트리포인트)
│   ├── index.css    # 글로벌 스타일
├── .gitignore       # Git에서 무시할 파일 목록
├── package.json     # 프로젝트 메타 정보 및 의존성
├── vite.config.js   # Vite 설정 파일

 

여기서 가장 중요한 건 src/App.jsx 와 main.jsx입니다.
이 두 파일이 화면에 무엇을 어떻게 렌더링할지를 결정해요.

🧠 각 파일 간단 요약

파일/폴더	설명
public/	정적 자산 저장 폴더 (HTML, 이미지 등)
src/App.jsx	메인 컴포넌트, 실제 화면 렌더링 담당
src/main.jsx	ReactDOM을 이용해 App.jsx를 루트에 연결
vite.config.js	Vite 설정 (경로 alias 등 커스터마이징 가능)
package.json	프로젝트 정보 및 의존성 목록

 

지금 구조만 잘 이해해도 앞으로 리액트 프로젝트 유지보수가 한결 쉬워질 거예요.
다음은 드디어 코드를 직접 수정해서 화면을 바꿔보는 시간입니다!

 

6. App.jsx 수정해서 기본 화면 바꾸기 🎨

자~ 이제 우리만의 메시지를 담아볼 시간이에요!
Vite가 생성해준 기본 화면을 내 입맛대로 살짝 바꿔보면,
"오~ 진짜 내 프로젝트 같네?" 싶은 뿌듯함이 생기거든요. 😆

📌 App.jsx 열어서 수정해보기

1. src/App.jsx 파일을 열어주세요.
2. 아래 코드처럼 기본 JSX 구조를 간단하게 바꿔볼게요.

function App() {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>Hello, React with Vite! 🚀</h1>
      <p>처음 만든 나만의 리액트 앱이에요. 너무 신나요! 😍</p>
    </div>
  );
}

export default App;

 

저장하면… 놀라지 마세요. 😮

 

바로 화면에 반영됩니다!

🔥 HMR 기능 덕분이에요!

• HMR(Hot Module Replacement)은 코드 저장 시 자동 새로고침 없이 반영!

이제부터는 내 마음대로 컴포넌트도 추가하고, CSS도 꾸며보면서 진짜 프로젝트처럼 키워나갈 수 있어요.
처음의 이 한 걸음이, 나중엔 큰 앱으로 성장할 수도 있겠죠?

 

🧩 React 프로젝트, 이제 시작입니다!

오늘은 Vite를 활용한 React 프로젝트 시작 방법을 처음부터 끝까지 따라가 봤습니다.
생각보다 간단했죠?

CRA보다 훨씬 빠르고 가볍기 때문에, 앞으로 새 프로젝트는 이걸로 시작하는 게 좋습니다. 😊

정리해 보면 다음과 같아요.

• Node.js 설치 여부 먼저 확인하고
• npm create vite@latest 명령어로 새 프로젝트 생성
• npm run dev로 바로 실행하고 확인까지 완료! 🔥

지금까지 잘 따라오셨다면, 앞으로 어떤 프로젝트든 가볍게 시작할 수 있을 거예요. 💪
다음 글에서는 React 컴포넌트를 좀 더 깊이 파보는 실전 예제를 다룰 예정이니 기대해주세요!