221121_TIL | 마이페이지 만들기

오늘한 일

• [항해 99] 마이페이지 수정 관련 구현 완료

내일 할 일

• 리액트 쿼리 3강까지 듣기
• [항해 99] 실전프로젝트 상세 1페이지 필터 부분 수정

오늘의 배운 점

1. PUT 과 PATCH
   PATCH의 경우 일부의 내용만 입력하더라도 서버로 정보를 보낼 수 있고 , PUT은 모든 정보를 입력해야 서버로 정보를 보낼 수 있는 차이가 있다.
   이전 클론 프로젝트에서는 수정시 PATCH를 사용해서 진행했었는데, 이번 실전 프로젝트는 PUT으로 진행이 되었다. 그런데 아직 와이어프레임이 나오지 않은 상태라 입력값이 어떻게 될 지 확신할 수 없었고, 일단 가지고 있는 정보들로 테스트를 해봤지만, 모든 정보를 보내야 PUT이 될 것 같았다.(생각해보니 테스트 안해봤다. 내 실수로 오류가 난 걸 서버 오류로 착각함)
   req 내용들을 변경하기에는 서버팀에서 손 볼 일이 많아질 것 같아 보내는 형식만 PATCH로 바꿔달라고 요청하여 진행했다.
   
   

   **문제 사항
   현재는 빈 값일 때 서버로 데이터 전송이 안되도록 프론트단에서 막아놨는데 만약에 그렇게 하지 않는다면, 빈값일 때 원래의 값이 들어가도록 수정하고 싶다. 나중에 리팩토링 기간 때 PUT으로 바꾸거나 빈 값일 때도 원래 내용 그대로 데이터가 전송되도록 수정 예정.
   
   

2. 프로필 수정 관련 정보 저장(헤더에 닉네임과 뱃지이름이 뜨는 문제)
   1안은 지난 클론주차처럼 sessionStorage에 저장하기
   (storage에 개인정보는 로그인 시에만 저장되므로 해당 부분은 storage에서 지웠다가 새로 item을 넣어주는 형식으로 진행함)
   2안은 마이페이지에서 프로필 정보 변경 후 서버에서 받아온 데이터를 이용하기
   -> 위의 방법들은 각각의 장단점이 확실해서 팀원과 논의한 결과 1안으로 사용하기로 했다.
   
   

   1안의 경우 sessionStorage에 저장하는 경우 현재 암호화를 해서 저장하는 게 아니다보니, 보안상의 문제가 조금 걱정되었지만 이용 방법이 간단하고 매번 서버에서 데이터를 가져올 필요가 없다는 장점이 있다.
   2안의 경우 sessionStorage에 저장하는게 아니다보니 보안면에서는 안정감이 있겠지만, 헤더의 경우 모든 페이지에 존재하고 있기때문에 매번 정보를 불러와야하는 단점이 있다.
   

   이런 부분들은 네이버 등의 일반적인 웹사이트에서 확인해봤는데 대부분 cookies나 storage에 정보를 암호화하여 저장하는 것 같았고, 1안과 2안 사이에서 성능적으로 큰 차이가 날 것 같지않다는 팀원들의 조언을 받아 1안으로 진행하기로 했다.
   
   

   **sessionStorage 형식 바꾸기
   

   //바꾸기 전
   sessionStorage.setItem(
             "name",
             action.payload.data.data.nickName
        );
        sessionStorage.setItem(
             "badge",
             action.payload.data.data.badgeName
        );
   
   //불러와서 사용할 때
   const name = sessionStorage.getItem("name");  //{name}
   const badge = sessionStorage.getItem("badge"); //{badge}
   
   
   //바꾼 후
    sessionStorage.setItem(
             "userinfos",
             JSON.stringify(action.payload.data.data)
   
   //불러와서 사용할 때
   const userinfo = JSON.parse(sessionStorage.getItem("userinfos")); //{userinfo.nickName}
   

   
   

---

간만에 최소한의 목표치까지는 해결했다. 클론 주차때 마음 고생하고 힘들었던걸 보상받는 느낌…? 이제 다시 상세 1페이지 작업해야하는데 코드가 너무 복잡해져서 손이 안간다.
그래도 해야지 어쩌겠슈.. 좀 일찍 자고 일찍 일어나는 라이프를 살아보고 싶은데 쉽지않다. 그리고 작업할수록 느끼는거지만 내가 담당하게 된 부분들이 비교적 간단한게 많아서 이후에 뭔가 내세울만한 부분이 없는 것 같아서 아쉽다. 팀원들이 짠 코드도 몰래 좀 훔쳐보고 공부하면서 작업하는 게 좋을 것 같다.
내일도 다시 한 번 으쌰룽!~!~!

근데 리액트 쿼리 언제 써보지..?