React + Vite 번들링으로 빠르게 설치하는 방법

React를 시작할 때 속도가 느려 고민이신가요? 이번 포스팅에서는 React 프로젝트를 Vite로 빠르게 설치하고 설정하는 방법을 알려드리겠습니다. Vite는 경량화된 번들러로, 빠른 개발 환경을 제공하며 복잡한 설정 없이도 React를 간편하게 실행할 수 있습니다.

[ 엔카코 ]

---

1. Vite란 무엇인가요?

Vite는 “빠르다”는 의미를 가진 프랑스어 단어에서 유래했으며, JavaScript와 TypeScript 개발을 위한 차세대 빌드 도구입니다. Vite는 기존 번들러와 달리 다음과 같은 특징을 제공합니다.

• 빠른 서버 시작: Vite는 ES 모듈을 활용하여 기존의 번들링 과정 없이 개발 서버를 즉시 실행합니다.
• 빠른 HMR(Hot Module Replacement): 코드 변경 사항을 실시간으로 반영합니다.
• 경량 설정: 복잡한 설정 없이도 사용할 수 있습니다.

2. Vite 홈페이지를 검색하여 문서를 확인합니다.

 - Vite를 처음 사용하신다면 Vite 공식 홈페이지를 방문하여 문서를 확인하세요. 공식 문서에서는 Vite의 설치 및 설정 방법이 자세히 설명되어 있습니다.

3. 문서를 보며 npm을 이용한 Vite 프로젝트 생성 명령어 확인

 - 터미널에서 아래 명령어를 실행하여 Vite 프로젝트를 생성합니다.

 - 위 명령어를 실행하면 프로젝트 이름과 템플릿 종류를 선택하라는 메시지가 표시됩니다.

npm create vite@latest

 

4. 명령어를 입력하고 프로젝트 정보를 선택하여 서버 실행까지 진행합니다.

 

 - 원하는 옵션을 선택한 뒤, 프로젝트 디렉터리로 이동합니다.

cd <프로젝트 이름>

 - 의존성을 설치하고 개발 서버를 실행합니다.

npm install
npm run dev

 

5. 로컬 서버 확인

 - 개발 서버 실행 후 브라우저에서 http://localhost:5173에 접속하여 프로젝트가 정상적으로 실행되는지 확인하세요.

 

6. Vite 프로젝트의 주요 파일 구조

 - 프로젝트를 생성하면 기본적인 파일 구조가 생성됩니다.

my-react-app/
├── index.html
├── src/
│   └── main.jsx
│   └── App.jsx
├── package.json
├── vite.config.js

• index.html: 메인 HTML 파일입니다.
• src/main.jsx: React 진입점 파일입니다.
• src/App.jsx: React 컴포넌트 예제입니다.
• vite.config.js: Vite 설정 파일입니다.

 

7. Vite와 CRA(Create React App) 비교

 - Vite는 특히 빠른 개발 환경이 필요하거나 가벼운 설정을 선호하는 개발자들에게 적합합니다.

특징	Vite	CRA
번들링 속도	빠름	느림
HMR 속도	빠름	보통
설정 난이도	간단	간단
기본 제공 기능	ES 모듈, 빠른 서버 시작	번들링, 표준 설정 제공

---