자료실

클로드 코드로 공익 웹앱 만들기 실습

빈 폴더에서 내 서비스 주소까지. 지도 웹앱 하나를 처음부터 끝까지

빈 폴더에서 시작해 공공 데이터 지도 웹앱을 만들고 GitHub와 Vercel로 배포까지. 설치부터 막히는 지점까지 한 장씩 따라가는 실습 교재예요.

PDF 70쪽, 실습 슬라이드, 준비와 4개 파트

미리보기

이런 분께 권해요

• 코딩을 해 본 적은 없지만 내 서비스를 한 번 띄워 보고 싶은 분
• 설치 단계에서 막혀 번번이 포기했던 분
• 바이브 코딩을 강의가 아니라 실습으로 끝까지 따라가 보고 싶은 분

다 읽고 나면

• Node.js, Git, VS Code, 클로드 코드를 순서대로 설치합니다
• Plan 모드로 계획을 세우고 CLAUDE.md에 프로젝트 규칙을 적어 둡니다
• 공공 데이터로 지도, 시설 카드, 내 주변 찾기, 카카오맵 길찾기를 붙입니다
• GitHub에 올리고 Vercel로 배포해 내 주소를 공유합니다

목차

1. 들어가며. 왜 지금 바이브 코딩인가
   • 지금 세상에서 벌어지고 있는 일
   • 그럼 개발자는 사라지나?
   • 왜 지금 배워야 하나
2. Part 0. 시작 전 준비
   • 오늘 함께 만들 것
   • Node.js, Git, VS Code, 클로드 코드 설치
   • 작업 폴더는 영문 경로에
   • 원활한 실습을 위한 권한 설정
3. Part 1. 환경 셋업과 첫 대화
   • 완성품 데모
   • 빈 폴더에서 시작하기
   • 권한 승인, 왜 자꾸 물어봐요?
   • 꼭 알아둘 명령 2개
4. Part 2. 프로젝트 초기화와 지도 만들기
   • Plan 모드로 계획부터
   • CLAUDE.md, 프로젝트 규칙 노트
   • Next.js 프로젝트 생성
   • JSON 파일이 지도가 되기까지
   • 에러가 났다면 (한 번은 날 거예요)
5. Part 3. 기능 만들기
   • 구를 누르면 시설 카드 목록
   • 내 주변 시설 찾기
   • 카카오맵으로 길찾기 보내기
   • 시설 마커와 카테고리 필터
6. Part 4. 배포와 자유 확장
   • GitHub 계정과 Git 설정
   • 첫 커밋을 클로드에게 맡기기
   • Vercel로 한 번 클릭 배포
   • Vercel 배포 403 함정
   • 내 기능 하나 붙이기

자기소개 한 줄을 쓴 회원은 바로 받을 수 있어요.