Conversation
|
prefetch 기능은 이미 사용하고 계실껄요...ㅎㅎ 이부분은 멘토링 할때 자세히 살펴볼게요...! |
| function AllItemsSection() { | ||
| const [alltItemsList, setAllItemsList] = useState<AllItemProps[]>([]); | ||
| const [itemCount, setItemCount] = useState<number>(getWidth()); | ||
| const [order, setOrder] = useState<string>("recent"); | ||
| const [poninter, setPoninter] = useState<number>(1); | ||
| const [title, setTitle] = useState<string>("전체 상품"); | ||
| const [pageSize, setPageSize] = useState<number>(0); | ||
| const option = {"recent" : "최신순", "favorite" : "좋아요순"}; |
There was a problem hiding this comment.
좋네요!
상수는 컴포넌트 외부에서 선언해주시는게 깔끔하거든요
| interface ArticlesProps { | ||
| id: number; | ||
| title: string; | ||
| content: string; | ||
| image: string | null; | ||
| likeCount: number; | ||
| createdAt: string; | ||
| updatedAt: string; | ||
| writer: { | ||
| id: number; | ||
| title: string; | ||
| content: string; | ||
| image: File | null; | ||
| likeCount: number; | ||
| createAt: Date; | ||
| updateAt: Date; | ||
| writer: { | ||
| id: number; | ||
| nickname: string; | ||
| }; | ||
| } | ||
|
|
||
| nickname: string; | ||
| }; | ||
| } | ||
|
|
||
| function BestArticles(articlesList: ArticlesProps[]) { |
There was a problem hiding this comment.
타입 정의하는걸 조금 개선하면 어떨까요?
props로 전달받는걸 item 으로 받고싶다면 Props의 interface에 item 을 넣어주는게 좀더 좋을것같아요!
이름이 정확한 의미를 담고있는게 좋거든요...ㅠ
ArticlesProps 에 각 타입에 대한 정보를 넣는게 아니라 분리시켜주는거죠!
type Article = {
...
}
interface ArticlesProps {
item: Article;
}요런식으로 의미를 중첩해서 사용하는것보단 분리하는거에요 ㅎㅎ
| {item.image ? ( | ||
| <div className={style.articleImg}> | ||
| <Image src={item.image} alt="게시글 사진" fill /> | ||
| </div> | ||
| ) : ( | ||
| <div> | ||
| <input></input> | ||
| <Image | ||
| src={BlackImg} | ||
| alt="빈 이미지" | ||
| className={style.blankImage} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
이미지를 못가져왔을때의 처리인데, Image 에 onError 를 통해서 처리할 수 있어요!
https://nextjs.org/docs/pages/api-reference/components/image 여기에 props 보시면 될것같구,
간단한 예시는...
https://velog.io/@yung315/nextimage-Error-handling
이거 참고해보시면 좋을것같아요!
|
|
||
| <p>{item.writer.nickname}</p> | ||
| <Image src={favoriteIcon} alt="하트아이콘" width={16} height={16} /> | ||
| <p>{item.likeCount}</p> |
There was a problem hiding this comment.
사소한거긴 한데, 숫자를 화면에 표시할떄 .toLocaleString() 을 해주는 습관을 들이시면 좋아요...!
완성도를 올리기 위해서.ㅎㅎ
| interface ArticlesProps { | ||
| id: number; | ||
| title: string; | ||
| content: string; | ||
| image: string | null; | ||
| likeCount: number; | ||
| createdAt: string; | ||
| updatedAt: string; | ||
| writer: { | ||
| id: number; | ||
| nickname: string; | ||
| }; | ||
| } | ||
|
|
||
| function Article({ item }: {item : ArticlesProps }) { |
There was a problem hiding this comment.
여기도 마찬가지일것같구요...
아까 타입을 잘 나눠두었으면 type ArticleType 을 export 해서 재활용 할 수 있을것같아요!ㅎㅎ
| ) | ||
| } | ||
|
|
||
| export default Recentarticles; |
There was a problem hiding this comment.
endline 을 추가해주면 좋을것같아요...!
There was a problem hiding this comment.
맞습니다 아직 습관화가 덜 됬네요ㅠㅠㅠㅠ
There was a problem hiding this comment.
굳굳...! 잘 만드셨네욬ㅋㅋ 이런거 잘 만들어두면 유용하게 쓸 수 있어서 좋아요!
There was a problem hiding this comment.
멘토님이 전에 해주신걸 활용했습니다ㅎㅎ
| interface ArticlesProps { | ||
| id: number; | ||
| title: string; | ||
| content: string; | ||
| image: File | null; | ||
| image: string | null; | ||
| likeCount: number; | ||
| createAt: Date; | ||
| updateAt: Date; | ||
| createdAt: string; | ||
| updatedAt: string; | ||
| writer: { | ||
| id: number; | ||
| nickname: string; |
There was a problem hiding this comment.
이것도 기존 타입 정의해둔걸 활용할 수 있겠네요!
곳곳에서 사용되는데, 아에 types 폴더를 만들고 ArticleType.ts 파일에 정의하는게 낫겠는데요...?ㅎㅎ
| }; | ||
| const { mode } = useDevice(); | ||
| const bestCount = useMemo<number>(() => { |
There was a problem hiding this comment.
오... 메모 활용 잘 하셨네욯ㅎ 의존성으로 mode까지 잘 넣어주신것같습니다~!
요구사항
기본
심화
주요 변경사항
-9 미션을 완료했습니다.
스크린샷
멘토에게