Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[홍재원] week19 #557

Conversation

hongjw030
Copy link
Collaborator

@hongjw030 hongjw030 commented Jan 15, 2024

요구사항

후딱 수정해보겠습니다, 늘 죄송하고 감사합니다!!

기본

  • react query를 써서 api를 연결했는가?

주요 변경사항

  • 메인 렌딩 페이지, 미들웨어를 통한 페이지 자동 라우팅 기능 구현했습니다.
  • 로그인, 회원가입 기능 모두 구현했습니다. 로그아웃 기능 있습니다!
  • 맨 처음엔 /folders 페이지에서 전체 링크들이 보이게 구현했습니다.
  • 폴더 버튼을 누르면 /folders/id 페이지로 이동됩니다.
  • 폴더 추가, 이름 수정, 삭제 모두 동작하고 자동으로 데이터 패칭 됩니다!
  • link 추가, link 삭제 기능 동작합니다

고칠 점

모달

  • LinkAddModal에서 ui가 피그마 시안과 다릅니다. 이 부분 수정하겠습니다!!!

스크린샷

랜딩
image

로그인 직후 /folders 페이지로 이동.

image

폴더 추가 버튼 누르면 바로 추가되고, folderList도 새로고침없이 자동으로 업데이트됨

image

이름 변경도 자동 데이터패칭 되고 잘 업데이트 됨.

image

image

링크 삭제를 누르면 삭제됨
image

멘토에게

  • 가끔 useQuery가 제대로 cache를 저장하지 못하는 모습이 보입니다.
    /folders/1 페이지에서 /folders/2 페이지로 넘어갈 때 어떨 때엔 folders-2 캐시가 잘 저장되고, 어떨땐 아예 저장이 안되고 랜덤으로 작동합니다... 근데 왜 이런건지를 모르겠습니다.

  • 공유 페이지인 sharedPage의 url을 어떻게 짤지 고민입니다.
    sharedPage 기능: 외부 유저에게서 공유받은 페이지로, 외부 유저의 id와 외부유저가 공유해준 폴더 아이디, 그 폴더의 card list들이 보이는 페이지입니다.
    https://www.figma.com/file/KjzGnP6LY48fN0NCFzp0iQ/Weekly-Mission?type=design&node-id=15555-64804&mode=design&t=zp3V6FgiCyprFnYr-0

이걸 구현하기 위해 shared/{userId}/{folderId} 이렇게 url을 설정할지,
아니면 shared?userId={userId}&folderId={folderId} 이렇게 쿼리문으로 url을 설정해서 처리할지 고민입니다!! 어떻게 해볼까요??

  • response로 401 status를 받을 경우, refresh 토큰으로 accessToken을 재발급받도록 axios interceptors 코드를 짰지만 제대로 동작하지 않습니다. 왜 이런건지 모르겠습니다....

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@hongjw030 hongjw030 requested a review from kimjngyun January 15, 2024 04:47
@hongjw030 hongjw030 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성 죄송합니다.. labels Jan 15, 2024
@hongjw030 hongjw030 self-assigned this Jan 15, 2024
@hongjw030 hongjw030 removed the 미완성 죄송합니다.. label Jan 17, 2024
Copy link
Collaborator

@kimjngyun kimjngyun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 중인데 질문 주신거 먼저 코멘트 드리고 마저 보겠습니다!

src/store/useModalStore.tsx Show resolved Hide resolved
src/pages/folders/[folderId].tsx Show resolved Hide resolved
src/api/axiosInstance.ts Show resolved Hide resolved
src/api/axiosInstance.ts Show resolved Hide resolved
src/api/axiosInstance.ts Show resolved Hide resolved
@kimjngyun
Copy link
Collaborator

kimjngyun commented Jan 17, 2024

재원님 파트3 고생 많으셨습니다! 대공사 하시느라 엄청 고생하셨겠군요.. 👍
저도 그동안 감사했습니다! 앞으로도 파이팅 🔥🔥🔥

가끔 useQuery가 제대로 cache를 저장하지 못하는 모습이 보입니다.
/folders/1 페이지에서 /folders/2 페이지로 넘어갈 때 어떨 때엔 folders-2 캐시가 잘 저장되고, 어떨땐 아예 저장이 안되고 랜덤으로 작동합니다... 근데 왜 이런건지를 모르겠습니다.

  • cacheTime / staleTime 옵션과 query key를 한번 점검해보세요!

공유 페이지인 sharedPage의 url을 어떻게 짤지 고민입니다.
sharedPage 기능: 외부 유저에게서 공유받은 페이지로, 외부 유저의 id와 외부유저가 공유해준 폴더 아이디, 그 폴더의 card list들이 보이는 페이지입니다.
https://www.figma.com/file/KjzGnP6LY48fN0NCFzp0iQ/Weekly-Mission?type=design&node-id=15555-64804&mode=design&t=zp3V6FgiCyprFnYr-0

이걸 구현하기 위해 shared/{userId}/{folderId} 이렇게 url을 설정할지,
아니면 shared?userId={userId}&folderId={folderId} 이렇게 쿼리문으로 url을 설정해서 처리할지 고민입니다!! 어떻게 해볼까요??

  • userId 나 folderId 각각의 리소스를 따로 접근할 수 있기 때문에 쿼리스트링으로 url을 설정해도 괜찮을 것 같습니다. 다만 user 정보나 folder 정보를 가져올 수 없는 경우에 어떻게 이를 UX로 제공할 것인지를 고민해보셔야 할 것 같아요.

response로 401 status를 받을 경우, refresh 토큰으로 accessToken을 재발급받도록 axios interceptors 코드를 짰지만 제대로 동작하지 않습니다. 왜 이런건지 모르겠습니다....

  • 따로 코멘트 남겼습니다!

@kimjngyun kimjngyun merged commit 2ee9714 into codeit-bootcamp-frontend:part3-홍재원 Jan 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants