221211_WIL

오늘한 일

컴퓨터 수리………..

이번주 한 일

[항해 99] 실전프로젝트 마이페이지 모달 수정
[항해 99] 실전프로젝트 마이페이지 모달 기능 수정
[항해 99] 실전프로젝트 마이페이지 뱃지 리스트 수정
[항해 99] 실전프로젝트 프로필 수정에 따른 헤더 수정
[항해 99] wf 수정 논의

이번주의 배운 점

이전의 데이터 넣어주기

  
//마이페이지 개인정보 기본값 불러오기
const { data } = useQuery(["mypage"], getMypage, {
onSuccess: (data) => {
     setProfile({
     profilePhoto: data.data.profilePhoto,
     nickName: data.data.nickName,
     region: data.data.region,
     badgeName: data.data.badgeName,
     });
},
});

//정보 변경 사항 보내기
const onSubmitInfo = () => {
if (profile.nickName !== data.data.nickName && !mynameChk) { // 중복 닉네임에서 내 닉네임은 제외시켜주기
     return toast.success("중복된 닉네임 입니다.", {
     autoClose: 1500,
     position: toast.POSITION.TOP_CENTER,
     });
} else {
     putMypages(profile);
     sessionStorage.removeItem("userinfos");
     sessionStorage.setItem("userinfos", JSON.stringify(profile));
     setModal(!modal);
     toast.success("수정이 완료되었습니다.", {
     autoClose: 1500,
     position: toast.POSITION.TOP_CENTER,
     });
}
};

원래는 내정보 수정에서 모든 정보를 수정해야 수정이 적용되도록 처리를 해뒀었는데, 하나만 바꿔도 변경됐으면 좋겠다는 의견들이 나왔고, 원래 정보를 넣는데서 문제가 생겼다. console.log를 찍어보면 원래 사용하던 방법에서는 원래의 내용이 눈에는 보이지만 입력이 제대로 되어있지않은 문제가 생겼다(빈문자열로 들어감)

추가로 이전엔 리덕스로 서버 상태 관리를 해줬었는데, 모달에서 내용 수정한 뒤 화면을 새로고침 하지 않으면 이전 데이터가 불러와지지 않는 문제가 생겼고, 팀원이 조언해주길 리액트 쿼리를 사용하면 해결된다고 해서 해당 페이지는 쿼리로 코드를 수정해줬다.
다음으로 생긴 문제는 위에서 말했다싶이 이전의 데이터값이 바로 안들어가는 문제가 생겼는데 이 부분은 다른 팀이 같은 작업을 했다는 정보를 듣고 가서 물어본 결과 onSuccess로 성공했을 때 데이터 값을 각각의 profile에 넣어주는 형식으로 수정해주었다.
그리고 수정 사항을 서버로 보낼 때 중복검사하는데서 다시 문제가 생겼는데, 원래 있던 닉네임을 그대로 적용하려고 할 때, 이미 내가 사용하고 있던 닉네임은 중복확인을 했을 때 이미 있는 닉네임으로 뜨기 떄문에 해당 내용도 if문으로 예외처리를 해주었다. 백한테 요청하면 아마 가볍게 해결될 문제같지만 프론트 선에서도 많이 어렵지않게 해결할 수 있을 것 같아서 그냥 코드를 짰다.

헤더에 수정데이터 넣어주기

  
const [logininfo, setLogininfo] = useState({});
const [myPageData, setMyPageData] = useState([]);
const { data } = useQuery(["mypage"], getMypage, {
onSuccess: (config) => {
     setMyPageData(config.data);
},
enabled: false, // 중요포인트...!
});

//마이페이지일 때 axios로 저장된 값을 불러옴(위의 getMypage로)
if (window.location.pathname === "/mypage") {
//뱃지 null일 때 기본 값 이름
const userbadge =
     userinfos.badgeName == null
     ? "등산 비기너, "
     : `${myPageData.badgeName}, `;
const userName = myPageData.nickName;

//마이페이지가 아닐 때는 sessionStorage의 값을 불러옴
const userbadge =
     userinfos?.badgeName == null
     ? "등산 비기너, "
     : `${userinfos?.badgeName}, `;
const userName = userinfos?.nickName;

마이페이지 수정 후 수정 데이터들을 바로 sessionStorage에 저장해서 다른 헤더들에서도 바로 뽑아쓰는 형식으로 생각하고 있었는데, 마이페이지에서 정보 수정을 한 뒤에, 마이페이지에서는 바로 변경된 내용이 헤더에 뜨지 않는 문제가 생겼고, 다음으로 생각한게 헤더에서 마이페이지 정보를 불러준다면 해당 내용이 뜰 것이라고 생각해서 getMypage로 불러줬다.
그런데 헤더는 모든 페이지에 있다보니 모든 페이지에서 getMypage를 불러오는 문제 + 로그인을 하지않았을 때 오류가 뜨는 문제가 생겼고, if문을 통해 위치가 mypage일 때만 getMypage를 불러오려고 했지만, 아직 쿼리에 미숙한지라 해당 부분을 어떻게 짜야할 지 몰라서 고생했다.
팀원의 도움으로 enabled를 통해 기본값을 없는 상태로 주고 이후 원할 때 뽑아 쓸 수 있도록 도움을 주었고, 해당 내용으로 수정한 결과 console에도 오류가 뜨지않고 network에서도 호출하지 않아서 깔끔하게 해결됐다.

위 내용 말고도 많은 문제가 있었다. 사실 혼자 힘으로 최대한 해보려고 했지만 아직 실력이 많이 부족한지라 혼자 4-5시간동안 작업한 것보다 잠깐 다른 사람들에게 10분 물어보는게 해결 속도가 2배이상 빨랐다. 오우..이거 맞나?..
더군다나 지난주에 이어서 이제서야 작업할 내용들을 시작한 부분들이 많고 오류 및 버그도 와장창 발견하다보니 멘탈이 온전치 않은 와중에 토요일 밤에 컴퓨터가 고장나버렸다. 오아옹..!
완전 멘탈이 나가버려서 토요일 밤에 일요일에 여는 수리 센터를 헐레벌레 찾아보고 발견한 곳 두세곳에 연락해본 결과 절박함이 통했는지 오늘 오픈을 한다고 하셨고 급하게 달려가서 해결했다.
컴퓨터 첫번째 문제는 배터리쪽 문제였다. 오랜 기간동안 사용하다보니 메인보드와 연결된(?) 배터리쪽에서 문제가 생긴 것 같다고 하셨고, 배터리를 새로 꽂아주니 전원이 들어왔다!
…..하지만 계속 반복되면서 로딩이 되었고 2차 문제가 확인됐는데, 램쪽이 뭔가 오류가 나고 있다고 알려주셨다. 램쪽의 경우 조금 청소?해주시고 뭔가 칙칙이 뿌리고 나니까 또 됐다. 마성의 손.. 멋쟁이.. 진짜 90도 인사하고 돌아옴
그 이후에 컴퓨터에 미묘한 오류까지 다 고쳐주셔서 매우 감사한 마음으로 돌아왔다.(어쩌다보니 컴퓨터 수리 후기가 되어버린 매직)
진짜 토요일 저녁에 멘붕와서 진짜 광광 울었는데 생각보다 빨리 해결되서 다행이었다.(근데 그 이후에 기빨려서 작업 거의 못한 거는 비밀)

출처:
항해99 9기 A반 프엔 쓰앵님덜👍🏻

221211_WIL | 실전프로젝트 진행중(5주차)

221211_WIL

오늘한 일

이번주 한 일

Further Reading

221125_TIL | 상세2로 연결(필터 칩 수정중)

221120_WIL | 실전프로젝트 진행중(2주차)

221127_WIL | 실전프로젝트 진행중(3주차)