[React] 리액트 처음 환경설정

1. Node.js 설치 확인

Node.js가 설치

node -v  # Node.js 버전 확인
npm -v   # npm 버전 확인

 

 

2. 프로젝트 생성

# 프로젝트 디렉토리 생성 및 이동
mkdir my-react-app
cd my-react-app

# Vite를 사용하여 React 프로젝트 생성
npm create vite@latest . -- --template react

 

3. 프로젝트 설정

# 필요한 패키지 설치
npm install

# 개발 서버 실행
npm run dev

 

4. 추가 서버 실행 확인

 

 

 

 

 

 

 

 

5. vite + react 구성요소 

 

 

 

6. 예제 

 

 

📦 your-project
├── 📂 backend/               # Flask 백엔드 (Python)
│   ├── flask_server.py       # Flask API 서버
│   ├── 📂 data/              # CSV 데이터 저장
│   ├── requirements.txt      # 필요한 Python 라이브러리
│
├── 📂 frontend/              # Vite + React 프론트엔드
│   ├── 📂 src/
│   │   ├── 📂 components/    # UI 컴포넌트
│   │   │   ├── CandleChart.tsx  # 차트 컴포넌트
│   │   │   ├── Dropdown.tsx     # 종목 & 타임프레임 선택 드롭다운
│   │   │   ├── Loader.tsx       # 로딩 스피너 (옵션)
│   │   │   ├── ErrorMessage.tsx # 에러 메시지 (옵션)
│   │   │
│   │   ├── 📂 pages/         # 페이지 (추후 확장 가능)
│   │   ├── App.tsx           # 메인 App 컴포넌트
│   │   ├── main.tsx          # React 엔트리 파일
│   │   ├── index.css         # 스타일 파일
│   │
│   ├── 📂 public/            # 정적 파일
│   ├── vite.config.ts        # Vite 설정 파일
│   ├── package.json          # 프로젝트 설정 파일
│
└── README.md                 # 프로젝트 설명