안 읽은 메시지 수 구하기

안 읽은 메시지 수 구하기

안 읽은 메시지 수를 구하는 것은 생각보다 어렵다. 내가 어디까지 읽었는지와 그 이후로 몇 개가 쌓였는지도 알아야 한다. 얼마나 쌓였는지는 API로 알 수 있다.

어디까지 읽었는지는 어떤 채널이나 디엠에 들어갔을 때, 어디까지 읽었는지 저장을 해야한다. 또 어디에 저장할지도 생각해야한다. 크게 DB에 저장할 수 있고 아니면 로컬 스토리지에 저장할 수 있다. 이걸 DB에 저장하면 서버가 부담스러울 수도 있다. 따라서 로컬 스토리지에 저장하는 방식을 사용하겠다. 

 

따라서 EachChannel, EachDM을 만들어서 하나하나 컴포넌트로 만들었다. 채널이나 DM 클릭했을 때를 기록해주면 된다.

 

-ChannelList

      <div>
        {!channelCollapse &&
          channelData?.map((channel) => {
            return <EachChannel key={channel.id} channel={channel} />;
          })}
      </div>

ChannelList를 별도의 컴포넌트로 분리하면 된다. 그리고 더 최적화가 돼서 좋다.

 

그리고 채널이나 DM 클릭했을 때를 기록해주는 것은

  useEffect(() => {
    localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString());
  }, [workspace, id]);

이렇게 기록해야 한다. 채팅, DM에 들어갔을 때와 채팅, 이미지를 보냈을 때도 기록을 해줘야 내가 보낸 채팅을 카운트하지 않는다.

이렇게 하고 EachChannel, EachDM에서 받아와서 사용하면된다.