feat: [55] 마이페이지, 회원탈퇴 구현 #56
Conversation
web/package.json
Outdated
| @@ -20,6 +20,8 @@ | |||
| "dependencies": { | |||
| "@hookform/resolvers": "^3.9.0", | |||
| "@lukemorales/query-key-factory": "^1.3.4", | |||
| "@nextui-org/modal": "^2.0.39", | |||
There was a problem hiding this comment.
엥? 갑자기 nextui 사용하신 이유가 있으신가요?
제가 알기로는 해당 라이브러리는 tailwind 기반 라이브러리로 알고있는데,,
There was a problem hiding this comment.
회원 탈퇴 시 modal을 라이브러리 사용해서 해보고 싶었는데 아쉽게도 적용이 안돼서 우선은 alert 처리해놨습니다 ㅜㅜ
There was a problem hiding this comment.
회원 탈퇴 시 modal을 라이브러리 사용해서 해보고 싶었는데 아쉽게도 적용이 안돼서 우선은
alert처리해놨습니다 ㅜㅜ
넵 ㅠ 저 라이브러리가 tailwind 기반 라이브러리라 tailwind 세팅 후 사용 가능합니다 ㅜ
There was a problem hiding this comment.
회원 탈퇴 시 modal을 라이브러리 사용해서 해보고 싶었는데 아쉽게도 적용이 안돼서 우선은
alert처리해놨습니다 ㅜㅜ넵 ㅠ 저 라이브러리가 tailwind 기반 라이브러리라 tailwind 세팅 후 사용 가능합니다 ㅜ
네네 저도 적용이 안돼서 다시 읽어봤는데 tailwind 기반이라고 하더라구요 ㅠㅠ
web/src/pages/my-page.tsx
Outdated
|
|
||
| const MyPage = () => { | ||
| const { data, error, isLoading } = useQuery({ |
There was a problem hiding this comment.
유저 정보같은거 캐시 태우실때, 캐시 키에 유저 정보 포함시키는게 좋을거같아요
만약 이게 어렵다면 (유저 정보를 가져오기 전에 식별할 데이터가 토큰 뿐이라면,,), 로그아웃할때 캐시 무효화를 해줘야할거같습니다
web/src/pages/my-page.tsx
Outdated
| } | ||
| }; | ||
|
|
||
| if (isLoading) { |
There was a problem hiding this comment.
isLoading 보다는 isPending이 적합할거같습니다
참고 자료
There was a problem hiding this comment.
앗 찾아보니까 isLoading을 많이 사용들해서 작성했는데 isPending이 더 적합한가보네요
참고자료 읽어보겠습니다!
There was a problem hiding this comment.
앗 찾아보니까 isLoading을 많이 사용들해서 작성했는데 isPending이 더 적합한가보네요
참고자료 읽어보겠습니다!
v4에서는 isLoading이였는데 v5 오면서 isPending으로 바뀌었습니다 ㅜㅜ
아마 저 참고자료 보시면 "바꿔서 미안하다" 이런 언급도 있을겁니다
There was a problem hiding this comment.
앗 찾아보니까 isLoading을 많이 사용들해서 작성했는데 isPending이 더 적합한가보네요
참고자료 읽어보겠습니다!v4에서는 isLoading이였는데 v5 오면서 isPending으로 바뀌었습니다 ㅜㅜ 아마 저 참고자료 보시면 "바꿔서 미안하다" 이런 언급도 있을겁니다
ㅋㅋㅋㅋㅋㅋ 그런 일이 있었나보네요
web/src/pages/my-page.tsx
Outdated
| return <div>정보를 불러오는데 실패했습니다!</div>; | ||
| } | ||
|
|
||
| const user = data.data; |
There was a problem hiding this comment.
현재 상태에서는 isFetching 상태에서 data를 읽지 못하여 터질수도 있을거같습니다
참고 자료
| // onSuccess: () => { | ||
| // console.log('로그인 성공'); | ||
| // }, | ||
| // 로그인 성공 시 token 저장 및 콘솔 출력 |
|
이 부분은 아무래도 react-query 쪽이 많이 들어가있어서,, |
넵 알겠습니다! 제가 아직 react-query 쪽이 미숙하다보니 부탁드릴게요 ㅎㅎ |
그리구 이건 그냥 여쭤보는건데 queryClient.invalidateQueries('userInfo'); 주신 관련자료 참고해서 이런 식으로 한 줄만 작성하면 쿼리 무효화 (캐시 무효화와 같은 의미일까요?)가 되는 걸까요? |
넵 쿼리 키 기반으로 해당 쿼리 키 캐시 데이터를 날려버립니다 (캐시 무효화) |
아하 알려주셔서 감사합니다 ㅎㅎ |
| user: { | ||
| all: null, | ||
| DEFAULT: [USER], |
There was a problem hiding this comment.
처음에는 퀴리키 생성 라이브러리를 사용하려했는데, 저희가 복잡한 퀴리를 다루지 않을것같아서 직접 구현하였습니다!
PR 유형
어떤 변경사항인지 체크해주세요 (중복 체크 가능)
PR 설명
alert로 임시 처리관련 이슈
스크린샷
체크리스트
추가 정보