프로젝트 개요 한 줄 소개: 직관적인 UI로 구매할 품목을 빠르게 기록하고 관리할 수 있는 반응형 웹 쇼핑 리스트 애플리케이션 배포 링크: 쇼핑 리스트 배포 페이지 개발 배경: 클로드 코드(Claude Code)를 활용한 프롬프트 엔지니어링 및 AI 보조 코딩 워크플로우를 실습하고, 데이터 영속성과 클라우드 배포까지의 풀사이클 파이프라인을 구축하기 위해 제작했습니다.
주요 기능 항목 추가 및 삭제: 입력창을 통한 새로운 장보기 품목 등록 및 즉시 삭제 기능 완료 체크 기능: 체크박스 클릭 시 취소선 및 완료 상태 토글 진행 상태 카운터: 전체 등록 항목 대비 완료된 항목 개수를 실시간으로 계산해 시각화 (n개 항목 중 m개 완료) 데이터 영속성 보장: Supabase 연동을 통해 브라우저 새로고침이나 재접속 시에도 목록 데이터 유지 반응형 웹 UI: 모바일과 데스크톱 환경 모두에서 깔끔하게 작동하는 중앙 정렬 레이아웃
기술 스택 (Tech Stack) Frontend: HTML5, CSS3, JavaScript (React / Vanilla JS 기반) Backend / Database: Supabase (PostgreSQL 기반 데이터베이스 연동) Deployment & CI/CD: Vercel (Git 커밋 기반 자동 빌드 및 배포) AI Tooling: Claude Code (요구사항 정의, 기본 컴포넌트 생성 및 디버깅)
구현 및 학습 포인트 (Portfolio Highlights) AI 보조 개발(Claude Code) 활용: 단순 코드 생성을 넘어 DB 연동 및 배포 단계까지 프롬프트 기반의 반복 개발(Iterative Development) 수행 BaaS(Backend-as-a-Service) 연동: 로컬 스토리지를 넘어 Supabase를 연동하여 실시간 데이터베이스 CRUD 구현 클라우드 배포 파이프라인: GitHub 저장소와 Vercel을 연동해 커밋 시 자동으로 프로덕션 배포가 이루어지는 무중단 배포 환경 구축
