31일차 (트러블 슈팅: 댓글 작성 이슈)

 미니 프로젝트를 진행하면서 이상한 문제가 발생했다. getCookie을 사용하는 모든 page에서 로그를 찍어봤을 때 동일한 Cookie 값이 찍히는데, 새로고침을 하지 않으면 이전 아이디값으로 작성되는 문제였다. 쿠키값도 모두 동일해서 문제의 원인을 찾는데 매우 힘들었다. 

 

 몇 시간의 사투 끝에 문제점을 발견했는데, 그것은 Api에서 사용하는 getCookie의 문제였다. 새로고침을 직접 하지 않으면 Api에 token이라는 변수에 저장된 Cookie 값은 이전 값을 유지했기 때문에 발생하는 문제였다. 

 

해결방안

// props를 통해 token 값을 넘겨준다
const addCommentsHandler = (detailId, newComments) => {
    if (newComments.length === 0) {
      alert("댓글을 입력해주세요");
    } else {
      addMutation.mutate({ detailId, newComments, token });

      setComments("");
    }
  };

// 넘겨받은 token을 사용하면 문제해결
const addComments = async (props) => {
  const detailId = props.detailId;
  const newComment = props.newComments;
  const token = props.token;

  try {
    await axios.post(
      `http://3.36.132.42:8080/api/comment`,
      {
        detailid: parseInt(detailId),
        comment: newComment,
      },
      {
        headers: {
          Authorization: token,
        },
      }
    );
    alert("댓글이 추가되었습니다.");
  } catch (error) {
    console.log("comments 추가 중 에러 발생", error);
    alert("로그인이 필요한 서비스입니다.");
  }
};

 

해결방안은 단순했다. getCookie를 Api에서 쓰지 않고, mutation으로 넘길 때 props(?)로 넘겨주는 것이었다. 이번 일을 계기로  앞으로 변수에 저장된 데이터가 얼만큼, 언제까지 유지되는지 정확하게 파악할 필요성을 느꼈다.