Conversation
| export interface CommentItemProps { | ||
| item:Comment; | ||
| } | ||
|
|
||
| const CommentItem: React.FC<CommentItemProps> = ({ item }) => { |
There was a problem hiding this comment.
P3:
item으로 묶어 전달 받기보다 content, writer, createdAt로 분해해 받는 게 더 좋아보여요~
item 객체로 받으면 꼭 다른 값도 받기위해서 묶어서 받는 것처럼 보이니, 필요한 값만 전달 받으시면 더 좋을 것 같아요
| list: Comment[]; | ||
| } | ||
|
|
||
| export default function Comment() { |
There was a problem hiding this comment.
P3:
코멘트 다는 부분과 코멘트 리스트를 분리하면 더 좋을 것 같아요. 로직들이 섞여 있어서 파악하기가 좀 어렵네요.
| const [value, setValue] = useState(""); | ||
| const [isValid, setIsValid] = useState(false); | ||
| const router = useRouter(); | ||
| const id = router.query['id']; |
There was a problem hiding this comment.
P2:
next에서 query 객체를 통해 데이터를 불러올 경우 아래 글을 참고해서 코드를 수정해주셔야 에러가 나지 않습니다.
https://velog.io/@jiwonyyy/NextJs-router.query%EA%B0%80-undefined%EC%9D%BC-%EB%95%8C
| if (!item) { | ||
| return ; | ||
| } |
There was a problem hiding this comment.
P2:
item이 없을때 null을 반환하면 해당 컴포넌트가 공간을 차지하지 않게 되어서
가능하면 데이터가 없는 빈 컴포넌트가 렌더링될 수 있게 item에 default value로 빈 객체, 혹은 적절한 값을 넘겨주시는 것을 추천드립니다.
| export default function Article() { | ||
| const router = useRouter(); | ||
| const id = router.query['id']; | ||
| const [item, setItem] = useState<Article | undefined>(undefined); |
There was a problem hiding this comment.
P3:
undefined는 명시해주지 않으셔도 됩니다.
| const [item, setItem] = useState<Article | undefined>(undefined); | |
| const [item, setItem] = useState<Article>(); |
| params: { | ||
| limit: params.limit, | ||
| cursor: params.cursor | ||
| } |
There was a problem hiding this comment.
P3:
키값이 같기 때문에 아래처럼 하셔도 됩니다.
| params: { | |
| limit: params.limit, | |
| cursor: params.cursor | |
| } | |
| params |
|
|
||
| export async function getArticleComment(articleId: number, params = { limit: 10, cursor: 0 }) { | ||
| try { | ||
| const response = await axios.get<CommentList>(`${BASE_URL}/articles/${articleId}/comments`, { |
| export async function getArticles(params = {}) { | ||
| const allowedParams = ["orderBy", "pageSize", "page", "keyword"]; | ||
| const invalidParams = Object.keys(params) | ||
| .filter(key => !allowedParams.includes(key)); |
There was a problem hiding this comment.
P1:
params 타입을 명시해주시면 좋을 것 같아요~ 그렇게 해주시면 아래에 어떤 값들이 param에 들어왔는지 확인하는 로직이 없어도 될 것 같습니다~
| <AS.InputLabel>이미지</AS.InputLabel> | ||
| <AS.ImgBox> | ||
| <AS.CustomButton onClick={() => {inputRef.current?.click();}}> | ||
| <AS.ContentInput |
There was a problem hiding this comment.
P2:
file input의 경우 대부분 정해진 확장자의 파일만을 받게 되는데 이를 위해 input의 accept 속성을 통해 원하는 확장자를 제안하고
파일이 들어오면 handleImageChange 같은 함수에서 해당 파일의 확장자를 확인하는 로직이 필요합니다~
나중에 시간이 되실때 추가해보세요
https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file
요구사항
기본
심화
멘토에게