React + Vite

React + Vite

빠른 개발 서버와 번들링 성능을 제공하는 모던 React 개발 환경 조합

---

Npm

npm create vite@latest . // 현재 폴더 위치에 생성

---

폴더 구조

 

index.html

○ Vite 프로젝트의 진입점.

○ CRA와 달리 public이 아닌 프로젝트 루트에 있음.

 

src/main.tsx

○ React 엔트리 포인트.

○ React 앱을 DOM에 마운트.

 

src/App.tsx

○ 최상위 컴포넌트.

○ 라우터, 레이아웃의 시작점.

 

src/assets/

○ import해서 사용하는 이미지, 폰트 등을 담는 폴더.

○ 번들 대상.

 

public/

○ 빌드 과정없이 그대로 복사되는 정적 파일 등을 담는 폴더.

 

vite.config.ts

○ Vite의 전역 설정 파일.

○ 번들링, 개발 서버, 플러그인, 경로 별칭 등을 여기서 제어.