MSTR-301: 정보수정페이지

[Kim-Hyunjo]

작업 내역

구현 내용 및 작업 했던 내역

• [x] 정보수정페이지&마이페이지에 전공, 직업, 주요기술, 희망직업 추가
• [x] 정보수정페이지 디자인 적용

변경사항

• React-Select

작업 유형

• [x] 신규 기능 추가
• [ ] 버그 수정
• [ ] 리펙토링
• [ ] 문서 업데이트

PR 특이 사항

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

• 다음과 같은 몇가지 오류가 있으나 일단 동작은 하니 되는 부분까지 올립니다.

  • 정보수정페이지 새로고침시 기존 입력내용 사라지는 오류 ➡️ 모든 데이터가 fetch된 후 rerender하는 형식으로 해결하고자 합니다.

  • 수정된 데이터가 바로 마이페이지에 적용되지 않는 문제 ➡️ GET해온 데이터가 바뀐 데이터가 아니라서 수정페이지에서 마이페이지로 state형태로 넘길지 고민입니다. 이건 여태까지도 그랬는데 사실 react-query가 캐싱을 해서 발생한 문제인 줄 알았습니다. 그러나 찾아보니 저는 여태까지 전혀 캐싱 기능을 활용하고 있지 않았습니다. 이 세상에 자동으로 되는 건 없었습니다... 그래서 왜 마이페이지에 바로 적용이 되지않는지, 프론트 단에서 해결가능한 문제인지 찾지 못하고 있습니다.

  • 정보수정페이지 다크모드시 조금 안예쁜 문제 ➡️ 유감

  • 정보수정페이지 주요기술, 전공 API 응답을 받아 옵션형태로 만들어 기존 값이 무엇인지 찾는데에 까지 지나친 시간이 든다는 문제 ➡️ 이건 기존 유저 데이터를 가지고 선택된 데이터만 옵션형태로 미리 만들어놓는 방식으로 해결하고자 합니다.

[netlify[bot]]

✅ Deploy Preview for elegant-yeot-fdb43b ready!

Name	Link
🔨 Latest commit	a1e368226384520b3eeeb2293ac2d16505e63df0
🔍 Latest deploy log	https://app.netlify.com/sites/elegant-yeot-fdb43b/deploys/63452cb289d16c000967dc1a
😎 Deploy Preview	https://deploy-preview-51--elegant-yeot-fdb43b.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[kshired]

정보수정페이지 주요기술, 전공 API 응답을 받아 옵션형태로 만들어 기존 값이 무엇인지 찾는데에 까지 지나친 시간이 든다는 문제

위 문제는 제가 확인해봤을 때, 지나친 시간이 드는게 아니라 처음 들어 갔을 떄는 아예 안나오고 두 번째 들어갔을 때는 나오는 상황이예요. 말로 설명하기 어려운데, 내일 스크럼 때 보여 드릴게요~

[kshired]

• 1번에 대한 피드백

  • AsyncSelect 라는 걸 react-select에서 제공하는 것 같음. 이걸 써보는게 어떤지? ( 전공 데이터가 500개쯤 되는데, 그걸 한 번에 가져오는건 안좋아보임. 여기에 debounce 까지 엮으면 괜찮을 듯 )
  • 직장인, 직무 쪽은 데이터를 이미 frontend에서 가지고 있으니, AsyncSelect 말고 Select를 써도 괜찮을 듯.

• 2번에 대한 피드백

  • defaultValue 에서 오래걸리는건 major, tech 를 fetch 하고 profileData 랑 비교해서 그런 것 같은데.. 아래 코드로 해결 가능했음. ( major && tech && profileData && <> 프로필 JSX </> )
  • 근데, 1번에서 얘기한 AsyncSelect 를 쓴다면.. 이 방법으로 해결 불가능 할 듯 => 그냥 서버에서 주는 값을 믿고 바로 createOptions 를 써도 좋을 듯. ( 어차피 서버 값을 default로 쓰는 건데, 서버 값은 믿어도 되니까 굳이 majors.find 같이 find를 안해도 될 것 같음 )

  example/edit 브랜치의 https://github.com/SW13-Monstera/frontend/commit/bbb7457b4a03e4d7826e60ecf74257d00a2bc96e 커밋을 참고하세요~

[Kim-Hyunjo]

• 1번에 대한 피드백

  • AsyncSelect 라는 걸 react-select에서 제공하는 것 같음. 이걸 써보는게 어떤지? ( 전공 데이터가 500개쯤 되는데, 그걸 한 번에 가져오는건 안좋아보임. 여기에 debounce 까지 엮으면 괜찮을 듯 )
  • 직장인, 직무 쪽은 데이터를 이미 frontend에서 가지고 있으니, AsyncSelect 말고 Select를 써도 괜찮을 듯.

• 2번에 대한 피드백

  • defaultValue 에서 오래걸리는건 major, tech 를 fetch 하고 profileData 랑 비교해서 그런 것 같은데.. 아래 코드로 해결 가능했음. ( major && tech && profileData && <> 프로필 JSX </> )
  • 근데, 1번에서 얘기한 AsyncSelect 를 쓴다면.. 이 방법으로 해결 불가능 할 듯 => 그냥 서버에서 주는 값을 믿고 바로 createOptions 를 써도 좋을 듯. ( 어차피 서버 값을 default로 쓰는 건데, 서버 값은 믿어도 되니까 굳이 majors.find 같이 find를 안해도 될 것 같음 )

example/edit 브랜치의 bbb7457 커밋을 참고하세요~

너모 최고예요 감사합니다ㅠㅠㅠㅠㅠ