PWA 프로젝트 회고: React, TypeScript, Vite 활용한 사랑꾼 서비스 개발
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

🪖 [큐시즘] 밋업 프로젝트 회고

카테고리

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

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 프로젝트 관리자, 협업 팀원

핵심 요약

  • "사랑꾼"은 군인/곰신 커플을 위한 공유 캘린더 PWA 서비스로, 감정 공유 및 일정 관리를 핵심 기능으로 제공
  • 기술 스택: TypeScript, React + Vite, PWA, Tailwind CSS, Zustand, MSW, Vitest 등 사용
  • PWA 도입을 위해 Vite PWA 플러그인 활용하여 메니페스트 및 서비스 워커 설정을 간편화

섹션별 세부 요약

1. 큐시즘 소개

  • 매 기수 70-80명의 대학생이 기획/디자인/개발 파트를 맡아 IT 프로덕트 개발
  • 기업 프로젝트 및 자체 서비스 개발을 포함한 실무형 커리큘럼 제공
  • 밋업 프로젝트는 2개월간 진행된 팀 기반 MVP 개발 프로세스

2. 아이디어 선정 기준

  • 프론트엔드 개발자에게 기술적 도전 기회 제공
  • MVP 구현 가능성사용자 확보 가능성 고려
  • "사랑꾼"은 군인/곰신 커플의 일정/감정 공유 문제 해결을 목표

3. 기술 스택 및 개발 도구

  • PWA 적용: Vite PWA 플러그인 사용으로 서비스 워커 설정 간편화
  • API 모킹: MSW 활용으로 백엔드 없이 UI 개발 가능
  • 테스트: Vitest로 날짜 변환 함수 테스트, React Query로 상태 관리

4. 개발 과정 및 도전

  • 캘린더 구현: 기존 라이브러리 대신 직접 개발, 날짜 변환 유틸 개발
  • MSW 미사용: 초기 세팅 및 UI 개발 지연으로 인해 실제 적용 미비
  • 테스트 확장 계획: 통합/End-to-End 테스트 추가 예정

5. 프로젝트 마무리 및 향후 계획

  • 밋업데이 발표 및 부스 운영 통해 피드백 수집
  • 앱스토어/플레이스토어 출시 목표, 사용자와의 지속적 협업 계획

결론

  • PWA 도입은 Vite 플러그인을 통해 기술적 장벽 낮춤
  • MSW 미사용 시에도 요청/응답 타입 명확히 정의하여 향후 테스트 확장 가능
  • 날짜 변환 유틸에 Vitest 적용으로 코드 안정성 향상
  • 팀 협업과 사용자 피드백을 통해 서비스 지속 개선 필요