[나지원] sprint12 #137
[나지원] sprint12 #137
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
지원님 스프린트 미션하시느라 고생하셨습니다~
그전 코드에다 react-query를 사용하시느라 약간 아쉬운 부분들이 있었는데 코드에서 부분적으로 적용한다고 해결될 부분들이 아니라 여기서 코멘트 드립니다.
쿼리키의 경우 다양한 형태를 가질 수 있어 타입정의가 쉽지 않으셨을 것 같습니다.
이럴때 가독성과 타입안정성을 위해 queryOption나 query factory 패턴을 통해 타입관련
문제를 해결할수있습니다.
관련 글을 읽어보시고 재사용가능한 queryKey, queryOption을 정의해보시면 좋겠습니다~
https://tkdodo.eu/blog/the-query-options-api
- 배포 사이트에서 확인해보니 상품 등록하기가 로그인 하지 않아도 접근이 되어서 등록 버튼을 눌렀을때 에러가 나니 확인해보세요.
| return ( | ||
| <> | ||
| <AddItemForm /> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
P3:
| return ( | |
| <> | |
| <AddItemForm /> | |
| </> | |
| ); | |
| return <AddItemForm /> |
| const ItemDetail = ({ | ||
| images, |
There was a problem hiding this comment.
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.
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.
P3:
이런 함수가 반복적으로 사용되니 유틸로 분리를 하시거나,
아니면 breakpoint라도 const로 관리하시면 좋을 것 같습니다~
| queryKey: ["products", { order, pageSize: pageSize!, currentPage }], | ||
| queryFn: fetchProducts, | ||
| enabled: !!pageSize, | ||
| placeholderData: keepPreviousData, |
| () => | ||
| new QueryClient({ | ||
| defaultOptions: { | ||
| queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false }, |
There was a problem hiding this comment.
P3:
기본값으로 1분도 나쁘지 않은 것 같지만, 블로그에 의하면 추천 staleTime은.. 20초라고 합니당.
참고만 해주세요~
https://tkdodo.eu/blog/react-query-as-a-state-manager#customize-staletime
2 participants
요구사항
기본
중고마켓
상품 상세
상품 등록
심화
배포
https://najimarket.vercel.app/
멘토에게