아웃소싱 팀프로젝트(트러블 슈팅2🌟)

1. 문제 발생❓

•  
• 사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.

 

 

 

 

 

2. 원인 추론 🔎

• 원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.
• 이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.
• 원래 코드(주요 부분)

const Comments = () => {
  const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore();
  const { token, user, setUser } = useAuthStore();

  // ... (중략)
  // 최신 유저 정보 가져오기 및 업데이트 로직 없음
  // ... (나머지 코드)
};

 

 

 

 

 

 

 

3. 해결 과정 📋

• 최신 유저 정보를 지속적으로 가져오기 위해서 Tanstack Query의 useQuery 훅을 사용하여 주기적으로 사용자 정보를 업데이트 하도록 수정함
• useEffect 훅을 사용하여 유저의 정보가 바뀌었을 때, 새로운 유저정보를 유저에 다시 저장해주고 새롭게 바뀐 유저정보를 다시 불러옴.
• 이 방법을 채택한 이유 ⭐⭐⭐⭐⭐
  • 실시간 데이터 동기화: 유저 정보를 실시간으로 동기화 하여 프로필 수정 사항이 즉시 반영된다.
  • 캐싱 및 성능 최적화: React Query의 캐싱 메커니즘을 통해 불필요한 네트워크 요청을 줄이고 애플리케이션의 성능을 최적화 할 수 있다.
  • 서버 상태와 클라이언트 상태의 분리: 서버에서 가져오는 데이터와 클라이언트에서 관리하는 상태를 병확히 분리하여 상태 관리를 체계화 한다.
  • 일관된 사용자 경험: 항상 최신 유저 정보를 표시함으로써 애플리케이션 전반에 걸쳐 일관된 사용자 경험을 제공한다.

• 수정된 코드

const Comments = () => {
  const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore();
  const { token, user, setUser } = useAuthStore();

  // ... (중략)
  // 최신 유저 정보 가져오기
  const { data: latestUserInfo } = useQuery({
    queryKey: ["userInfo", user?.id],
    queryFn: () => getUserProfile(token)
  });

  // 유저 정보 업데이트
  useEffect(() => {
    if (latestUserInfo) {
      setUser(latestUserInfo);
    }
  }, [latestUserInfo, setUser]);

  // ... (나머지 코드)
};

 

설명

• useQuery 훅 추가
  • Tanstack Query의 useQuery 훅을 사용하여 최신 유저 정보를 가져오는 쿼리를 추가했다.
  • queryKey에 user?.id를 포함시켜 유저 ID가 변경될 때마다 쿼리가 다시 실행되도록 했다.
• useEffect를 통한 상태 업데이트
  • useEffect 훅을 사용하여 latestUserInfo가 변경될 때마다 useAuthStore의 setUser 함수를 호출하여 전역 상태를 업데이트 한다.

 

 

 

 

 

4. 결과 ❤‍🔥

• 사용자가 마이페이지에서 프로필 정보를 수정한 후 Comments 컴포넌트로 돌아오면, 최신 유저 정보가 자동으로 반영된다.
• 새 댓글 작성 시 항상 최신 프로필 사진과 정보가 사용된다.

 

 

 

 

 

5. 교훈 및 느낀점 📝

• 데이터 일관성의 중요성
• 사용자 중심 사고의 필요성