✅ React 기초 강좌

🎯 학습 목표

• React 프로젝트를 직접 생성하고 실행해본다.
• Vite를 활용한 빠른 개발 환경을 구축한다.
• 디렉토리 구조와 핵심 파일 역할을 이해한다.

✅ Vite란 무엇인가요?

Vite는 차세대 프론트엔드 빌드 도구로, Webpack보다 훨씬 빠른 번들링과 개발 서버를 제공합니다.

React, Vue 등 다양한 프레임워크와 호환되며 빠른 HMR(Hot Module Replacement), 빠른 시작 속도가 장점입니다.

⚙️ 사전 준비 사항

1. Node.js 설치:

   https://nodejs.org/

   → LTS 버전(20.x) 설치 권장

2. npm 또는 yarn 사용 가능

   Vite는 npm 기반으로 설치됨

🛠️ React 프로젝트 생성하기 (with Vite)

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

# 2. 생성된 디렉토리로 이동
cd react-app

# 3. 의존성 설치
npm install

# 4. 개발 서버 실행
npm run dev

실행하면 브라우저에서 http://localhost:5173으로 접속할 수 있습니다.

🗂️ 프로젝트 폴더 구조 설명

react-app/
├── public/               # 정적 파일 저장 (예: favicon, 이미지 등)
├── src/
│   ├── main.jsx          # 앱 진입점 (ReactDOM.render 역할)
│   ├── App.jsx           # 루트 컴포넌트
│   └── ...               # 기타 컴포넌트 파일 생성 예정
├── index.html            # HTML 템플릿
├── package.json          # 프로젝트 설정 및 의존성
├── vite.config.js        # Vite 설정

💡 실습 팁

• App.jsx 파일을 열어 "Hello React" 메시지를 수정해보세요.
• 저장하면 즉시 브라우저에서 반영됩니다. (HMR 기능 덕분)

✍️ 과제

1. Vite로 React 프로젝트를 생성하고, "Hello, React!" 텍스트를 화면에 띄워보세요.

import './App.css';

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

2. 개발 서버를 종료하려면?

터미널에서 Ctrl + C 입력

GitHub - heroyooi/react-app at ch1_2