[ vite+React 기초학습 1] Vite와 React 소개 및 개발 환경 구축

Vite란 무엇인가

Vite는 모던 프론트엔드 개발을 위한 도구입니다. 여기서 '번들러'란 여러 개의 JavaScript 파일을 하나로 합쳐주는 도구를 말하고, '모듈 핫 리로딩(HMR)'은 코드가 수정되었을 때 전체 페이지를 새로고침하지 않고도 수정된 부분만 실시간으로 반영해주는 기능입니다. Vite는 이러한 기능을 빠르고 효율적으로 제공합니다. 기존의 CRA(Create React App)보다 훨씬 가볍고 빠릅니다.

기본 개념

• 개발 시에는 ES Module 방식으로 동작
• 빌드 시에는 Rollup을 활용한 번들링 제공
• React, Vue, Svelte 등 다양한 프레임워크 지원

주요 사용 위치/상황

• 빠른 개발 환경이 필요한 프로젝트
• React 기반 SPA 또는 MPA 개발 시
• CRA를 대체할 최신 개발 방식 도입 시

구체적 코드 예시

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

브라우저에서 http://localhost:5173 접속 시 기본 React 화면이 출력됩니다.

 

---

Vite + React 프로젝트 구성 흐름도

 

1. 프로젝트 초기화

npm init -y

• package.json 파일 자동 생성
• 프로젝트 이름, 버전, 메인 파일 등이 기본값으로 설정됨

 

2. Vite + React 템플릿 설치

npm create vite@latest my-app -- --template react

• my-app이라는 폴더 안에 Vite + React 프로젝트 구조 자동 생성

-- --template react 설명

• --: npm에서 Vite CLI로 인자를 넘기기 위한 구분자
• --template react: Vite에 "react 템플릿으로 생성해라"는 의미

즉, 이 전체 명령어는:

npm create vite@latest → Vite CLI 실행
my-app → 프로젝트 폴더 이름 지정
-- → 이후 옵션은 Vite에게 전달
--template react → React 템플릿 지정

생성되는 디렉토리 구조

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

• React 기본 컴포넌트(App.jsx, main.jsx 등)가 포함된 구조
• .jsx 확장자를 사용하는 React 전용 템플릿

 

3. 프로젝트 디렉토리로 이동

cd my-app

• 해당 프로젝트 폴더로 진입

 

4. 의존성 설치

npm install

• package.json에 명시된 react, react-dom, vite 등 설치
• node_modules/, package-lock.json 생성됨

5. 개발 서버 실행

npm run dev

• 개발용 서버 구동 (기본 포트: 5173)
• 브라우저에서 실시간 핫 리로딩 가능

---

단계 요약

• 1단계: npm init -y로 초기 설정 파일 생성
• 2단계: npm create vite@latest my-app -- --template react로 React 기반 구조 생성
• 3단계: cd my-app으로 디렉토리 이동
• 4단계: npm install로 패키지 설치
• 5단계: npm run dev로 개발 서버 실행

 

핵심 요점 정리

• Vite는 빠르고 현대적인 개발 도구입니다
• CRA보다 가볍고 빠르게 프로젝트를 시작할 수 있습니다
• 단 4단계로 React 개발 환경을 완성할 수 있습니다
• 개발 서버는 기본적으로 5173 포트를 사용합니다

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.