포트폴리오로 돌아가기
실시간 웹 채팅 SDK
프레임워크 독립형 채팅 클라이언트와 React 바인딩 SDK
역할
아키텍처 설계 · SDK 개발 · 테스트
기간
3주
연도
2026
프로젝트 개요
실시간 웹 채팅 SDK는 WebSocket 기반 채팅 프로토콜, 자동 재연결, heartbeat, optimistic send, 방별 상태 저장을 제공하는 패키지입니다. Cloudflare Durable Objects 데모와 React 바인딩을 함께 구성해 재사용 가능한 SDK 형태로 정리했습니다.
풀고 싶었던 문제
서비스마다 채팅을 새로 만들면 재연결, 메시지 순서, 연락처 노출 같은 문제를 매번 다시 풀어야 해요. 어느 서비스에나 붙일 수 있는 채팅 SDK로 정리했어요.
맡은 범위
- 프레임워크에 묶이지 않는 채팅 클라이언트
- React용 useChatRoom 훅
- 자동 재연결과 연결 확인(heartbeat)
- 클라이언트와 서버가 함께 쓰는 메시지 검증 규칙
- Cloudflare Durable Objects 기반 데모 서버
- 연락처 가리기와 전송량 제한을 서버에서 처리
만든 기능과 구성
- 프레임워크 독립 채팅 클라이언트
- React useChatRoom 바인딩
- 자동 재연결과 heartbeat
- 공유 프로토콜 검증
어려웠던 점과 해결 방법
끊겨도 이어지는 연결
네트워크가 끊겼다 돌아와도 메시지가 빠지거나 두 번 보이지 않도록, 재연결 간격 조절과 메시지 병합 규칙을 SDK가 맡게 했어요.
결과
- 핵심 클라이언트와 React 바인딩을 따로 쓸 수 있는 패키지 구조로 나눴어요.
- carrot.naldadev.com에서 데모를 볼 수 있어요.
기술 스택
TypeScriptReactViteZodCloudflare Durable ObjectsVitest
태그
#SDK #실시간 #WebSocket #Cloudflare
자주 묻는 질문
매칭·중고거래 서비스에 채팅을 붙일 수 있나요?
네. 이 SDK처럼 1:1 채팅, 자동 재연결, 연락처 가리기를 갖춘 채팅을 서비스에 맞게 붙일 수 있어요.
다른 포트폴리오