Code Beat

React, Vite로 시작하기 본문

Code/React

React, Vite로 시작하기

코-빗 2025. 12. 3. 12:38
728x90

React 프로젝트, 이제는 Vite로 시작해보자

리액트 프로젝트 시작한다고 하면 예전에는
create-react-app(CRA)부터 떠올리셨을 텐데요,
요즘은 Vite로 시작하는 게 사실상 표준에 가깝습니다.

빌드 속도도 빠르고, 개발 서버도 가볍고, 설정도 심플해서
“아… 새 프로젝트 하나 파볼까?” 할 때 쓰기 딱 좋아요.

이번 글에서는:

  1. Vite가 뭐길래 다들 쓰는지 간략 소개
  2. Node / npm 설치 확인
  3. Vite로 React 프로젝트 생성하기
  4. 폴더 구조 살펴보기
  5. 개발 서버 실행 & 기본 설정 살짝 손보기

까지 한 번에 정리해보겠습니다.

1. Vite가 뭐길래?

Vite는 간단히 말하면,

“차세대 프론트엔드 빌드 도구 + 개발 서버”

입니다.

  • ESBuild, Rollup 등을 활용해서 번개처럼 빠른 빌드
  • 개발 중에는 번들 없이 바로 ESM(ES Modules) 기반으로 서빙
  • React, Vue, Svelte 등 주요 프레임워크 템플릿을 기본 제공
  • TypeScript, JSX, CSS 모듈 등 기본 지원

한 줄 요약하자면:

“CRA보다 훨씬 빠르고, 설정도 심플한 React 스타터”

라고 생각하셔도 크게 틀리지 않습니다.

2. 사전 준비: Node.js / npm 설치 확인

먼저 아래 두 가지가 설치되어 있어야 합니다.

  • Node.js
  • npm (Node 설치하면 같이 들어 있습니다)

터미널(또는 PowerShell, CMD, iTerm 등)을 열고 아래 명령어로 버전 확인해봅니다.

 
node -v npm -v
  • 보통 Node 18+ 버전이면 무난하게 사용 가능합니다.
  • 만약 command not found 이런 에러가 나오면 Node.js를 먼저 설치해 주세요.

(Node 설치는 nodejs.org에서 LTS 버전 설치하시면 됩니다.)

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

이제 본격적으로 프로젝트를 만들어볼게요.

3-1. 기본 명령어

Vite 공식에서 권장하는 방식은 아래와 같습니다.

 
npm create vite@latest

명령어를 실행하면, 터미널에서 몇 가지를 물어봅니다.

  1. Project name?
    → 만들고 싶은 폴더 이름 입력 (예: my-react-vite-app)
  2. Select a framework
    → 방향키로 React 선택 후 엔터
  3. Select a variant
    →
    • JavaScript로 할 거면: React
    • TypeScript로 할 거면: React + TypeScript 선택

이렇게 하면 입력한 프로젝트 이름으로 폴더가 하나 생성됩니다.

3-2. 프로젝트 폴더로 이동 & 의존성 설치

프로젝트 폴더로 이동한 뒤, npm install로 패키지를 설치합니다.

 
cd my-react-vite-app npm install

설치가 끝나면 개발 준비는 거의 완료된 상태입니다.

4. 개발 서버 실행해보기

이제 바로 로컬 개발 서버를 띄워봅니다.

 
npm run dev

실행하면 터미널에 대략 이런 문구가 뜹니다.

 
VITE vX.X.X ready in XXX ms ➜ Local: http://localhost:5173/

브라우저에서 http://localhost:5173/ 주소로 들어가면
Vite 기본 React 페이지가 뜨는 걸 확인하실 수 있습니다.

⚡ 처음 뜨는 화면은 파란색 Vite 로고 + React 로고가 빙글빙글 도는 화면일 거예요.

5. Vite + React 프로젝트 기본 구조 살펴보기

생성된 폴더 구조는 대략 이런 느낌입니다. (TypeScript 기준 예시)

 
my-react-vite-app/ ├─ index.html ├─ package.json ├─ vite.config.ts ├─ tsconfig.json ├─ public/ └─ src/ ├─ main.tsx ├─ App.tsx ├─ assets/ └─ ...

각 파일의 역할을 간단하게만 짚고 넘어가 볼게요.

5-1. index.html

Vite에서는 루트에 있는 index.html이 매우 중요합니다.
번들러가 이 파일을 엔트리처럼 사용합니다.

중요한 부분은 이 한 줄:

 
<script type="module" src="/src/main.tsx"></script>

이 스크립트에서 React 앱을 불러와서 DOM에 마운트하게 됩니다.

5-2. src/main.tsx

React 앱의 진입점입니다.
보통 여기서 App 컴포넌트를 #root에 마운트합니다.

 
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( <React.StrictMode> <App /> </React.StrictMode> );
  • index.css는 전역 스타일
  • App 컴포넌트는 실제 화면을 구성하는 루트 컴포넌트

5-3. src/App.tsx

처음 열었을 때 보이는 화면을 구성하는 곳입니다.
처음에는 Vite에서 제공하는 예제 코드가 꽤 길게 들어있는데,
보통은 싹 지우고 아래처럼 깔끔하게 시작합니다.

 
function App() { return ( <div> <h1>Vite + React 시작하기</h1> <p>여기가 이제부터 여러분의 메인 화면이 됩니다 🙂</p> </div> ); } export default App;

코드를 수정하면, 페이지 새로고침 없이 바로 반영되는 것도 확인하실 수 있습니다. (HMR: Hot Module Replacement)

6. 스크립트 명령어 정리

package.json을 열어보면 아래처럼 스크립트들이 들어있습니다.

 
{ "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }

각 명령어는 다음과 같은 역할을 합니다.

  • npm run dev
    → 개발 서버 실행 (코드 수정 시 바로 반영, HMR)
  • npm run build
    → 배포용 정적 파일 빌드 (dist/ 폴더에 생성)
  • npm run preview
    → 빌드된 결과물을 로컬에서 미리보기용 서버로 띄워줌
    (실제 배포 환경에서 어떻게 보일지 확인 가능)

7. VS Code에서 편하게 개발하기 (선택)

코드 에디터는 VS Code를 많이 사용하시는 편이라,
조금 더 편하게 개발하는 팁도 간단히 적어둘게요.

  1. VS Code 열기 → File > Open Folder → my-react-vite-app 폴더 선택
  2. 추천 확장 프로그램:
    • ESLint
    • Prettier
    • TypeScript React 관련 기본 지원은 자동으로 됩니다.
  3. 터미널을 VS Code 안에서 열고 (Ctrl + \``), 거기서 npm run dev` 실행하시면 한 곳에서 작업하기 편합니다.

8. 자주 나오는 질문 간단 정리

Q. 기존 create-react-app이랑 뭐가 다른가요?

  • CRA: Webpack 기반, 초기 빌드/리로드가 상대적으로 느림
  • Vite: 개발 서버에서 번들 없이 모듈 단위로 로딩 → 훨씬 빠름
  • 설정 파일도 Vite가 훨씬 가볍고 직관적이라 커스터마이징하기 좋습니다.

Q. TypeScript 안 쓰고 그냥 JS만 써도 되나요?

네, Vite 템플릿 선택할 때 React (JS)로 선택하시면 됩니다.

원하실 때 나중에 TypeScript를 추가로 도입하는 것도 가능합니다.
하지만 새 프로젝트라면 개인적으로는 처음부터 TS로 시작하는 걸 살짝 추천드려요.

9. 마무리

이번 글에서는

  • Vite가 무엇인지
  • Node 환경 체크
  • npm create vite@latest로 React 프로젝트 시작하는 법
  • 기본 폴더 구조와 핵심 파일 소개
  • npm run dev로 개발 서버 구동

까지 한 번에 정리해봤습니다.

앞으로 이어지는 글에서는:

  • 절대경로(import alias) 설정하기
  • 환경 변수(.env) 다루기
  • Vite에서 이미지/정적 파일 사용하기
  • GitHub Pages / Vercel 배포하기

같은 주제도 천천히 다뤄보면 좋을 것 같아요.

궁금한 점이나 이어서 다뤄줬으면 하는 Vite/React 관련 주제 있으면
댓글로 남겨주세요 🙂