ReactNode.jsWebSocketPostgreSQLDocker
TeamLog — 소규모 팀 협업 SaaS
- 기여도
- 90%
- 기간
- 4개월
프로젝트 개요
5~20인 규모 스타트업을 타겟으로 한 경량 프로젝트 관리 SaaS입니다. Notion과 Jira의 중간 포지션을 목표로, 빠른 온보딩과 직관적인 Kanban 보드를 핵심 가치로 삼았습니다. WebSocket 기반 실시간 협업, 멤버 권한 관리, 작업 타임라인 기능을 포함합니다. Docker Compose로 로컬 개발 환경을 통일하고 GitHub Actions로 CI/CD 파이프라인을 구성했습니다.
상세 기술 스택
- React 18 (Vite)
- TypeScript
- Node.js (Express)
- Socket.io
- PostgreSQL
- Prisma ORM
- Docker / Docker Compose
- GitHub Actions
기술적 문제 해결 과정
Problem 1
WebSocket 연결이 끊길 때(모바일 화면 전환, 네트워크 전환) 보드 상태 업데이트가 누락되는 문제. 재연결 후 서버 상태와 클라이언트 상태가 불일치했습니다.
Solution
낙관적 업데이트(Optimistic Update)로 즉각적 UI 반영 후, 재연결 시 lastEventId를 서버로 전송하여 누락된 이벤트를 일괄 수신하는 이벤트 소싱 패턴을 적용했습니다.
Result
오프라인 → 온라인 전환 시 데이터 손실 0건, 재연결 후 상태 복구 시간 < 500ms.
Problem 2
여러 사용자가 동시에 동일 칸반 카드를 수정할 때 마지막 저장이 이전 변경사항을 덮어쓰는 Lost Update 문제.
Solution
카드 수정 API에 Optimistic Locking 패턴 도입. version 필드를 체크하여 충돌 감지 시 클라이언트에 409 Conflict를 반환하고, 사용자에게 충돌 해결 UI를 제공했습니다.
Result
동시 수정 충돌로 인한 데이터 덮어쓰기 100% 차단.