📌 React 공식 문서에서도 이제 create-react-app(CRA)을 추천하지 않는다.
📌 따라서 React 공식 문서에서 추천하는 Vite를 사용하여 React 프로젝트를 시작해보자!
✅ 1. Vite를 사용한 폴더 및 파일 생성하기
Vite는 CRA보다 훨씬 빠르고 가벼운 React 프로젝트 생성 도구이다.
🔹 터미널에서 실행:
npm create vite@latest . -- --template react✅ 여기서 .(현재 폴더)를 사용하면, 기존 폴더 안에서 바로 프로젝트를 생성할 수 있다.
📌 (주의: 폴더가 비어있어야 함! .git 파일이 있을 경우 경고가 뜰 수도 있음.)
📌 실행하면 터미널에 다음과 같은 메시지가 나타난다:
Scaffolding project in /Users/omb/Documents/vite-react-playground...
Done. Now run:
npm install
npm run dev✅ 이 메시지가 보이면 정상적으로 Vite 프로젝트가 생성된 것! 🎉
✅ 2. Vite 프로젝트 실행하기
이제 프로젝트를 실행할 차례! 아래 명령어를 차례대로 실행하자.
🔹 1) 패키지 설치
npm install✅ 이 명령어를 실행하면 node_modules 폴더가 생성되고, 필요한 패키지가 설치된다.
🔹 2) 개발 서버 실행
npm run dev✅ 실행하면 Vite 개발 서버가 시작되고, 터미널에 localhost:5173 링크가 뜰 것이다.
✅ 브라우저에서 http://localhost:5173 에 접속해서 실행을 확인하자!
📌 (기존 CRA는 localhost:3000을 사용했지만, Vite의 기본 포트는 5173이다.)
✅ 3. 실행 확인 후, GitHub에 커밋 & 푸시하기
프로젝트가 정상적으로 실행되면, 이제 GitHub에 올려야 한다.
🔹 1) 변경된 파일 확인
git status✅ Vite 프로젝트 파일들이 추가된 걸 확인할 수 있다.
🔹 2) Git에 파일 추가
git add .✅ 모든 변경 사항을 Git의 스테이징 영역에 추가한다.
🔹 3) 커밋하기
git commit -m "Initialize Vite React project"✅ Vite 프로젝트가 생성되었음을 기록하는 커밋 메시지를 남긴다.
🔹 4) GitHub에 푸시하기
git push origin main✅ GitHub에 반영 완료! 🎉
✅ 4. 최종 정리
✔ Vite 프로젝트 생성 완료 (npm create vite@latest . -- --template react)
✔ 패키지 설치 (npm install)
✔ 개발 서버 실행 (npm run dev) → http://localhost:5173 에서 확인
✔ GitHub에 커밋 & 푸시 (git add . → git commit -m "Initialize Vite React project" → git push origin main)
✅ 5. Vite 프로젝트에서 자주 사용하는 주요 명령어
| 명령어 | 설명 |
|---|---|
npm run dev | 개발 서버 실행 (기본 포트: localhost:5173) |
npm run build | 배포용 파일 생성 (CRA의 npm run build와 동일) |
npm run preview | 빌드된 프로젝트를 실행하여 미리보기 |
npm install 패키지명 | 새로운 패키지 설치 (CRA와 동일) |
✅ 6. 추가적으로 알아두면 좋은 점
📌 Vite는 src/main.jsx를 진입점으로 사용한다.
📌 index.html이 public 폴더가 아닌 프로젝트 루트에 위치한다.
📌 Webpack 대신 vite.config.js 파일을 사용하여 설정을 변경할 수 있다.
📌 Vite는 Hot Module Replacement (HMR)이 적용되어, 코드 변경 시 브라우저가 즉시 반영된다
