Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
코드리뷰가 늦어져서 죄송해요ㅠㅠ
수고하셨습니다 :)
TanstackQuery의 Mutation을 활용하여 Auth기능을 구현해 보았습니다. Mutation과 Mutate의 로직을 분리하여 사용중인데 알맞게 이해하고 사용하고 있는것일까요?
사용은 잘 하고 계신데, 개인적으로 이걸 페이지 내부에서 선언해버리면 너무 복잡해져서 코드리뷰에서 말씀드린 것처럼 훅으로 빼시면 좀 더 깔끔해질 거 같아요!
getLayout기능을 활용하여 Layout 구성을 시도해 보았는데 folderId의 페이지 구성에서는 변경되는 부분을 제외한 다른 나머지 전체를 Layout으로 구성해야 할 지 고민입니다. 지금처럼 Navigetion과 Footer만 Layout으로 구성하는게 좋을까요?
음 이건 완전 개인 취향일 거 같아요! (앞으로 확장될 일은 없겠지만) 페이지가 더 많아지는데에 유연하게 대처하고 싶으시면 지금이 맞고, 중복을 줄이는데에는 최대한 Layout 에 끼워넣는 게 맞을 거 같아요. 저는 보통 전자를 하는 편입니다.
getServerSideProps의 이해에서 시간이 많이 걸렸는데 �의도에 알맞게 구성을 해 놓은것 일까요?
넵 완전..!
Next의 ServerSide환경에서는 기존 fetch방식만 사용 가능하여 TanstackQuery가 Next환경에서 굳이 필요한가? 라는 의문이 듭니다. 멘토님 의견은 어떠신가요?
저는 그래도 프리페칭 측면에서 필요하다고 생각해요!
폴더구성에 대한 고민이 아직까지 끊이지않고 이어지는듯 합니다. 현재 구성도 크게 마음에 들지 않는부분인데 혹시 폴더 구성에 대해 방향을 잡아주시거나 추천해주실만한 structrue나 방식 혹은 자료가 있을까요?
저도 지금 저희 팀 프로젝트 구성 맘에 안들어요...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 정답은 진짜 없지만 그래도 괜찮은 구조라고 생각하는 글 넣어두고 가요^^;;
https://miriya.net/blog/cliz752zc000lwb86y5gtxstu
public/svgs/ic_eye_off.tsx
Outdated
There was a problem hiding this comment.
svg 파일들은 .svg 파일로 저장하시고 불러올 때는 import Ic_Eye_Off from '@/public/svgs/asdf.svg'; 식으로 불러올 수 있어요!
There was a problem hiding this comment.
svgr을 사용하면 해결될 문제이긴 한데... 재사용성을 위해서 컴포넌트 식으로 선언해서 쓰는방식은 좋지 않은 방법일까요?
| return ( | ||
| <main className={cn("container")}> | ||
| {LANDING_CONTENTS.map((content, i) => { | ||
| return <Content key={i} content={content} id={i} />; |
There was a problem hiding this comment.
key 를 index 로 주는 건 안주는 것과 똑같아요! (key 안주면 리액트 내부적으로 index 로 줌)
unique 한 값이 없어 어쩔 수 없이 준 것이라면 주석이라도 다시는 걸 추천해요!
| if (favorite) { | ||
| setFolderId(favorite.id); | ||
| return; | ||
| } | ||
|
|
||
| setFolderId(null); |
There was a problem hiding this comment.
| if (favorite) { | |
| setFolderId(favorite.id); | |
| return; | |
| } | |
| setFolderId(null); | |
| setFolderId(favorite?.id ?? null); |
| Find in-depth information about Next.js features and API. | ||
| </p> | ||
| </a> | ||
| export const getServerSideProps: GetServerSideProps = async (context) => { |
There was a problem hiding this comment.
이 부분 로직을 보면 쿠키에 accessToken 이 있는지 확인하고, 토큰에 따라 prefetch 하는 로직이 계속 반복되는 거 같아요!
HOF 를 이용하면 중복 제거할 수 있을 거 같습니다
https://velog.io/@navyjeongs/Next.js-SSR%EC%97%90%EC%84%9C-HOF%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-%EC%BF%A0%ED%82%A4-%EC%A0%84%EC%86%A1%ED%95%98%EA%B8%B0
| const { mutate: loginMutation } = useMutation({ | ||
| mutationFn: postSignIn, | ||
| mutationKey: ["token"], | ||
| onSuccess: () => { | ||
| // token값을 cookie에 저장하여 사용중인데 localStorage관련한 로직을 추가적으로 넣어주는게 맞는지 고민중입니다 | ||
| // queryClient.invalidateQueries({ | ||
| // queryKey: ["accessToken"], | ||
| // }); | ||
| // queryClient.invalidateQueries({ | ||
| // queryKey: ["refreshToken"], | ||
| // }); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
react-query 부분을 커스텀 훅으로 빼면 실제 페이지부에 로직이 명확하게 보이는 장점이 있어서 고려해보심 좋을 거 같아요!
https://velog.io/@codns1223/React-react-query-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%9B%85%EC%9C%BC%EB%A1%9C-%ED%99%9C%EC%9A%A9
| interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> { | ||
| label?: string; | ||
| errorMessage?: string; | ||
| suffixIcon?: boolean; |
There was a problem hiding this comment.
boolean 변수명이라 needSuffixIcon 정도 추천드려요!
| const { name } = favorite || { name: "전체" }; | ||
|
|
||
| return ( | ||
| <button |
src/utils/getElapsedTime.ts
Outdated
There was a problem hiding this comment.
date-fns 와 같은 라이브러리로 간단히 할 수 있을 거 같은데 참고해보셔요~
https://date-fns.org/
|
@bokeeeey 님, 충돌 해결 부탁드립니다..! (머지를 해야해서ㅠ) |
|
요거 머지를 해야하는데에... 컨플릭 해결 부탁드립니다... 후엥... @bokeeeey |
devToram
merged commit c0b9744
into
codeit-bootcamp-frontend:part3-김보경
요구사항
기본
주요 변경사항
스크린샷
https://4-weekly-mission-virid.vercel.app/
멘토에게