vite 환경 만들기

npm init vite@latest

npm i

npm run dev

REACT

📜 React 06 Todo List - React 컴포넌트를 모듈로 분리 😊

• 파일구조

06/
├── node_modules/        ← 설치된 외부 라이브러리
├── public/              ← 정적 파일 저장 디렉토리 (예: favicon, 이미지 등)
├── src/                 ← 실제 소스 코드가 위치한 디렉토리
│   ├── assets/          ← 이미지, 아이콘 등 정적 자산
│   │   └── react.svg
│   ├── components/      ← 재사용 가능한 컴포넌트
│   │   ├── Footer.tsx
│   │   └── Header.tsx
│   ├── pages/           ← 페이지 단위 컴포넌트
│   │   ├── Todo.tsx
│   │   ├── TodoInput.tsx
│   │   ├── TodoItem.tsx
│   │   └── TodoList.tsx
│   ├── App.css          ← 전체 앱의 스타일
│   ├── App.tsx          ← 루트 컴포넌트
│   ├── index.css        ← 글로벌 스타일
│   ├── main.tsx         ← 앱 진입점 (ReactDOM.render)
│   └── vite-env.d.ts    ← Vite 환경 설정 타입 정의
└── .gitignore           ← Git에서 무시할 파일 목록

• 💻 Header.tsx
• 💻 Footer.tsx
• 💻 Todo.tsx
• 💻 TodoInput.tsx
• 💻 TodoItem.tsx
• 💻 TodoList.tsx
• 💻 App.tsx
• 💻 main.tsx

ch02 hello

📜 01 Hello - React

• 💻 01 Hello - React

📜 02 Hello DOM

• 💻 02 Hello DOM

📜 03 Hello React

• 💻 03 Hello React

📜 04 Hello JSX with babel

• 💻 04 Hello JSX with babel

ch02 todo

📜 06 Simple Todo List - React

• 💻 06 Simple Todo List - React

📜 07 Simple Todo List - React Component

• 💻 07 Simple Todo List - React Component

📜 08 Simple Todo List - {titleName}

• 💻 08 Simple Todo List - {titleName}

ch02 vite

📜 09 (폴더)

• 파일 구조

vite/
└── 09/
    ├── node_modules/          ← 설치된 외부 패키지
    ├── public/                ← 정적 파일 저장 디렉토리
    ├── src/                   ← 실제 소스 코드 디렉토리
    │   ├── assets/            ← 이미지 등 정적 리소스
    │   ├── components/        ← 재사용 가능한 UI 컴포넌트
    │   │   └── Title.tsx
    │   └── pages/             ← 페이지 단위 구조
    │       └── todo/          ← 할 일 관련 페이지들
    │           └── List.tsx
    ├── App.css                ← App 전용 스타일
    ├── App.tsx                ← 루트 컴포넌트
    ├── index.css              ← 글로벌 스타일 정의
    ├── main.tsx               ← 진입점 (ReactDOM.createRoot)
    └── index.html             ← HTML 템플릿 (Vite가 여기에 React 앱 마운트)

• 💻 Title.tsx
• 💻 List.tsx
• 💻 App.tsx
• 💻 main.tsx