-
Notifications
You must be signed in to change notification settings - Fork 79
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
[신승헌] sprint10 #632
The head ref may contain hidden characters: "Next.js-\uC2E0\uC2B9\uD5CC-sprint10"
[신승헌] sprint10 #632
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.
👍👍👍👍
커밋 정말 잘 나누셨습니다!
좋아요!! 잘하셨습니다~!! 앞으로도 계속 이렇게만 해주시면 좋을것 같습니다 ㅎ
고생 많이하셨습니다!
async function getArticlesByPageNum() { | ||
try { | ||
const { data } = await axios.get(pathName); | ||
setArticles(data.list); |
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.
만약 모종의 이유로 api에서 에러가 발생한다면 data 는 'undefined'가 될거에요
data.list 대신 data?.list 로 바꾸는게 좋을것 같아요 !
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.
안그러면 런타임에서 해당 api가 에러를 throw할 경우 앱 자체가 뻗어버릴거에요..!
const { data: articles } = await instance.get( | ||
`/articles?page=1&pageSize=10&orderBy=recent` | ||
const { data } = await instance.get( | ||
`/articles?page=${INITIAL_PAGE_NUM}&pageSize=${INITIAL_PAGE_SIZE}&orderBy=${INITIAL_ORDER}` | ||
); |
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.
axios를 사용하신다면
const { data } = await instance.get('/articles', { params: {
page: INITIAL_PAGE_NUM,
pageSize: INITIAL_PAGE_SIZE,
orderBy: INITIAL_ORDER
}
});
와 같이 searchParam들을 객체로 관리할 수 있습니다 ㅎ
); | ||
const articles: Article[] = data.list; |
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.
요기도 굳이 재할당 할 필요없이
return {
props: {
articles: data?.list,
},
};
와 같이...!
추가로 aixos의 반환값중 하나인 data
는 언제나 성공 시에는 API 응답 데이터가, 실패 시에는 undefined가 올수 있다는점 꼭 명심해두세요!
<h2 className="text-xl font-bold">게시글 작성</h2> | ||
<button className="w-20 h-10 flex justify-center items-center bg-gray-default rounded-button text-white"> | ||
등록 | ||
</button> |
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.
등록버튼은
태그 안으로 들어와야 sementic적읋 맞을것 같구요!button의 타입은 submit이어야 할 것 같습니다 !
components/Boards/NewArticleForm.tsx
Outdated
|
||
const handleSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
e.preventDefault(); | ||
// TODO 테스트용, 삭제예정 |
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.
👍👍👍👍
pages/boards/[id].tsx
Outdated
export default function Article() { | ||
return ( | ||
<> | ||
<div>hi</div> |
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.
주석 남기기...!
pages/boards/[id].tsx
Outdated
const id = context.query.id; | ||
|
||
const res = await instance.get(`/articles/${id}`); | ||
const article = res.data ?? []; |
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.
이렇게 처리하는것도 나쁘지 않습니다 ㅎ
<hr className="h-[1px] bg-gray-200" /> | ||
</div> | ||
); | ||
})} |
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.
{ comments?.map((comment) => (
<div className="flex flex-col gap-6 mb-6" key={comment.id}>
<div>{comment.content}</div>
<div className="flex items-center gap-2">
<Image
src={ProfileDefault}
width={32}
height={32}
alt="댓글프로필이미지"
/>
<div>
<p className="text-gray-600">{comment.writer.nickname}</p>
<p className="text-gray-400">
{formatDate(comment.updatedAt)}
</p>
</div>
</div>
<hr className="h-[1px] bg-gray-200" />
</div>
);
)}
const articlesRes = await instance.get(`/articles/${id}`); | ||
const commentsRes = await instance.get( | ||
`/articles/${id}/comments?limit=${COMMENTS_MAX}` | ||
); |
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.
위와같이 async함수에 여러개의 await구문이 들어간다면 해당 함수는 await구문마다 해당 비동기 함수가 끝날때까지 기다리게 됩니다.
이는 async함수 전체의 waterfall을 초래하게 되는데요
이는 모든 await함수의 결과가 나와야 async함수가 끝나기 때문에 성능적으로 좋지 않습니다.
모든 비동기 함수가 병렬적으로 실행될 수 있게 하려면 Promise.all
을 활용해보시는걸 추천드립니다 ㅎ
Promise.all
Promise.allSettled
return `${passedHours}시간 전`; | ||
} else { | ||
return `${passedDays}일 전`; | ||
} |
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.
switch (true) {
case (passedSeconds < 60):
timeDescription = `${passedSeconds}초 전`;
break;
case (passedMinutes < 60):
timeDescription = `${passedMinutes}분 전`;
break;
case (passedHours < 24):
timeDescription = `${passedHours}시간 전`;
break;
default:
timeDescription = `${passedDays}일 전`;
}
이렇게 if else구문이 많아진다면 switch case구문을 활용해보세요!
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.
감사합니다!!! 😇
요구사항
체크리스트 [기본]
상품 등록 페이지
상품 상세 페이지
주요 변경사항
스크린샷
멘토에게