Chatting 💬

개요

이 프로젝트는 React와 WebSocket을 사용하여 실시간 채팅 애플리케이션을 구현한 프로젝트입니다.
사용자는 실시간으로 채팅방에서 대화를 나누고, 새로운 채팅방을 만들거나 기존의 채팅방에서 나갈 수 있습니다.
채팅방 내에서 주고받은 메시지와 참가자 정보를 시각적으로 표시하며, 브라우저를 통한 실시간 커뮤니케이션을 원활하게 처리하는 데 중점을 두고 있습니다.

이 프로젝트는 사용자 경험을 고려한 반응형 UI를 통해 메시지 히스토리, 실시간 알림 및 메시지 관리 기능을 제공합니다.
WebSocket을 통해 실시간으로 메시지가 송수신되며, Axios로 백엔드 API와 연동하여 채팅방 목록 및 참가자 정보를 가져옵니다.

---

사용 기술

Frontend

• React: 사용자 인터페이스(UI) 설계를 위해 사용된 주요 라이브러리입니다. 컴포넌트 기반 설계로 재사용성이 높고, 상태 관리가 간편하여 사용자 경험을 개선할 수 있었습니다.
• Axios: 백엔드와의 통신을 위해 사용되었으며, RESTful API와 연동하여 실시간 채팅 데이터와 메시지를 주고받습니다.
• React-Bootstrap: Bootstrap을 React 프로젝트에 통합하여 직관적이고 일관성 있는 사용자 인터페이스를 구축했습니다. 모달과 같은 복잡한 UI 요소를 쉽게 구현할 수 있었습니다.
• StompJS (WebSocket): WebSocket을 통해 실시간으로 메시지를 주고받는 데 사용되었습니다. STOMP 프로토콜을 사용하여 다수의 채팅방과 사용자를 관리합니다.
• CSS: 사용자 인터페이스 스타일링을 위해 사용되었습니다. 프로필 사진, 메시지 버블, 타임스탬프 등을 시각적으로 돋보이게 하는 역할을 했습니다.

Backend

• PostgreSQL: 유저 정보 및 채팅방 정보를 저장하기 위한 관계형 데이터베이스(RDBMS)로 사용되었습니다.

  • 유저 정보 (user_ID, 이름, 프로필 사진)
  • 채팅방 정보 (chattingroom_ID, 마지막 메시지, 마지막 활동 시간, 채팅방 이름)
  • PostgreSQL은 정적인 데이터, 즉 유저 및 채팅방의 기본 정보가 자주 변경되지 않는 점을 고려하여 선택하였습니다.

• MongoDB: 실시간으로 주고받은 채팅 메시지들을 저장하기 위한 NoSQL 데이터베이스로 활용되었습니다.

  • 채팅 메시지의 저장과 조회를 빠르게 처리할 수 있으며, 비정형 데이터를 저장하는 데 효율적입니다.

• Kafka & Kafka Connect: Kafka는 실시간 메시지 브로커로서 각종 이벤트를 처리하기 위해 사용되었습니다.

  • Kafka Connect를 통해 PostgreSQL과 MongoDB 간의 데이터를 연결하고 전송.
  • Topic을 생성하여 다양한 채팅 이벤트를 관리.

  Kafka Topic 설계

  • create-room-one: 일대일 채팅방이 생성될 때 사용하는 토픽.
  • create-room-many: 일대다 채팅방이 생성될 때 사용하는 토픽.
  • one-to-one: 일대일 채팅에서 메시지를 주고받을 때 사용하는 토픽.
  • one-to-many: 일대다 채팅에서 메시지를 주고받을 때 사용하는 토픽.

---

주요 기능

• 채팅방 목록 관리:

  • 사용자의 채팅방 목록을 서버에서 불러와 사이드바에 표시.
  • 채팅방 이름, 마지막 메시지, 읽지 않은 메시지 수를 표시.
  • 채팅방 검색 및 필터링 기능 제공.

• 실시간 채팅:

  • WebSocket을 통해 실시간으로 메시지를 송수신.
  • 송신자는 자신의 메시지를 오른쪽 말풍선으로, 수신자는 왼쪽 말풍선으로 구분.

• 채팅방 생성 및 참가자 관리:

  • 사용자가 원하는 참가자와 함께 새로운 채팅방을 생성할 수 있는 기능 제공.

• 메시지 히스토리:

  • 채팅방에 입장할 때 서버에서 과거 메시지 내역을 불러와 표시.

• 프로필 및 참가자 정보:

  • 메시지별로 발신자의 프로필과 이름 표시.
  • 채팅방 참가자 목록을 상단에 표시.

• 실시간 데이터 흐름 (Backend):

  1. 채팅방 생성

     • 유저가 새로운 채팅방을 생성할 경우, create-room-one 또는 create-room-many 토픽을 통해 메시지가 Kafka로 전송.
     • PostgreSQL에 채팅방 정보가 저장되며, Kafka Connect를 통해 MongoDB로도 전달됩니다.

  2. 메시지 전송

     • 유저가 메시지를 보내면, one-to-one 또는 one-to-many 토픽을 통해 Kafka로 메시지가 전송.
     • MongoDB에 메시지가 저장되며, 수신자에게 실시간으로 메시지가 전송.

---

프로젝트 구조

주요 컴포넌트

1. Chat.jsx

   • 메인 채팅 화면으로, 사이드바, 채팅방 컨테이너, 그룹 모달 등의 컴포넌트를 조합하여 채팅 기능을 구현.

2. ChatRoomContainer.jsx

   • 실시간 채팅이 이루어지는 채팅방 내부 UI를 구현한 컴포넌트.
   • 메시지를 주고받고, 메시지 히스토리를 불러오는 로직 포함.

3. Sidebar.jsx

   • 채팅방 목록을 관리하는 사이드바로, 사용자는 이곳에서 채팅방을 선택하거나 새로운 채팅방을 생성 가능.

상태 관리

• useState, useEffect를 통해 실시간 상태 업데이트를 관리하며, WebSocket 연결 상태, 메시지 기록, 참가자 정보를 효과적으로 관리.

---

결론

이 프로젝트는 React의 컴포넌트 기반 설계와 WebSocket의 실시간 통신 기능을 결합하여 사용자 친화적인 실시간 채팅 서비스를 구축하는 데 중점을 두었습니다.
백엔드에서는 PostgreSQL, MongoDB, Kafka를 활용해 데이터를 안정적이고 효율적으로 처리하고 있습니다.
사용자 경험을 높이기 위한 다양한 UI 요소와 상태 관리 방법을 도입하여, 대화와 참여자 관리가 원활히 이루어지도록 설계되었습니다.