Conversation
| }; | ||
| } | ||
|
|
||
| const BestPostCard = ({ item }: { item: PostItem }) => { |
There was a problem hiding this comment.
PostCard의 item 타입을 잘 설정해주셨어요!
혹시 item이라는 객체를 추가하신 이유가 있을까요?? 아래에서는 안쓰이는것 같아서요!
이렇게 사용되지 않으면 보통은 굳이 아래에서 구조분해할당 할 필요없이 props에서 부터 분해해준답니다!
const BestPostCard = ({
content,
image,
likeCount,
createdAt,
writer: { nickname }
}: PostCardProps ) => {이렇게요.
그리고 보통 type이름도 Props라는것을 명시해주는 편입니다! 만약 위 타입이 다른곳에서 쓰이지않는다면요
| const formatDate = (dateString: string) => { | ||
| const dateObj = new Date(dateString); | ||
| const year = dateObj.getFullYear(); | ||
| const month = String(dateObj.getMonth() + 1).padStart(2, "0"); | ||
| const day = String(dateObj.getDate()).padStart(2, "0"); | ||
| return `${year}.${month}.${day}`; | ||
| }; |
| const PostDetailSection = ({ item }: { item: PostItem }) => { | ||
| const { | ||
| content, | ||
| image, |
| const [title, setTitle] = useState(""); | ||
| const [content, setContent] = useState(""); | ||
| const [ImageFile, setProductImageFile] = useState<File | null>(null); | ||
| const [filePreview, setFilePreview] = useState<string | null>(null); |
There was a problem hiding this comment.
타입스크립트를 사용하여 state 초기값과 type 을 잘 설정해주셨어요!👍
| e: | ||
| | React.ChangeEvent<HTMLInputElement> | ||
| | React.ChangeEvent<HTMLTextAreaElement>, |
There was a problem hiding this comment.
| e: | |
| | React.ChangeEvent<HTMLInputElement> | |
| | React.ChangeEvent<HTMLTextAreaElement>, | |
| e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, |
이렇게 합칠 수 있을 것 같아요!
| keyWord, | ||
| }: QueryParams) => { | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/articles?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}${ |
There was a problem hiding this comment.
https://panda-market-api.vercel.app/articles가 중복되고 있죠?! 이부분도 상수로 뺄 수 있을 것 같아요
| const body = await response.json(); | ||
| return body; |
There was a problem hiding this comment.
body를 사용하거나 변환할 것이 아니면
| const body = await response.json(); | |
| return body; | |
| return await response.json(); |
바로 리턴해줘도 좋을 것 같습니다~
| export const getPostComment = async (id: number) => { | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/articles/${id}/comments?limit=3` | ||
| ); | ||
| const body = await response.json(); | ||
| return body; | ||
| }; |
There was a problem hiding this comment.
현재 아쉬운 부분은 에러처리가 전혀 없다는 것이에요.
물론 다른부분에서 에러가 나겠지만, 이 api가 문제다! 라는 게 없어서 디버깅하기가 어려울 것 같아요!
| `https://panda-market-api.vercel.app/articles/${id}` | ||
| ); | ||
| const body = await response.json(); | ||
| return body; |
There was a problem hiding this comment.
현재 body의 type을 보면 any로 되어있어요. 이건 서버에서 어떤값을 모르니 어쩔수 없이 타입스크립트가 이렇게 any로 해두는 거랍니다.
그래서 보통 type safe하게 하기 위해서 여기에 억지로 type을 넣어준답니다.
dto 혹은 schema interface 라고 하는데 이 부분은 조금 찾아보시면 좋을 것 같아요!
| console.log(detailPost); | ||
| }, [id]); | ||
| return ( | ||
| <> |
요구사항
기본
심화
주요 변경사항
멘토에게