[Flownium Chat Log #1] 실시간 채팅 MVP v1 구현기 – 구조 설계 & Socket.IO 연결 리뷰

Flownium Chat은 실시간 1:1 채팅 기능을 갖춘 사이드 프로젝트다.
초기 목표는 Socket.IO를 통한 실시간 채팅 기능 구현과
React 기반의 간결한 구조 설계였다.

사용 기술 스택

• Frontend: React + Vite + TailwindCSS
• Backend: Express.js + Socket.IO
• Database: MongoDB (Atlas)
• Login: Kakao OAuth 2.0
• 배포 예정: Vercel (FE) + Render or Railway (BE)

첫 번째로 작업한 것은 Socket.IO를 클라이언트를 연결하였다.

진행한 작업 리뷰

1. Socket.IO 연결
처음에는 useEffect에서 단순하게 소켓을 생성했지만,
재접속 이슈 방지를 위해 소켓 객체를 useState로 상태 관리하는 방식으로 전환했다.

const [socket, setSocket] = useState(null);

useEffect(() => {
  const newSocket = io('http://localhost:3001', {
    transports: ['websocket'],
  });
  setSocket(newSocket);

  return () => newSocket.disconnect();
}, []);

이 구조로 불필요한 재연결을 방지하고, 안정적인 연결 유지가 가능해졌다.

2. 메시지 송수신 구조
수신 메시지는 socket.on('receive_message')로 처리하고,
보낼 때는 emit('send_message', { text })로 전송한다.

socket.on('receive_message', (data) => {
  setMessages((prev) => [...prev, data]);
});

3. 자동 스크롤
채팅이 길어질수록 최신 메시지가 보이도록 자동 스크롤 처리가 필요했다.

const chatEndRef = useRef(null);

const scrollToBottom = () => {
  chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};

useEffect(() => {
  scrollToBottom();
}, [messages]);

추후에는 스크롤이 위에 있을 경우 "새 메시지 알림" UI로 확장도 고려 중.

4. 닉네임 입력 모달
처음엔 닉네임을 prompt()로 받았다가
모달로 처리하는 게 UX적으로 훨씬 나았다.

{showModal && (
  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    ...
  </div>
)}

지금은 local nickname을 입력받지만,
추후 로그인 기반 사용자 정보와 연동할 예정.

다음 작업 계획

1. MongoDB 모델링 (users, chatRooms, messages)
2. 카카오 로그인 연동 (OAuth2)
3. 채팅방 리스트 화면
4. 익명 채팅방 / 24시간 제한 옵션 추가 설계

MVP v1 기준, 핵심 실시간 채팅 기능은 구현 완료.
이제부터는 “이걸 왜 만들어야 할까?”라는 질문에 답하는 기능들을 붙여나갈 예정이다.