사전 요구사항
- React 기본 지식
- Claude Code 기본 사용법
- Node.js 및 npm 설치
학습 목표
- Claude Code로 React 프로젝트 구조 설계하기
- 컴포넌트 기반 개발 자동화하기
- 상태 관리 및 라우팅 구현하기
- 프로덕션 빌드 및 배포하기
프로젝트 초기화
Claude Code를 사용하여 React 프로젝트를 생성하고 초기 설정을 구성합니다.
bash
# Claude Code 시작
claude
# React 프로젝트 생성 요청
"Vite를 사용해서 TypeScript React 프로젝트를 만들어줘.
프로젝트 이름은 'my-awesome-app'이고,
Tailwind CSS와 React Router를 포함해줘."
# Claude가 자동으로 실행:
# 1. npm create vite@latest
# 2. TypeScript template 선택
# 3. Tailwind CSS 설치 및 설정
# 4. React Router 설치참고사항
- •Vite는 빠른 개발 서버와 빌드를 제공합니다
- •TypeScript를 사용하면 타입 안정성을 확보할 수 있습니다
- •필요한 라이브러리를 미리 명시하면 초기 설정 시간을 절약할 수 있습니다