const formData = new FormData();
formData.append("avatar", avatar);
formData.append("nickname", editedNickname);
const sendEditedProfileToServer = async () => {
try {
const accessToken = localStorage.getItem("accessToken");
await axios.patch(
formData,
{
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${accessToken}`,
},
}
);
} catch (error) {
console.log("프로필 편집 실패", error);
alert("프로필 편집에 오류가 발생하였습니다.");
}
};
1. 데이터를 수정한 뒤 서버에 patch를 했다.
const getData = async () => {
try {
const accessToken = localStorage.getItem("accessToken");
const response = await axios.get(
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${accessToken}`,
},
}
);
dispatch(getProfile(response.data));
} catch (error) {
console.error("error", error);
alert("유저정보를 불러오는 데에 오류가 발생했습니다.");
}
};
2. 수정한 걸 store로 저장하고 싶어서 수정된 데이터를 곧바로 가져왔다.
3. 그런데 희한하게 nickname은 수정사항이 반영되는데, avatar는 수정사항이 반영되지 않은 채 store에 저장이 되는 것이다.. 한시간은 날림ㅠ
4. 내 리듀서 파일은 이렇게 생겼다.
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
profile: {
avatar: "/img/pngwing.com.png",
intro: "소개글을 완성해주세요!",
email: "내 email",
Hp: "휴대폰 번호",
},
};
const profileSlice = createSlice({
name: "profileSlice",
initialState,
reducers: {
// 서버에서 받아온 id, nickname, avatar 추가
getProfile: (state, action) => {
const { id, nickname, avatar } = action.payload;
state.profile = {
id: id,
nickname: nickname,
avatar: avatar,
...state.profile,
};
},
},
});
export default profileSlice.reducer;
export const { getProfile } = profileSlice.actions;
5. 무엇이 잘못됐는지 아는사람~? 또 나만 몰랐지ㅜ
6. 바로바로 spread 연산자가 쓰이는 순서 때문이었다.
spread 연산자를 쓸 때 순서가 중요한 경우가 바로 이런 경우다.
만약 내가 추가하려는 속성들과 이미 있는 속성들이 (ex. avatar) 충돌할 때,
spread 연산자를 뒤에 쓰게 되면 아무리 내가 바꿔도 ...state.profile이 나의 수정내용들을 다시 덮어써 버린다.
진짜 황당한 사례였지만 이번 기회로 뼈저리게 깨닫고 간다.
연속으로 3 - 4시간 밖에 못 자고 있다.
고3때로 돌아온 이 기분ㅎㅎ..
부트캠프 시작한지 2달 반이 되어간다. 남은 날도 벌써 2달 반 밖에 남지 않았다.
잘 하고 있는 건지, 아는 것 같아도 돌아서면 까먹고, 어제 내가 어떻게 그렇게 기가막히게 코드를 짰지 싶다가도 급 삘 받아서 해결하고..
ㅎㅎㅎ참 알 수 없는 나의 뇌 용량
하여튼 모 재밌다ㅋㅋ
'TIL' 카테고리의 다른 글
| 2024.02.23 TIL #객체의 구조분해 할당 (0) | 2024.02.26 |
|---|---|
| 2024.02.22 TIL #tic-tac-toe 게임 (0) | 2024.02.22 |
| 2024.02.16 TIL #exportVSexportDefault #inputType="number" #substring()VSslice() (0) | 2024.02.19 |
| 2024.02.06 TIL #useRef로 ref가 부여되는 시점 #payload의 데이터형 (0) | 2024.02.06 |
| useState()와 useRef (0) | 2024.02.01 |