이슈 (1) - 실시간 프사 렌더링 오류

1. 이슈 문제 파악

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.

2. 해결 시도 - useEffect

• 데이터 fetch 하는 useEffect()의 의존성 배열 값 = id (현재 채팅의 id)
• 이걸 지우면 해결되지 않을까 하는 생각
  
  
  
• 실시간으로 띄워주는 건 성공했지만! 근본적인 해결책은 아니었다.

3. 해결 방법 - realtime의 chat-room 안에서 messages 테이블, buddies 테이블 모두 접근

• 기존 코드
  
• 이젠 buddy 정보를 총 두번 불러온다. 처음 마운트 할 때 & 실시간 변경이 일어날 때
  
• 과제: useEffect buddy 부분 컴포넌트 분리하기

이슈 (2) - 채팅 리스트 데이터 호출

코딩 전에 로직 정리

로직

• buddy_id가 contract.contract_buddy_id와 일치하는
• 모든 contract_id를 찾고, isPending === false && isValidate === true 인 contract_id와 그 contract_trip_id를 필터링
• filtered contract_id마다 있는 모든 contract_buddy_id를 찾고
• 각 buddy_id마다 buddies.buddy_profile_pic를 객체 속 배열로 반환.
• 이런 느낌..data = [{ contract_id: "", contract_trip_id: "", contract_buddies_profile_pics: ["", "", ""] }, ]contract_trip_id와 foreign key로 연결된 trips.trip_id를 찾아
• trips.trip_title 반환
• trips.trip_id와 foreign key로 연결된 가장 최근 생성된 messages.message_trip_id 찾기
• messages.message_content, messages.message_created_at 반환

사용 column

• contract.contract_trip_id / contract.contract_buddy_id / contract.contract_isPending / contact.contract_isValidate
• trips.trip_id / trips.trip_title
• buddies.buddy_id / buddies.buddy_profile_pic
• messages.message_content / messages.message_created_at / messages.message_trip_id

참고용: supabase 사용 정리 잘 되어 있는 블로그
https://ramincoding.tistory.com/entry/Supabase-Supabase-%EB%A1%9C-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%97%86%EC%9D%B4-Database-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95

작업 과정에서 느낀 점

• 본격적인 작업 들어가기 전 로직 정리, 의사코드 작성의 중요성을 느꼈다!
• 어떤 데이터가 필요한지 모두 정리해 놓는 것도 좋다.