트러블 슈팅_slam-talk(2)

목표

채팅에서 실시간 소통이 원활한 환경을 유저에게 제공하는 것이 1차적 목표

문제 1

한번에 모든 채팅 내용을 불러오면 유저에게 신속한 반응을 못할 수 잇다.

해결 1

채팅을 담당하는 백엔드 파트 팀원과 회의를 통해서, 서버에서 readIndex를 부여하여 유저가 최종으로 확인한 부분 이후의 메시지 내용만 기본적으로 제공하고, 더 이전의 내용을 요청하는 버튼을 추가하였다.

문제 2

1.버튼을 클릭하여 이전 내용을 확인하는 방식이 채팅 사용자들 입장에서 불편하고, 외관상에도 맞지않는 것 같다.
2.이전 채팅 내역이 아예 보이지않는 것이 불편하다.

해결 1

스크롤 액션을 이용하여 유저가 자연스럽게 이전 내역을 위로 스크롤하면서 추가 내용을 요청하는 방식으로 변경하였다. 스크롤 동작 인식을 위해 react-intersection-obeserver 라이브러리를 사용하였다.

import { useInView } from 'react-intersection-observer';

  const { ref, inView } = useInView({
    threshold: 0,
    delay: 0,
    initialInView: true,
  }); // 초기 선언

if (inView && !hasFetched) {
      fetchMoreMessages();
      setHasFetched(true);
    } // inview는 뷰포인트가 화면에 노출됐는지에 대한 boolean value

해결 2

기존에 마지막으로 확인한 내역 이후에 내역만 불러왔지만, readIndex를 기준으로 이전의 10건을 추가하여 응답받는 형식으로 변경하였다.