오늘은 React 채팅웹 만들기 해보려고 합니다.
채팅을 구현하기 위해서는 통신 프로토콜이 중요합니다.
기본적으로 채팅을 하려면 아래와 같은 통신 프로토콜이 필요합니다.
- Firebase: Firebase는 RESTful API를 통해 데이터를 전송합니다. 클라이언트에서 HTTP 요청을 보내고, 서버에서 HTTP 응답을 받는 방식입니다.
- 푸시어로: 푸시어로는 WebSocket 프로토콜을 사용하여 양방향 실시간 통신을 지원합니다. 클라이언트와 서버 간에 영구적인 연결을 유지하며 데이터를 양방향으로 전송할 수 있습니다.
채팅 기능
- 채팅방 생성 및 로드 하기
- 메시지 전송 컴포넌트 구현하기
- 메시지 보내기 기능 구현하기
- 메시지 불러오기 기능 구현하기
- 채팅 리스트 구현하기
- 실시간 새로운 메시지 받기 기능 구현하기
- 프로필 이미지 등록하는 기능 구현하기
- 사용자 프로필 이미지 보여주기메시지 읽음 표시 구현하기
- 이미지 메시지 전송 기능 구현하기
- 음성 메시지 전송 기능 구현하기
- 음성 메시지 컴포넌트 구현하기
- 메시지 도착 실시간 알림 구현 – 백엔드
- 메시지 도착 실시간 알림 구현 – 앱
중요도: 높음
- 채팅방 생성 및 로드하기:
- 채팅방을 생성하고 로드하는 컴포넌트를 만듭니다.
- React의 상태 또는 상태 관리 라이브러리를 사용하여 채팅방 데이터를 관리합니다.
- 메시지 전송 컴포넌트 구현하기:
- 사용자가 메시지를 입력하고 전송할 수 있는 컴포넌트를 만듭니다.
- 사용자 입력을 처리하고 메시지를 전송하기 전에 로컬에 메시지를 저장합니다.
- 메시지 보내기 기능 구현하기:
- 채팅방으로 메시지를 보낼 수 있는 로직을 구현합니다.
- 메시지 전송을 위해 백엔드와 상호 작용하는 API가 필요합니다.
- 메시지 불러오기 기능 구현하기:
- 채팅방에 들어갈 때 기존 메시지를 불러오는 로직을 구현합니다.
- API 호출을 사용하여 백엔드에서 메시지를 가져옵니다.
- 채팅 리스트 구현하기:
- 사용 가능한 채팅방 목록을 표시할 컴포넌트를 만듭니다.
- 사용자가 채팅방을 선택할 수 있도록 합니다.
중요도: 중간
- 새로운 메시지 실시간 알림:
- WebSocket 또는 유사한 기술을 사용하여 실시간 기능을 구현합니다.
- 사용자가 활성 채팅방에 새로운 메시지가 도착하면 알림을 표시합니다.
- 사용자 프로필 이미지 등록 기능:
- 사용자가 프로필 이미지를 업로드하고 설정할 수 있는 기능을 만듭니다.
- 프로필 이미지를 백엔드에 저장하고 필요할 때 가져옵니다.
- 읽음 표시 기능:
- 메시지가 읽혔을 때 읽음 표시 기능을 추가합니다.
- 메시지 읽음 상태를 백엔드에 저장하고 적절한 표시를 UI에 표시합니다.
중요도: 낮음
- 이미지 메시지 전송 기능:
- 메시지 보내기 기능을 확장하여 이미지 첨부를 지원합니다.
- 이미지 업로드를 백엔드에 구현하고 이미지를 보여주는 방법을 처리합니다.
- 음성 메시지 전송 기능:
- 기기의 마이크를 사용하여 음성 메시지 기능을 구현합니다.
- 음성 메시지를 오디오 파일로 백엔드에 전송합니다.
- 음성 메시지 컴포넌트 구현하기:
- 채팅에서 음성 메시지를 표시할 UI 컴포넌트를 생성합니다.
- 사용자가 음성 메시지를 재생하고 일시 정지할 수 있도록 합니다.
백엔드에 따라 다를 수 있는 기능
- 메시지 도착 실시간 알림 – 백엔드:
- 새로운 메시지가 도착할 때 사용자에게 실시간 알림을 보내기 위한 서버 측 로직을 구현합니다.
- WebSocket 또는 푸시 알림과 같은 기술을 활용합니다.
- 메시지 도착 실시간 알림 – 앱:
- 실시간 메시지 도착 알림을 수신하고 처리하기 위해 필요한 클라이언트 측 코드를 구현합니다.
- 수신된 새로운 메시지를 수동 새로고침 없이 UI에 표시합니다.
기능의 우선 순위는 프로젝트의 특정 사용 사례와 사용자 요구 사항에 따라 달라질 수 있습니다. 또한 실시간 기능과 백엔드 통합이 필요한 일부 기능은 다른 기능보다 복잡하고 시간이 더 소요될 수 있습니다. 프로젝트를 계획할 때 이러한 점을 고려하고 특정 기능에 필요한 추가 종속성이나 라이브러리를 고려하도록 해야 합니다.
- API 요청: WebSocket을 통해 푸시어로로 채팅 데이터를 보낼 때, Flask API를 사용하여 데이터를 처리해야 합니다. WebSocket 연결을 유지하는 동안에도 필요한 기능은 HTTP 기반의 API 요청을 통해 처리할 수 있습니다.
- 채팅 메시지 전송 API: WebSocket 연결을 통해 받은 채팅 메시지를 Flask API를 통해 데이터베이스에 저장합니다.
- 채팅 내역 조회 API: 특정 사용자간의 채팅 내역을 조회할 때, Flask API를 통해 데이터베이스에서 해당 내용을 가져옵니다.
- 사용자 목록 조회 API: 채팅 상대로 선택할 사용자 목록을 조회할 때, Flask API를 통해 데이터베이스에서 사용자 정보를 가져옵니다.
결론적으로 모두 실시간 웹 애플리케이션을 구축하는 데 사용될 수 있습니다. Firebase는 백엔드 통신과 데이터베이스를 통합하여 간단하게 실시간 기능을 구현하는 데 적합합니다. 반면에 푸시어로는 WebSocket 기반으로 더 직접적인 실시간 통신을 제어하고자 하는 경우에 적합합니다. 두 플랫폼 간의 선택은 프로젝트의 요구 사항, 개발자의 선호도, 백엔드 환경 등에 따라 다를 수 있습니다.