-
Notifications
You must be signed in to change notification settings - Fork 21
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
[나지원] sprint12 #137
The head ref may contain hidden characters: "Next-\uB098\uC9C0\uC6D0-sprint12"
[나지원] sprint12 #137
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
지원님 스프린트 미션하시느라 고생하셨습니다~
그전 코드에다 react-query를 사용하시느라 약간 아쉬운 부분들이 있었는데 코드에서 부분적으로 적용한다고 해결될 부분들이 아니라 여기서 코멘트 드립니다.
쿼리키의 경우 다양한 형태를 가질 수 있어 타입정의가 쉽지 않으셨을 것 같습니다.
이럴때 가독성과 타입안정성을 위해 queryOption나 query factory 패턴을 통해 타입관련
문제를 해결할수있습니다.
관련 글을 읽어보시고 재사용가능한 queryKey, queryOption을 정의해보시면 좋겠습니다~
https://tkdodo.eu/blog/the-query-options-api
- 배포 사이트에서 확인해보니 상품 등록하기가 로그인 하지 않아도 접근이 되어서 등록 버튼을 눌렀을때 에러가 나니 확인해보세요.
return ( | ||
<> | ||
<AddItemForm /> | ||
</> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
return ( | |
<> | |
<AddItemForm /> | |
</> | |
); | |
return <AddItemForm /> |
const ItemDetail = ({ | ||
images, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2:
컴포넌트는 본인이 필요한 것만 아는 것이 잘 분리된 것이라고 생각합니다~
가능하면 images라는 배열말고 image를 받으면 좋겠네요.
import styles from "./Card.module.css"; | ||
import emptyImg from "@/public/img_default.svg"; | ||
|
||
const Card = ({ product }: { product: ProductProps }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
product 객체로 받을 필요가 없어 보입니다.
const Card = ({ product }: { product: ProductProps }) => { | |
const Card = ({ id, name, images, price, favoriteCount }: ProductProps) => { |
const getPageSize = (width: number): PageSizeType => { | ||
if (width < 768) return PAGE_SIZE_BY_SCREEN.MOBILE; | ||
if (width < 1200) return PAGE_SIZE_BY_SCREEN.TABLET; | ||
|
||
return PAGE_SIZE_BY_SCREEN.PC; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
이런 함수가 반복적으로 사용되니 유틸로 분리를 하시거나,
아니면 breakpoint라도 const로 관리하시면 좋을 것 같습니다~
queryKey: ["products", { order, pageSize: pageSize!, currentPage }], | ||
queryFn: fetchProducts, | ||
enabled: !!pageSize, | ||
placeholderData: keepPreviousData, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
👍
() => | ||
new QueryClient({ | ||
defaultOptions: { | ||
queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P3:
기본값으로 1분도 나쁘지 않은 것 같지만, 블로그에 의하면 추천 staleTime은.. 20초라고 합니당.
참고만 해주세요~
https://tkdodo.eu/blog/react-query-as-a-state-manager#customize-staletime
요구사항
기본
중고마켓
상품 상세
상품 등록
심화
배포
https://najimarket.vercel.app/
멘토에게