6/12 TIL (axios get, patch)

📖 진행한 공부 📖

• axios get 메서드로 정보 불러오기
• axios patch 메서드로 프로필 업데이트하기

axios get

  const getUserInfo = async () => {
    try {
    const accessToken = localStorage.getItem("accessToken");
    if(accessToken) {
      const response = await axios.get("https://moneyfulpublicpolicy.co.kr/user", {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        }
      });
      setUserInfo(response.data);
    }
    } catch (error) {
      console.error("유저 정보 에러=>", error);
    }
  }

해당 기능을 구현하면서 화면에 원하는 대로 출력도 안 되고 오류가 찍히는 경우가 있었는데 이는 setUserInfo(response) 가 처음엔 뭐가 틀린 거지 몰랐었는데

console.log(response)를 찍어봄으로써 response 안에 있는 data에 접근해야 해당 유저의 ID, Nickname, avatar에 접근할 수 있다는 걸 알고난 후 setUserInfo(response.data) 로 수정해줬음

그러나 마이페이지에서 일정 시간이 지나면 해당 엑세스토큰이 만료되면서 401 오류를 반환하는데 해당 오류를 고치기 위해선 액세스토큰을 갱신해주거나, 사용자에게 토큰이 만료됐으니 다시 로그인을 하라고 유도를 해야 한다는 생각만 갖고 있지 코드로 구현은 못해봤음

axios patch

const handleSubmit = async () => {
    const formData = new FormData();
    if(avatar) {
      formData.append("avatar", avatar);
      formData.append("nickname", nickname);
    }
    
    try{
      const accessToken = localStorage.getItem("accessToken");
      const response = await axios.patch("https://moneyfulpublicpolicy.co.kr/profile", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${accessToken}`,
        },
      });
      console.log(response);
      getUserInfo();
      alert("프로필 업데이트 성공!")
    }
    catch (error) {
      console.error("프로필 업데이트 오류=>", error);
    }
  };

FormData()를 사용해 FormData에 닉네임, 아바타(프로필 사진)을 추가해준 것 말곤 다른 axios 메서드를 사용했을 때와 코드가 비슷비슷하다.

해당 기능을 구현하면서 겪은 문제라면 처음 업데이트를 진행할 시엔 아무 문제없이 업데이트가 잘 되는데, 그 후에 한 번 더 업데이트를 하려고 하면 어떠한 이유에서인지 가끔씩 업데이트가 안된다.. 어쩌다 한 번 그러는 거 보니 뭔가 통신상 오류가 있는 거 같긴 한데 이것도 위에 get 메서드를 사용할 때 겪었던 문제와 같이 내일 해결을 해봐야 할 거 같다

일단 해당 기능이 잘 작동하는지 확인을 해보겠다

잘 작동하는 것을 볼 수 있다 nice 👍
내일은 문제를 해결할 수 있길..