2025.02 — 2025.03개인 프로젝트

번개팅

실시간 모임 매칭 플랫폼

맡은 일
프로젝트 팀장 (FE 4 / BE 1 / DE 1)
기간
2025.02 — 2025.03
소속
코드잇 프론트엔드 심화

코드잇 프론트엔드 단기심화 최종 프로젝트입니다. js 기반의 실시간 모임 매칭 플랫폼으로, 팀장을 맡아 부트캠프를 갓 마친 프론트엔드 개발자 세 명과 함께 기획부터 배포까지 진행했습니다.

5MB로 줄이고 SEO 점수를 67에서 92로 올렸습니다. 백엔드 API가 나오기 전에는 MSW와 JSON Server로 먼저 개발했고, Jest·Cypress를 통과해야 배포되는 CircleCI 파이프라인을 세웠고, Netlify 빌드 시간 초과로 배포가 멈췄을 때는 Cloudflare Pages로 대체 배포한 뒤 되돌렸습니다.

Pl. 1번개 목록 — 카페·술·보드게임·맛집 카테고리와 지역·날짜로 거르고, 참여 인원과 개설 확정·마감 여부를 카드에서 바로 봅니다.

핵심

  1. 01

    팀장

    부트캠프를 갓 마친 프론트엔드 개발자 3명과 함께, 각자 역량을 끌어올릴 수 있도록 역할을 나눠 진행

  2. 02

    직접 맡은 화면

    모임 상세(패럴렐 라우트 6개 슬롯), 실시간 채팅(WebSocket·STOMP), 카카오맵

  3. 03

    웹팩 최적화로 chunk 11.5MB → 3.5MB, Lighthouse 성능 첫 배포 60점대 → 90점 이상

  4. 04

    목록 첫 10개 SSR과 메타·OG 태그로 SEO 점수 67 → 92

나머지 3개 더 보기
  1. 05

    Zustand로 인증·전역 상태, React-Query로 서버 상태를 나눠 중복 요청 방지

  2. 06

    백엔드 API 없이도 개발이 멈추지 않게 MSW + JSON Server(Railway)로 먼저 진행

  3. 07

    Jest + RTL 단위 테스트와 Cypress E2E를 통과해야 배포되는 CircleCI + Codecov + Netlify 파이프라인

화면

좌우로 넘겨 보실 수 있습니다

Pl. 2of3

Pl. 2번개 상세 — 주최자 정보, 모임 설명, 지도 위 장소, 이전 번개 리뷰를 한 화면에 두고 하단에서 바로 참여합니다.
Pl. 3리뷰 — 카테고리별로 모아 보고, 평점 분포와 함께 최신순·평점순·참여 인원순으로 정렬합니다.

배포했던 서비스 화면입니다.

자세히

궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.

Jira 주 단위 스프린트

세팅 → 컴포넌트 → 마크업 → MVP → API → 고도화 → 최적화 → 테스트 → CI/CD 순서로 단계를 나눔

PR 제목에 Jira 이슈 키를 넣어 상태가 자동으로 바뀌게 연동, GitHub Projects 칸반과 마일스톤으로 진행 상황 공유

Git Flow 브랜치, PR 템플릿으로 리뷰 기준 통일, Husky pre-commit에서 린트·테스트

Notion에 하루 세 번 작업 기록, KPT 회고, 멘토 피드백과 트러블슈팅 기록

기능 개발 뒤 정기적으로 코드 리뷰 + 리팩토링 세션

Code With Me·Live Share로 짝 프로그래밍

모임 상세를 패럴렐 라우트 슬롯 6개(@card, @host, @description, @location, @reviews, @bottombar)로 나눠 영역마다 따로 불러오게 함

카카오맵으로 모임 장소 표시, 지난 모임 리뷰는 서버 컴포넌트에서 받아 페이지네이션, 모임 설명은 마크다운으로 편집

실시간 채팅

REST로는 실시간성이 부족해 WebSocket 도입, SockJS로 미지원 브라우저 fallback과 자동 재연결, STOMP로 채팅방 단위 구독

방을 나가면 구독을 해제해 서버 부하를 줄임

roomId 없이 연결을 시도해 입장이 실패하던 문제

방을 연 뒤에 연결하고, Zustand의 연결 상태로 중복 연결을 막고 끊기면 다시 연결

배운 것

끝난 뒤에 남은 것들을 적었습니다.

팀장으로서 함께 일하는 법을 가장 많이 배운 프로젝트입니다. 실무 경력이 있는 사람은 저 하나였고, 나머지 세 명은 부트캠프를 막 마친 상태였습니다. 제가 아는 것은 가르쳐 주고 모르는 것은 같이 찾아보며 진행했는데, 설명하다 보면 제가 어설프게 알던 부분이 드러나서 저도 함께 배웠습니다.

일을 나눌 때 가장 공을 들인 건, 누가 무엇을 맡아야 각자 역량을 최대치로 끌어올릴 수 있을지였습니다. 일정만 보고 나누지 않고 사람을 보고 나눴고, 모두가 자기 자리에서 최선을 다할 수 있게 만드는 데 가장 많은 고민을 썼습니다.

기능을 만드는 데서 멈추지 않고 PWA, 테스트 자동화, CI/CD 같은 고도화까지 함께 밀고 나갔습니다. 돌아가게 만든 다음 더 낫게 만드는 과정이 정말 재미있었습니다.

마감을 앞두고 다 같이 밤을 새웠지만 힘들었던 기억이 없습니다. 혼자 잘하는 것보다 팀으로 일하는 게 더 즐거울 수 있다는 걸 알게 된 경험입니다.

쓴 기술

Next.jsTypeScriptReact QueryZustandTailwind CSSFramer MotionWebpackPWAJestCypressCircleCISentryCodecovJiraIndexedDB

링크

이전

CalIT

다음

PPIYO