Claude Sonnet 4.6으로 코딩 없이 나만의 웹 앱 만들기
고급45분2026-04-17
Claude Sonnet 4.6와 Next.js를 활용하여 Vercel API로부터 실시간 배포 데이터를 가져오고 상태를 모니터링하는 기능을 구현합니다. 배포 현황과 상세 로그를 한눈에 확인하고 10초마다 자동 갱신되는 실시간 웹 대시보드를 완성합니다.
이 코칭은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- AI 프롬프트를 통해 API 클라이언트와 프론트엔드 코드를 생성할 수 있습니다.
- 외부 서비스 API 키를 안전하게 관리하고 연동하는 방법을 이해합니다.
- 실시간 데이터 동기화를 위한 폴링(Polling) 기능을 구현할 수 있습니다.
- AI를 활용하여 기존 코드를 점진적으로 리팩토링하고 기능을 추가할 수 있습니다.
어떻게 진행해요
1. 프로젝트 초기 설정 및 환경변수 준비
2. Vercel API 액세스 토큰 발급받기
3. 발급받은 토큰 안전하게 저장하기
4. Vercel API 클라이언트 설계하기
5. 대시보드 UI 기본 구조 만들기
6. 실시간 데이터 자동 새로고침 기능 추가
7. 배포 상세 로그 보기 기능 추가 (리팩토링)
8. 완성된 대시보드 Vercel에 배포하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요