Today

프로젝트

1. 유저 피드백(채팅 목록 로딩 속도 개선)

• 기존
  Person 컴포넌트를 하나 하나 그릴 때 마다 API를 호출하여 마지막 메시지를 읽어오는 것

// Person.tsx
  const { data: lastMessages, isPending } = useQuery({
    queryKey: ["lastMessage", userId],
    queryFn: () => showLastMessage({ userId, myId }),
    enabled: !!userId,
  });

  const lastMessage = lastMessages?.[0]?.message || "서로 대화를 해보세요!";

• 변경
  유저 목록을 그려주는 곳에 전 메시지를 읽어오는 API 호출을 하여 마지막 메시지를 찾아 해당 유저 목록 Person 컴포넌트에 props로 보냄

// ChatList.tsx
  const { data: allMessages, isPending } = useQuery({
    queryKey: ["allMessage", loggedInUser?.id],
    queryFn: () => {
      if (loggedInUser?.id) {
        return getAllMessage({ myId: loggedInUser.id });
      }
      return Promise.resolve([]);
    },
    enabled: !!loggedInUser?.id,
  });

  function getLastMessage(userId: string) {
    const lastMessageData = allMessages?.filter((message) => message.sender === userId).pop();

    return lastMessageData?.message || null;
  }

---

Learn

오늘의 깨달음

프로젝트를 만들 때 api 호출 하는 방법 하나 바꾸는 것만해도 상당히 성능 개선 효과가 있다.

---

주절주절

다음 주가 이제 마지막인가..?