Day 2 개발 일정 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 프론트엔드/백엔드 엔지니어
• 중간 수준의 프레임워크(예: Tailwind, Supabase) 사용 경험자

핵심 요약

• GitHub 통합 및 자동 배포 시스템 구축 (예: github Actions 활용)
• Tailwind CSS와 Bolt 테마 생성 (코드: tailwind.config.js에서 테마 정의)
• Supabase 실시간 데이터 마이그레이션 (모의 데이터 → 실제 데이터 전환)
• CRUD 기능 구현 (Create, Read, Update, Delete)
• 21st Dev 컴포넌트 테스트 (UI/UX 성능 검증)

섹션별 세부 요약

1. 주요 개발 일정

• GitHub과의 통합 설정 (Auto Deploy 트리거 설정)
• Bolt 테마 생성 후 Tailwind config 파일에 적용
• JSON 기반 캐릭터 시트 데이터를 Supabase로 이전
• CRUD 기능 구현 (데이터 생성/수정/삭제 로직 포함)
• 지도 기능 구현 (Map View + 위치 핀 표시)

2. 기술적 구현 포인트

• Supabase 데이터베이스 연결: supabase-js 라이브러리 사용
• Tailwind 테마 정의: theme.extend 속성을 통해 Bolt 스타일 적용
• 자동 배포: GitHub Actions 워크플로우 파일(.github/workflows/deploy.yml) 생성
• JSON 데이터 파싱: JSON.parse()로 캐릭터 시트 파일 로드

3. 테스트 및 검증

• 21st Dev 컴포넌트 테스트 (UI/UX 테스트 케이스 포함)
• Supabase 데이터 동기화 검증 (Mock → Live 데이터 전환 시 오류 확인)
• CRUD 기능의 데이터 무결성 검증 (예: 삭제 시 외래 키 제약 조건 확인)

결론

• GitHub Actions를 활용한 자동 배포 설정이 안정적인 CI/CD 파이프라인 구축의 핵심
• Tailwind + Bolt 테마 적용을 통해 빠른 UI/UX 개발이 가능
• Supabase 데이터 마이그레이션 시 Mock 데이터와 실제 데이터의 일관성을 철저히 검증해야 함
• CRUD 기능 구현 시 데이터베이스 트랜잭션과 롤백 메커니즘을 반드시 포함할 것