2024.02.21 TIL - 트러블슈팅(JWT 회원정보수정 - 이미지변경 오류, 토큰의 일시적 유효성, thunk, Date.now)

🏹 트러블슈팅

JWT 프로필정보 수정하기

• 문제 : 프로필정보중 이미지와 닉네임을 변경하면 닉네임만 변경되고 이미지는 JWT서버로 PATCH가 제대로 이뤄지지 않음
  

• 문제의 코드

// ✅ Profile.jsx - 프로필관리 컴포넌트

 // 수정완료 버튼 클릭

  const editConfirmHandler = async () => {
    if (window.confirm("이대로 수정하시겠습니까?")) {
      // 서버에 PATCH 요청
      previewAvatar && setNewAvatar(previewAvatar);
      await editProfileInfo(newNickname, newAvatar, accessToken);

      // userInfoReducer 리듀서 state 변경
      dispatch(editUser({ newNickname, newAvatar }));
      console.log(avatar);
      setIsEdited(!isEdited);
    }
  };

// ✅ users.js - JWT서버로 PATCH하는 api

// 닉네임, 프로필이미지 수정하기
export const editProfileInfo = async (newNickname, newAvatar, token) => {
  const headers = {
    Authorization: `Bearer ${token}`,
  };
  const updateData = {
    nickname: newNickname,
    avatar: newAvatar,
  };
  await axios.patch("https://moneyfulpublicpolicy.co.kr/profile", updateData, {
    headers,
  });
};

// ✅ authSlice.js - editUser가 포함된 리덕스툴킷 Slice

const userInfoSlice = createSlice({
  name: "userInfo",
  initialState,
  reducers: {
    editUser: (state, action) => {
      const { newNickname, newAvatar } = action.payload;
      return { ...state, nickname: newNickname, avatar: newAvatar };
    },

• 원인 : 프로필정보를 변경할때는 PATCH로 정보를 넘겨주는것 뿐만아니라 추가적인 과정이 더 필요함!

  • formData로 만들어서 append로 넣어줘야 함

  • accessToken이 유효한 경우, 프로필 이미지 또는 닉네임을 FormData을 통해 요청
    -> 변경 완료된 이미지 URL과 닉네임을 응답

    // 이미지파일을 FormData에 담는 방법
    
    const formData = new FormData();
    // avatar와 nickname 중 하나 또느 모두 변경 가능
    formData.append("avatar", imgFile);
    formData.append("nickname", nickname);
    
    // 요청 시 Content-Type에 유의
    const response = await axios.patch(`${BASE_URL}/profile`,  formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${accessToken}`,
        },
      }
    );

JWT 회원정보수정 - 이미지 전달오류

• 문제 : 프로필수정에서 아바타만 PATCH 전달이 안되는거
• 원인 : preview에서는 url로 보여주지만, patch로 전달하는건 파일형식이어야함
  (e.target.files[0] 을 임의의 state에 set 해준다음, preview값이 있으면 newAvatar에 file state를 전달하기!)
  • patch에는 파일형식을 전달해줘야 하는거였음! (URL XX)
    (난 preview할때 만들었던 URL을 전달했기때문에 JWT서버 PATCH로 전달이 안됐던거였음)
  • 이미지 태그 <img src="">의 src에는 url이 들어감

내가 작성한 글에만 삭제버튼 보이게

• 문제 : 내가 작성한 게시글에만 수정, 삭제 버튼이 보이게 하고싶은데 ㅠㅠ

  • 클릭한 letter에 저장된 토큰 vs 로그인한 토큰
    -> 일치하면 수정,삭제버튼 보이게, 다르면 버튼 안보이게
    하고싶었는데 토큰이 왜 다 다르지...? 왜 토큰이 계속 바뀌는거같지...?

• 비교해본 3가지 토큰 (다 같을줄 알았는데.....)

  1. 로그인할때 로컬스토리지에 저장한 토큰
  2. 로그인할때 리듀서로 dispatch한 토큰
  3. 클릭한 letter에 저장되어있던 토큰

• 원인 : 토큰은 일시적으로 유효한거라서, 토큰값으로 비교하면 안되고 userId같은걸로 비교해야하는거였다!!

서버와 화면을 동시에 바꾸려면?

👍🏻 결론은 Redux thunk를 사용하자

• 서버에 값 보내서 서버상에서는 값이 바꼈는데, 화면에서도 바뀌게 만들려면 state로 또 바꿔줘야하고... 코드도 길어지고 나중에는 너무 복잡해서 나조차도 헷갈리고 로직을 까먹게되고 코드를 봐도 이게 뭐였는지 모르게 되고 state는 너무 많아지고.... 멘붕에 멘붕

• 해결 : Redux thunk!

  • redux thunk를 이용하면 서버값 바꾸기 + 화면 바꾸기 를 동시에 지원해줌!
  • ex) 프로필정보를 수정했는데, patch로 서버상 회원정보는 수정했는데 화면에서는 그대로일때
    -> 원래는 화면에 보이는 부분을 setState로 바꿔줘야함
    -> 이 과정을 하나로 합쳐주는게 redux thunk!
    (어쩔수 없구나... 결국 써야하는거였구나..)

new Date() VS Date.now()

• new Date().toString으로 입력한 시간이 문자열로 들어가게 구현해놓음
  -> 숫자가 아니라서 오름차순, 내림차순을 못함
  -> 숫자열로 변환하려면?!

• Date.now() : 숫자열을 반환
  -> Date.now()로 반환된 숫자열을 new Date(여기) 안에 넣으면 시간형식으로 변환해줌!
  -> 숫자열로 정렬 먼저 해준 다음, 화면에 렌더링할때는 날짜형식으로 바꿔서 보여주면 되지~!

ex)
const result = Date.now()
new Date(result) -> 연월일 시간 형식의 날짜가 나옴