2024.12 — 2025.08개인 프로젝트
ChatFlow
쿠버네티스 위에서 돌아가는 실시간 채팅 플랫폼
- 맡은 일
- 프로젝트 팀장 · 프론트엔드 (FE 2 / BE·인프라)
- 기간
- 2024.12 — 2025.08
- 소속
- Kubernetes & Docker 스터디
쿠버네티스·도커 스터디에서 배운 것을 실제 서비스로 만들어 본 프로젝트입니다. 서버(팀)와 채널, 친구, 알림, 채팅으로 이루어진 디스코드 같은 채팅 플랫폼으로, 백엔드는 회원·팀·채팅·알림 서비스로 나뉜 마이크로서비스이고 쿠버네티스 위에 Helm과 Istio로 배포했습니다.
프론트엔드 두 명 중 한 명으로, 패키지 구조 개편과 서버·채널 API 연동, 그리고 웹소켓 실시간 채팅을 맡았습니다.
핵심
- 01
실시간 채팅
SockJS + STOMP로 웹소켓을 연결하고 토큰 처리, 백엔드 채팅 서비스와 맞춰 가며 테스트
- 02
메시지가 두 번 전송·저장되던 버그를 잡고, 전송 낙관적 업데이트·이전 메시지 불러오기·멘션·파일 첨부 구현
- 03
패키지 구조를 기능(service/feature)과 화면(view) 레이어로 나눠 개편
- 04
서버·채널·팀 API 연동, 유저 프로필 전역 상태와 AuthProvider 리팩토링
나머지 1개 더 보기접기
- 05
프론트엔드 도커 이미지와 실행 스크립트 작성
팀의 쿠버네티스 배포 흐름에 맞춤
자세히
궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.
SockJS + STOMP로 웹소켓 연결, 인증 토큰 로직을 다듬고 백엔드 채팅 서비스와 함께 테스트
메시지가 두 번 전송·저장되던 문제를 찾아 고치고 채팅 메시지 타입 정리
전송 낙관적 업데이트와 전송 중 상태, 이전 메시지 불러오기
멘션(개별·everyone)과 참여 멤버 목록, 이미지·파일 첨부 전송, 팀 초대 메시지
MVC와 기능 기준으로 패키지 구조 개편
기능 로직(auth, chat, channel, team, friend, noti …)과 화면(view)을 분리
zod + react-hook-form으로 로그인·회원가입 검증 정리
서버(팀)·채널 API 전체 연결, 서버를 바꿀 때마다 채널을 다시 불러오도록 정리
유저 프로필을 전역 상태로 관리하고 AuthProvider 리팩토링, 프로필·컨텍스트 메뉴·로그아웃 리다이렉트
배운 것
웹소켓을 제대로 다뤄 보기 시작한 프로젝트입니다. 연결과 토큰, 중복 전송, 낙관적 업데이트까지 직접 부딪히면서 실시간 기능을 다루는 힘이 크게 늘었습니다.
AI에 기대지 않고 직접 찾고 읽어 가며 구현하려고 애썼고, 그 과정에서 많이 배웠습니다.