시작 전 준비 자료
도구별 역할
| 도구 | 역할 | 수업에서 쓰는 장면 |
|---|---|---|
| Claude Desktop Code | AI와 함께 코드를 만들고 수정하는 작업실 | 첫 화면 생성, 오류 수정, DB/API/배포 요청 |
| Node.js | 내 컴퓨터에서 웹앱을 실행하는 엔진 | npm install, npm run dev |
| Git / GitHub | 코드 변경 이력과 배포용 저장소 | Vercel 배포 소스 연결 |
| Vercel | 내 컴퓨터 밖에서 웹서비스를 열어주는 배포 서버 | 공개 URL 만들기 |
| Supabase | 데이터베이스와 로그인 | 저장 목록, 사용자별 권한 |
| 공공데이터 API | 실제 데이터를 가져오는 외부 정보원 | 샘플 데이터를 실제 데이터로 교체 |
| Tailwind CSS | 모바일 화면을 빠르게 정리하는 스타일 도구 | 모바일 망토 단계 |
| Firebase Cloud Messaging | 푸시 알림을 연결하는 데모 도구 | 알림 권한, service worker, 데모 알림 |
사전 체크
- Claude Desktop 최신 버전 설치
- Node.js 설치
- GitHub 계정 로그인
- Vercel 계정 로그인
- Supabase 계정 로그인
- 수업 전 설문: 만들고 싶은 서비스 한 줄, 꼭 필요한 기능 3개, 저장해야 할 데이터