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

1. 문제 발생❓

• 댓글 수정 기능 구현 중 UI 반응성 문제 발생
• 수정 버튼 클릭 후 프로세스(문제 과정 설명)
  1. 수정 후 완료 버튼 누르기
  2. 수정 모드 종료
  3. 기존 값 유지
  4. 몇초 후 수정된 값으로 변경됨

 

 

 

 

2. 원인 추론 🔎

• 서버 응답을 기다린 후 UI 업데이트
• React Query의 기본 동작을 그대로 사용
• 원래 코드(주요 부분)

const { mutate: edit } = useMutation({
  mutationFn: ({ id, text }) => updateComment({ id, text }),
  onSuccess: () => {
    queryClient.invalidateQueries(["comments"]);
    alert("댓글이 수정되었습니다!");
  }
});

const handleEditSubmit = (e) => {
  e.preventDefault();
  if (editingComment.text.trim() !== "") {
    edit({ id: editingComment.id, text: editingComment.text });
  }
  setEditingComment(null, "");
};

 

 

 

 

 

 

 

3. 해결 과정 📋

• 낙관적 업데이트(Optimistic Updates) 개념 학습
• Tanstack Query의 onMutate 콜백 활용
• 서버 응답 전 캐시 데이터 즉시 업데이트
• Optimistic Updates 채택 이유 ⭐⭐⭐⭐⭐
  • 즉각적인 사용자 피드백: 사용자는 액션의 결과를 즉시 볼 수 있어 반응성 있는 UI 경험을 제공한다.
  • 네트워크 지연 극복: 서버 응답을 기다리지 않고 UI를 먼저 업데이트 하므로. 느린 네트워크 환경에서도 앱이 빠르게 반응하는 것처럼 보인다.

 

• 수정된 코드

 // 댓글 수정 (낙관적 업데이트 적용)
  const { mutate: edit } = useMutation({
    mutationFn: updateComment,
    onMutate: async ({ id, text }) => {
      // 이전 쿼리 데이터 취소
      await queryClient.cancelQueries(["comments", placeId]);

      // 이전 값의 스냅샷 저장
      const previousComments = queryClient.getQueryData(["comments", placeId]);

      // 새 댓글로 캐시를 즉시 업데이트
      queryClient.setQueryData(["comments", placeId], (old) =>
        old.map((comment) => (comment.id === id ? { ...comment, text } : comment))
      );

      // 수정 모드 즉시 종료
      setEditingComment(null, "");

      // 이전 값 오류때 쓸 수도 있으니 리턴해줌
      return { previousComments };
    },
    onError: (err, newComment, context) => {
      //에러가 발생하면 이전 값으로 콜백
      queryClient.setQueryData(["comments", placeId], context.previousComments);
      alert("댓글 수정 중 오류 발생했습니다!" + err.message);
    },
    onSettled: () => {
      // 성공 여부와 관계없이 쿼리를 다시 불러옴
      queryClient.invalidateQueries(["comments", placeId]);
    }
  });

  // 댓글 수정 제출 핸들러 함수
  const handleEditSubmit = (e) => {
    e.preventDefault();
    if (editingComment.text.trim() !== "") {
      edit({ id: editingComment.id, text: editingComment.text });
    }

    setEditingComment(null, "");
  };

 

 

 

 

 

 

 

4. 결과 ❤‍🔥

• 즉각적인 UI 업데이트로 사용자 경험 개선
• 수정 버튼 클릭 시 즉시 변경된 내용 반영
• 네트워크 지연에 관계없이 반응성 있는 인터페이스 제공
• 오류 발생 시 이전 상태로 자동 롤백

 

 

 

 

 

5. 교훈 및 느낀점 📝

• Optimistic Updates의 중요성을 인식
• 사용자 경험을 고려한 UI 설계의 중요성
• Tanstack Query의 고급 기능 활용으로 코드 품질 향상