Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
📌 LGTM
수진님 답변이 늦어서 죄송해요 😭
전체적으로 수진님 코드보니까 hook으로 분리해서 api 호출하려는 부분이랑 react-query 사용한 부분이 정석적으로 잘 사용해주신 것 같아요! 너무 잘하셨습니다. 👍🏻
에러에 대한 처리와 로딩에 대한 처리는 앞으로 저랑도 계속해서 배워볼 예정인데 프론트 개발자로써 유저 경험에 직접적으로 해당하는 부분인 로딩과 에러는 앞으로도 계속 공부해나가야하는 부분이기에 하나하나씩 같이 배워보도록 하시죠!
고생하셨습니다. 😃
| console.log(error); | ||
| } | ||
| const Navbar = () => { | ||
| const { data, isError, isPending } = useGetUser(); |
There was a problem hiding this comment.
api 요청을 hook으로 관리하려는 시도 너무 좋은 것 같아요👍🏻
| <Link href={ROUTE_PATHS.home}> | ||
| <Profile email={user[0].email} imgUrl={user[0].image_source} /> | ||
| <Profile email={data.email} imgUrl={data.image_source} /> |
There was a problem hiding this comment.
저 같은 경우에는 보통 data라는 값으로 반환하기 보다는 hook에서 꺼내올때 user에 관한 정보면 userInfo라던지 조금 더 명확한 네이밍을 쓰는데 참고해보시면 좋을 것 같아요!
hooks/useGetUser.ts
Outdated
| const fetchUser = async (): Promise<UserResponse> => { | ||
| const { | ||
| data: [user], | ||
| } = await instance.get("/users"); | ||
| return user; | ||
| }; |
There was a problem hiding this comment.
해당 부분은 api 폴더를 활용해봐도 좋을 것 같아요!
| const useAuthStore = create<AuthState>()( | ||
| persist( | ||
| (set) => ({ | ||
| accessToken: null, | ||
| setAccessToken: (token) => set({ accessToken: token }), | ||
| }), | ||
| { | ||
| name: "auth-storage", | ||
| getStorage: () => localStorage, | ||
| } | ||
| ) | ||
| ); |
There was a problem hiding this comment.
zustand도 잘 활용해주셨네요 👍🏻
클라이언트 상태관리로 최근에 가장 관심받는 라이브러리가 하나가 zustand인데 특징들을 잘 파악해두면 좋을 것 같아요!
| if (error.isAxiosError) { | ||
| if (error.response?.status === 404) { | ||
| console.log("존재하지 않는 유저"); | ||
| } else { | ||
| console.log("인증 오류"); | ||
| } |
There was a problem hiding this comment.
404와 같은 에러는 범용적인 에러라서 존재하지 않는 유저와 같이 특정 api에서 나는 에러를 처리하기 위한 텍스트를 적용하기에는 어렵습니다. 따라서 쫌 더 범용적으로 에러 텍스트를 처리할 수 있으면 좋을 것 같고 500과 같은 에러 또한 여기서 같이 처리해주면 좋을 것 같아요!
hooks/useDeleteFolder.ts
Outdated
| const deleteFolder = async (folderId: number) => { | ||
| try { | ||
| await instance.delete(`/folders/${folderId}`); | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| }; |
There was a problem hiding this comment.
해당 부분도 api 폴더로 따로 빼서 관리해보면 좋을 것 같아요!
hooks/useDeleteFolder.ts
Outdated
| mutationFn: deleteFolder, | ||
| onSuccess: () => | ||
| queryClient.invalidateQueries({ | ||
| queryKey: ["folders"], |
There was a problem hiding this comment.
tanstack query 메인테이너인 tkdodo 블로그를 보면 queryKey를 관리하는 방식에 대해서 설명해주고 있어요!
해당 부분 참고해서 보시면 좋을 것 같아요!
📌 참고
effective query key
| if (isPending) { | ||
| return <div>로딩 중 입니다.</div>; | ||
| } | ||
|
|
||
| if (isError) { | ||
| return <div>에러가 발생했습니다. 다시 시도해주세요.</div>; | ||
| } |
There was a problem hiding this comment.
앞으로 저랑 배워볼 개념중에 Suspense와 ErrorBoundary와 같은 친구들이 있는데 에러처리를 해당 컴포넌트에 위임해서 선언적으로 처리하는게 리액트에 패러다임이라고 볼 수 있어요! 해당 키워드들도 한번 살펴보시면 좋을 것 같습니다!
| USER: ["user"] as const, | ||
| FOLDERS: ["folders"] as const, | ||
| LINKS: (folderId?: number | null) => | ||
| folderId ? (["links", folderId] as const) : (["links"] as const), |
There was a problem hiding this comment.
앞에 key 관리에 대한 리뷰를 달았었는데 key 관리를 잘하고 계셨군요!?!? 👍🏻👍🏻👍🏻👍🏻👍🏻
hovelopin
merged commit 045d481
into
codeit-bootcamp-frontend:part3-길수진
요구사항
기본
폴더 페이지
공유 페이지
주요 변경사항
스크린샷
멘토에게