React Init vite

---

이 글에서는 WebStorm을 사용한 React Vite 프로젝트 구성을 정리한다.

⚡ Vite란?

정의

Vite는 빠른 프론트엔드 개발 서버이자 빌드 도구다.

개발 시에는 빠른 서버와 즉각적인 반영을 제공하고, 배포 시에는 최적화된 번들 결과물을 만든다.

🧩 Node.js 설치

Vite는 Node.js 환경에서 동작하므로 먼저 Node.js를 설치해야 한다.

• Node 공식 홈페이지에서 설치 파일을 내려받는다.
• 설치 시 Native Modules용 도구 설치 옵션을 확인하면 도움이 된다.

🛠️ Vite 프로젝트 생성

터미널에서 Node.js가 잘 설치됐는지 확인한다.

node -v

버전 정보가 출력되면 정상적으로 설치된 것이다.

프로젝트를 생성한다.

npm create vite@latest

또는 원하는 폴더 이름으로 생성할 수 있다.

npm create vite@latest [프로젝트명]

• Framework : React
• Variant : JavaScript + SWC

• npm install : dependency 다운로드
• npm i : dependency 다운로드
• npm run dev : 프로젝트 실행

🧪 React 개발 환경 구성(npx)

• Node.js 설치
• 환경변수 등록
• npx create-react-app [프로젝트명] 대신 Vite 기반 생성 사용

🧰 React Developer Tool

• 크롬 확장 프로그램이다.
• 시크릿 모드에서 허용과 파일 URL 액세스를 허용해야 한다.
• React를 사용하는 페이지에 접속하면 활성화된다.

• 개발 모드에서는 색상이 달라질 수 있다.

• Component 구조를 확인할 수 있다.

📌 정리

• Vite는 빠른 React 개발 환경을 만들 때 자주 사용한다.
• npm create vite@latest로 프로젝트를 시작할 수 있다.
• React Developer Tool을 함께 설치하면 디버깅이 편하다.

---

연결문서

• npm
• npx
• vite
• WebStorm