오늘의 오류
프로필 수정하는 부분에서 아이콘은 바꾸지않고 닉네임만 중복확인 후 바꿀 시에
이런식으로 사진부분에 엑박이 뜨는 것을 볼 수 있었다.
처음에는 모달의 부모 컴포넌트에서 useSelector을 사용한 뒤 Img만 뽑아 변수에 저장하여 프롭스로 보내주었다.
그리고 프로필 수정 부분의 컴포넌트에서 profileImg를 받아서
선택된 아이콘을 넘겨줄 useState의 기본값으로 사용하였다. 닉네임만 바꾸면 원래의 아이콘을 유지해야하기 때문이다.
이 부분에서 console.log로 Img를 찍어봤는데 props로 가져올때는 url이 잘 찍혔으나 수정후 리덕스로 넘겨줄때 undefined가 뜨는 것을 볼 수 있었다..
잘 살펴보니 전에 클릭한 아이콘만 활성화되도록하는 로직을 짯었는데 그 부분을 까먹고 있었다..
원본 배열에 객체로 active:false 값을 추가 해줬으니
setImg(item)이 아니라 setImg(item.icons)를 보내줘야했다.
처음에 원인을 계속 찾지못해서 props로 받아온 profileImg가 문제인가 생각하여 애초에 로그인할때 userImg를 쿠키에 가지고 다닌 것이 생각이나서 getCookie에서 url만 뽑아와 기본값으로 적용해주었다.
이렇게 수정하니 닉네임만 바꿨을때 엑박이 뜨지않고 잘 바뀌는 것을 볼 수 있었다. 하지만 문제가 로그인을 할때 기본 아이콘url을 함께 들고오는데 쿠키에 url을 바꿔주지 않으니 이게 닉네임을 다시바꾸면 원래 가져온 아이콘이미지로 다시 바뀌게되었다. 뭔가 쿠키에 userimg를 삭제하고 수정된 response에 img 값만 가져와 바꿔줘야겠다고 생각했다. 하지만 쿠키로 저장할때 로직을 내가 짜지않았기 때문에
이렇게 다같은 문자열에 들어있는 쿠키안에서 userImg값만 제거하는게 쉽지 않았다.
그래서 쿠키를 전부다 나눈뒤에 img쿠키만 삭제하고 setcookie로 다시 새로운 img로 넣어주는 과정을 거쳤다.
이렇게 쿠키를 분할하고
통신 후 then뒤에서 deleteCookie를 통해 userImg를 지우고
setCookie로 userImg에 수정된 값이 들어있는 response안에 profileImg를 찾아 넣어주었다.
이 과정은 거의 다른사람의 도움을 받아 해결했는데 뭐든 많이 알려고 노력해야겠다고 반성했다.. 항상 누구든 조언을 해줄때 무적정 일단 코드를 많이 짜보라했는데 진짜 뭐든 일단 많이많이 짜봐야될 것 같다.
