vite + react로 웹앱 만들기

vite + react로 웹앱 만들기

ChatGPT의 말:

좋습니다! Vite + React 조합은 빠른 개발 환경과 간편한 설정으로 요즘 매우 인기 있는 방식입니다. 여기선 Vite + React 웹앱을 만드는 전체 흐름을 설명드릴게요.

---

✅ Vite + React 웹앱 만들기: 전체 과정

1. 📦 개발 환경 준비

# Node.js 설치 여부 확인
node -v
npm -v

Node.js 다운로드

---

2. 🛠 Vite + React 프로젝트 생성

# 프로젝트 생성
npm create vite@latest my-app --template react

# 또는 TypeScript 버전
npm create vite@latest my-app --template react-ts

cd my-app

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

➡ 브라우저에서 http://localhost:5173 접속

---

3. 📁 폴더 구조 설명 (기본 구조)

my-app/
├─ public/               # 정적 파일 (favicon 등)
├─ src/
│  ├─ assets/            # 이미지 등 리소스
│  ├─ App.jsx            # 앱 루트 컴포넌트
│  ├─ main.jsx           # React 진입점
├─ index.html            # HTML 템플릿
├─ vite.config.js        # Vite 설정

---

4. ✨ 주요 개발 흐름

🔹 App.jsx

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello React + Vite!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

export default App;

🔹 main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

---

5. 📦 자주 사용하는 라이브러리 설치

# 라우팅
npm install react-router-dom

# 상태관리
npm install zustand      # 또는 redux, recoil 등

# 서버 통신
npm install axios

# UI 프레임워크
npm install @mui/material @emotion/react @emotion/styled
# 또는 tailwindcss, chakra-ui 등

---

6. 🚀 배포하기 (예: Vercel)

# Vercel CLI 설치
npm install -g vercel

# 배포
vercel

---

💡 추천 폴더 구조 (실전용)

src/
├─ components/        # 공통 컴포넌트
├─ pages/             # 페이지별 컴포넌트
├─ routes/            # 라우터 정의
├─ hooks/             # 커스텀 훅
├─ stores/            # 상태관리(store)
├─ api/               # axios API 모듈
├─ utils/             # 유틸 함수