React: Vite로 React 프로젝트

React: Vite로 React 프로젝트

 React와 Vite를 활용한 프로젝트는 현대적인 웹 개발 환경을 빠르고 효율적으로 구축하기 위해 진행되었다. 기존 웹 개발 환경에서는 프로젝트 생성과 실행 과정에서 많은 설정과 긴 빌드 시간이 필요했지만, Vite는 빠른 개발 서버와 즉각적인 변경 반영 기능을 제공하여 개발 생산성을 크게 향상시킨다. 특히 React와 함께 사용하면 컴포넌트 기반 개발 방식의 장점을 극대화할 수 있어 유지보수와 확장성이 뛰어난 웹 애플리케이션을 구현할 수 있다.

 

 이번 프로젝트에서는 React의 컴포넌트 구조와 상태 관리 방식을 기반으로 사용자 인터페이스를 구성하고, Vite의 빠른 번들링 및 개발 환경을 활용하여 효율적인 프론트엔드 개발 환경을 구축하고자 하였다. 또한 JSX 문법을 활용해 HTML과 JavaScript를 결합한 직관적인 코드 작성 방식을 적용함으로써 코드의 재사용성과 가독성을 높이고자 하였다.

 

 프로젝트 진행 과정에서는 Node.js 환경 구성, Vite 기반 React 프로젝트 생성, 컴포넌트 설계 및 실행 과정을 직접 수행하며 최신 프론트엔드 개발 흐름을 이해하는 데 중점을 두었다. 이를 통해 빠른 개발 속도와 효율적인 프로젝트 구조 설계의 중요성을 학습하고, 실제 웹 서비스 개발에 활용 가능한 기반 기술을 익히고자 하였다.

 

1. 최신 LTS 설치

winget install OpenJS.NodeJS.LTS

 

 

2. React 프로젝트 생성

npm create vite@latest reactapp

선택
React
JavaScript

 

 

3. http://localhost:5173/ 접속

VITE v8.0.10

 

 

http://localhost:5173/

 

 

4. 실행

cd reactapp

npm install

npm run dev

 

5. JSX 파일 

reactapp/src/App.jsx 경로

 

6. 파일 모듈화

디렉터리 구성 목표

src/
 ┣ components/
 ┃ ┣ RiskMeter.jsx
 ┃ ┣ SectionTitle.jsx
 ┃ ┣ BehaviorLog.jsx
 ┃ ┣ PublicDataPanel.jsx
 ┃ ┣ PolicyActionPanel.jsx
 ┃ ┣ StatsPanel.jsx
 ┃ ┗ InterventionModal.jsx
 ┣ data/
 ┃ ┣ products.js
 ┃ ┣ personas.js
 ┃ ┣ regions.js
 ┃ ┗ policyLinks.js
 ┣ utils/
 ┃ ┗ formatters.js
 ┣ hooks/
 ┃ ┗ useRiskCalculator.js
 ┗ App.jsx