Conversation
| height: 42px; | ||
| border-radius: 8px; | ||
| background-color: #3692ff; | ||
| font-family: Pretendard; |
There was a problem hiding this comment.
해당 버튼에만 Pretendard가 적용되어야 하나요?
그런게 아니라면 font는 최상위 node에서 사용하는게 좋을것 같습니다 ㅎ
components/BlueButton.tsx
Outdated
| @@ -0,0 +1,5 @@ | |||
| import styles from "@/components/BlueButton.module.css"; | |||
|
|
|||
| export default function BlueButton({ children }) { | |||
There was a problem hiding this comment.
export const BlueButton:React.FC<PropsWithChildren> = ({ children }) => {이렇게하면 타입을 지정할 수 있어요
| @@ -22,6 +22,7 @@ const SearchForm: React.FC<SearchFormProps> = ({ | |||
|
|
|||
| if (!value) { | |||
| router.push("/boards"); | |||
| onChangeKeyword(" "); | |||
There was a problem hiding this comment.
empty string이 아니라 공백으로 처리하는게 맞나요?
| @@ -1,5 +1,9 @@ | |||
| import styles from "@/components/BlueButton.module.css"; | |||
|
|
|||
| export default function BlueButton({ children }) { | |||
| return <div className={styles.write}>{children}</div>; | |||
| export default function BlueButton({ type = "", children }) { | |||
There was a problem hiding this comment.
타입스크립트를 사용한다면 타입을 꼭 지정해주세요!
| <CommentItem comments={comments} /> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
export function CommentList({ comments = [] }) {
return (...와 같이 선언과 반환 사이에 아무런 로직이 들어있지 않은 컴포넌트들은 한번쯤 고민해보실 필요가 있을것 같아요
이런 컴포넌트는 어떤 역할을 할까요?
단순히 코드 나누기 그 이상의 역할이 있을까요?
오히려 의미없이 많아진 컴포넌트들 덕분에 가독성이 떨어지진 않을까요?
등등에 대해 한번 고민해보시면 좋을것 같습니다.
컴포넌트를 나누는 이유에는 여러 이유가 있을 수 있습니다.
UI로 나눌수도 있고, 비즈니스 로직으로 나눌 수도 있지만 언제나 그 이유는 명확해야 합니다.
가령 UI를 기준으로 컴포넌트를 나눈다면 해당 컴포넌트는 UI를 처리하는 로직을 명확히 가지고 있어야합니다.
반대로 비즈니스 로직만을 위해 컴포넌트를 나누었다면 해당 컴포넌트도 어떠한 비즈니스 로직을 처리하겠다와 같은 명확한 이유를 가지고 있어야합니다
만약 스스로 생각했을때 명확한 이유가 딱히 보이지 않는다면,
해당 컴포넌트를 나누는 부분에 대해 한번더 생각해보는게 어떨까요? ㅎ
There was a problem hiding this comment.
그리고 따로 만든 컴포넌트들은 왠만하면 다른 파일로 구분해주시는게 좋을것 같네요 최대한 pages내부의 파일에는 해당 파일에 대한
export default만 존재하는게 더 좋을것 같아요 ㅎ 그 이유는 해당 파일이 단순히 파일의 역할만 하는게 아니라 next js 내부의 동적 라우팅을 담당하기 때문이에요 ㅎ
| } | ||
| async function getComments(articleId) { | ||
| if (!articleId) return; | ||
| const res = await axios.get(`/articles/${articleId}/comments?limit=5`); |
There was a problem hiding this comment.
const res = await axios.get(`/articles/${articleId}/comments`, params: {
limit: 5
});axios를 사용하신다면 위와같이 searchParam을 객체로 뺄 수 있어요 ㅎ
| async function getComments(articleId) { | ||
| if (!articleId) return; | ||
| const res = await axios.get(`/articles/${articleId}/comments?limit=5`); | ||
| const nextComments = res.data.list; |
There was a problem hiding this comment.
const nextComments = res.data.list;과 같이 axios결과값을 한번더 변수에 할당하는건 불필요해 보입니다 ㅎ
그리고 axios가 반환하는 data에는 비동기 함수의 결과값이 담기는데요,
서버 통신하는 비동기함수는 언제나 실패할 수 있다는 점을 염두해두어야합니다.
api가 만약 에러를 throw하면 res.data는 undefined가 되고 그러면 undefined.list 가 되어 런타임 에러가 발생할거에요
언제나 axios가 반환하는 data는 undefiend가 될 수 있다는 점을 꼭 주의해주세요!
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게