번개팅
실시간 모임 매칭 플랫폼
Role: 프로젝트 팀장 (FE 4 / BE 1 / DE 1)
Overview
코드잇 프론트엔드 단기심화 최종 프로젝트입니다. Next.js 기반의 실시간 모임 매칭 플랫폼으로, 기획부터 배포까지 팀장으로서 전방위 리딩했습니다. SSR + ISR 최적화로 초기 로딩 속도를 개선하고, PWA 적용으로 FCP를 3.2s에서 1.2s로 단축했습니다. Zustand + React-Query 병행으로 불필요한 리렌더링 50% 감소, API 호출량 40% 감소를 달성했습니다. Jest + RTL 단위 테스트, Cypress E2E 테스트 20개 이상 작성, CircleCI + Codecov 기반 완전 자동화 CI/CD 파이프라인을 구축했습니다.
Tech Stack
Key Highlights
PWA 적용
FCP 3.2s → 1.2s 단축
Zustand + React-Query 병행
리렌더링 50% 감소, API 호출 40% 감소
SSR + ISR 최적화
초기 로딩 및 SEO 대응
Jest + RTL 단위 테스트, Cypress E2E 20개+ 작성 (주요 플로우 100% 커버)
CircleCI + Codecov + Netlify 완전 자동화 CI/CD
Sentry 실시간 에러 모니터링 체계 구축
프로젝트 관리 & 구조 설계
Jira 기반 스프린트 운영
이슈 트래킹 및 태스크 우선순위 조정
파일 구조 및 타입 시스템 전면 개편
단일 책임 원칙 적용
컴포넌트/스토어 구조 리팩토링
관심사 분리로 재사용성 강화
성능 최적화 & UX 강화
PWA 적용
FCP 3.2s → 1.2s 단축, 오프라인 대응
Framer Motion 도입
인터랙티브 UI 전환 설계
SSR + ISR 최적화
초기 로딩 속도 + 정적 자원 자동 재생성
Webpack Lazy Load, 코드 스플리팅
번들 사이즈 최적화
상태 관리 및 데이터 전략
Zustand + React-Query 병행
클라이언트/서버 상태 분리, 리렌더링 50% 감소
React-Query stale-time & cache-time 세분화
API 호출량 40% 감소
테스트 및 안정성 확보
Jest + RTL 기반 단위 테스트
주요 기능 자동화 테스트
Cypress E2E 20개+ 작성
주요 플로우 100% 커버
MSW + JSON Server(Railway)
API Mocking으로 개발 선행 및 병렬 진행
CI/CD 및 운영
CircleCI + Codecov + Netlify
PR 시 테스트 → 커버리지 → 자동 배포
Sentry 실시간 에러 모니터링
GA / robots.txt / sitemap
SEO 및 유입 경로 분석
IndexedDB(idb) 기반 로컬 캐싱
오프라인 환경 대응
Screenshots
이미지 추가 예정
이미지 추가 예정