EP09 - 당근 마켓 앱 만들기 채팅방 리스트 (바이브 코딩)
- 회원 가입 및 사용자 관리: 테스트를 위해 두 개의 사용자 ID를 생성하고, 닉네임 중복 오류는 데이터베이스 접근 권한 문제로 실제 중복 체크가 필요 없음을 확인했습니다. 👥
- AI 활용 팁: AI에게 복잡한 작업을 지시할 때는 세분화된 지시와 구체적인 명칭(예: 함수 이름, UI 요소)을 사용하여 정확하고 고품질의 결과물을 얻을 수 있습니다. 🤖
- 채팅방 목록 더미 데이터 구현: 초기 채팅방 목록 페이지에 프로필 사진, 마지막 메시지 등의 정보를 포함하는 더미 데이터를 생성하여 UI를 구성했습니다. 📝
- 채팅 모델 개선: 상대방 정보를 포함하기 위해 채팅 모델에
participants 필드를 추가하여, 채팅방에 참여하는 두 사용자의 이름과 프로필 사진 정보를 저장하도록 구조를 변경했습니다. 🔄
- 실제 데이터 연동: 더미 데이터를 파이어스토어의
chats 컬렉션에서 가져온 실제 데이터로 대체하여 동적인 채팅방 목록을 구현했습니다. ☁️
- 파이어스토어 인덱싱 처리: 사용자가 속한 채팅방을 효율적으로 검색하기 위해 인덱싱이 필요하며, 발생한 인덱싱 오류를 디버그 콘솔의 URL을 통해 해결했습니다. 🔍
- 채팅방 이동 기능 구현: 채팅방 목록에서 특정 채팅방 항목을 클릭하면 해당 채팅방 페이지로 이동하는 내비게이션 기능을 추가했습니다. ➡️
- 메시지 전송 및 저장: 채팅방 내에서 메시지 전송 버튼을 클릭하면 입력된 메시지가 파이어스토어의
chats 컬렉션 내 messages 서브컬렉션에 저장되도록 구현했습니다. 💬
- 다음 단계 예고: 다음 시간에는 채팅방에서 실시간으로 메시지를 주고받는 기능을 구현할 예정입니다. 🚀