유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Build a Full Stack Chat App using Socket.io & Expo Router #13 - Messages

Code With Nomi

2025. 9. 15.

0

#backend
#mobile app
  • 백엔드에서 새로운 메시지 이벤트를 생성하고, 프론트엔드로부터 받은 데이터를 콘솔에 기록합니다. 📝
  • 에러 발생 시, 에러 메시지를 콘솔에 로깅하고, 메시지 생성 실패를 알립니다. ⚠️
  • 메시지 모델을 사용하여 새 메시지를 생성하고, conversation ID, sender ID, content, attachment 등의 속성을 설정합니다. 🗂️
  • 메시지가 생성되면, 해당 대화에 참여한 모든 사용자에게 새로운 메시지 이벤트를 전송합니다. 📢
  • 메시지 전송 성공 시, 메시지 ID, 내용, 보낸 사람 정보, 첨부 파일, 생성 시간, conversation ID를 포함한 새로운 메시지 데이터를 준비합니다. 📦
  • 대화 모델을 사용하여 conversation ID를 업데이트하고, 마지막 메시지 속성을 업데이트하여 채팅 목록에 최신 메시지가 표시되도록 합니다. 갱신 🔄
  • 프론트엔드에서 새로운 메시지 이벤트를 등록하고, 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다. 👂
  • 메시지 전송 함수에서 새로운 메시지 API를 호출하고, conversation ID, 보낸 사람 정보, 내용, 첨부 파일 등의 데이터를 백엔드로 전송합니다. 📤
  • 메시지 전송 후, 메시지 입력 필드를 비우고 선택된 파일을 초기화합니다. 🧹
  • 백엔드에서 메시지 내역을 가져오는 새로운 이벤트를 정의하고, conversation ID를 기반으로 메시지를 검색합니다. 🔍
  • 메시지를 내림차순으로 정렬하고, 보낸 사람 데이터를 채워 각 메시지에 보낸 사람 객체 정보가 포함되도록 합니다. 👤
  • 프론트엔드에서 메시지 내역을 가져오는 이벤트를 등록하고, 응답으로 받은 메시지 데이터를 상태에 저장합니다. 💾
  • 현재 사용자 ID와 메시지 보낸 사람 ID를 비교하여 메시지가 자신의 것인지 확인하고, UI를 적절히 조정합니다. ↔️
  • MongoDB에서 불필요한 데이터를 제거하기 위해 lean() 함수를 사용하여 데이터를 JavaScript 객체로 변환합니다. ⚙️
  • Moment 라이브러리를 사용하여 메시지 날짜 형식을 사용자 친화적으로 변경합니다. ⏰
  • 새로운 메시지를 받으면, 해당 메시지를 메시지 목록에 추가하여 실시간으로 메시지가 업데이트되도록 합니다. ➕
  • 소켓을 사용하여 메시지를 빠르게 주고받을 수 있도록 구현합니다. 🚀

Recommanded Videos