Conversation
드롭다운 버튼을 누르면 버튼 밑에 [최신순, 좋아요순] 메뉴가 활성화되고 각 버튼을 누를 시 게시글이 최신순, 좋아요순으로 정렬
검색기능, (최신순, 좋아요순) 정렬기능, additem 페이지 이동 기능
export default function BestArticleSection({ bestArticles }: any) {
return (...와 같이 선언과 반환 사이에 아무런 로직이 들어있지 않은 컴포넌트들은 한번쯤 고민해보실 필요가 있을것 같아요 컴포넌트를 나누는 이유에는 여러 이유가 있을 수 있습니다. 만약 스스로 생각했을때 명확한 이유가 딱히 보이지 않는다면, |
| allArticles, | ||
| onSortSelection, | ||
| onInputChange, | ||
| }: any) { |
There was a problem hiding this comment.
충분히 타입을 지정할 수 있는 부분같아요!
any 타입사용은 최대한 지양해주세요!
| /> | ||
| </div> | ||
| ) : ( | ||
| <div></div> |
There was a problem hiding this comment.
그냥 null 하면 안되나요? 빈 div를 두는건 아닌것 같네요 ㅎ
There was a problem hiding this comment.
넵! 수정하도록 하겠습니다!
There was a problem hiding this comment.
이거 검색 입력한것에 대한 처리부분은 어디로 가있나요? Form으로 끝나는 컴포넌트라면 비즈니스 로직은 외부에서 props로 받더라도 검색하기 버튼 정도는 이 컴포넌트에 있어야 할 것 같네요 😅
There was a problem hiding this comment.
이 컴포넌트는 설계가 잘못된것 같아요 onChange onSubmit 모두 해당 컴포넌트 내부에서 다루는 특별한 로직이 없네요
SearchForm이라고 컴포넌트 이름을 지었다면 Ui만 가지고 있어야 하는게 아니라 Form에 대한 전반적인 비즈니스 로직도 포함시켜야 할 것 같습니다 ㅎ
There was a problem hiding this comment.
이 컴포넌트는 단순히 Props를 받고 tsx를 반환할 뿐인것 같은데 굳이 컴포넌트로 쪼갠 이유가 궁금하네요 ㅎ
컴포넌트 내부가 어떠한 로직도 가지고 있지 않다면 굳이 컴포넌트로 나눠야할지 고민하는게 필요할것 같아요
이렇게 해봤자 불필요하게 파일만 늘리는 것 말고 어떠한 의미가 있는지에 대해 ㅎ
There was a problem hiding this comment.
나름 깔끔하게 보일려고 분리를 해봤는데 오히려 더 불편했던 것 같습니다.
멘토님 말씀대로 의미없는 컴포넌트 분리하지 않도록 주의하겠습니다!
| </button> | ||
| </li> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
{tags.map((item, idx) => {
return (
<li key={idx}>
{item}
<button onClick={() => handleDeleteTag(item)}>
<Image src={Close} alt="닫기" />
</button>
</li>
);
})}이렇게 map의 두번째 파라미터로 인덱스를 가지고있습니다 !
| export async function getServerSideProps() { | ||
| const besrtArticleResponse = await axios.get( | ||
| "articles/?pageSize=3&orderBy=like" | ||
| ); |
There was a problem hiding this comment.
const besrtArticleResponse = await axios.get("articles", {
params: {
pageSize: 3,
orderBy:"like"
}
});axios를 사용하면 이렇게 searchParam등을 객체로 관리할 수 있어요!
There was a problem hiding this comment.
넵! 코드에 적용시켜 보겠습니다!
| const besrtArticleResponse = await axios.get( | ||
| "articles/?pageSize=3&orderBy=like" | ||
| ); | ||
| const allArticleResponse = await axios.get("articles/?orderBy=like"); |
There was a problem hiding this comment.
그리고 "articles/?orderBy=like" => "articles?orderBy=like" 이렇게..!
| import Back from "@/assets/images/icons/ic_back.svg"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| export async function getServerSideProps(context: any) { |
There was a problem hiding this comment.
이것도 any타입 말고 타입 충분히 지정해줄 수 있어요!!!
any타입을 사용하는 부분이 있을때마다 타입 추론이 무너져서 타입스크립트를 사용하는 의미가 점점 사라집니다!
| const productResponse = await axios.get(`/products/${productId}`); | ||
| const commentsResponse = await axios.get( | ||
| `/products/${productId}/comments?limit=3` | ||
| ); |
There was a problem hiding this comment.
위와같이 async함수에 여러개의 await구문이 들어간다면 해당 함수는 await구문마다 해당 비동기 함수가 끝날때까지 기다리게 됩니다.
이는 async함수 전체의 waterfall을 초래하게 되는데요
이는 모든 await함수의 결과가 나와야 async함수가 끝나기 때문에 성능적으로 좋지 않습니다.
모든 비동기 함수가 병렬적으로 실행될 수 있게 하려면 Promise.all을 활용해보시는걸 추천드립니다 ㅎ
Promise.all
Promise.allSettled
There was a problem hiding this comment.
넵! 코드에 활용해보겠습니다!!
기본
심화
주요 변경사항
멘토에게