Conversation
There was a problem hiding this comment.
수영님 이번 스프린트 미션 고생하셨습니다~
멘토링때 폴더 구조에 대해 고민하고 계시다고 하셔서 첨언을 드리자면
next 에서 정한 룰 이외에는 선택하기 나름이라 생각해 명확한 답변이 어렵네요 🥹
중요한 것은 왜 그렇게 구조를 정했는지 기준이 명확한 것이라고 생각하는데요~
stackOverflow에서 여러 사람의 의견을 볼 수 있어 링크를 남겨드립니다.
각자의 주장, 의견을 보시고 합당하다고 생각되는 구조를 고르시면 좋을 것 같습니다~
https://stackoverflow.com/questions/76214501/nextjs-13-folder-structure-best-practice
| <Layout> | ||
| <Component {...pageProps} /> | ||
| </Layout> | ||
| <style jsx global> |
There was a problem hiding this comment.
P2:
reset css 관련된 것을 이렇게 적용해주신 것 같은데 reset.css 파일을 만드셔서
여기서 import 하시는게 더 가독성 측면에서 좋을 것 같아요~
https://nextjs.org/docs/pages/building-your-application/styling#global-styles
| <BS.DropdownButtonContainer> | ||
| <BS.DropdownButton onClick={toggleDropdown}> | ||
| {order === 'recent' ? '최신순' : '좋아요순'} <BS.DropdownArrow>▾</BS.DropdownArrow> | ||
| </BS.DropdownButton> | ||
| <BS.DropdownMenu $isOpen={isDropdownOpen}> | ||
| <BS.DropdownOption onClick={handleNewestClick}>최신순</BS.DropdownOption> | ||
| <BS.DropdownOption onClick={handleLikeClick}>좋아요순</BS.DropdownOption> | ||
| </BS.DropdownMenu> | ||
| </BS.DropdownButtonContainer> |
There was a problem hiding this comment.
P3:
드롭다운은 따로 컴포넌트로 분리하면 더 좋을 것 같아요~
관련 로직들도 많아서 분리하면 가독성이 더 좋아질 것 같습니다
| const articles = await getArticles({ orderBy: order, pageSize: 1, keyword:search}); | ||
| const totalCount = articles.totalCount; |
There was a problem hiding this comment.
P2:
totalCount가 필요한 이유가 무엇일까요?
article을 전부 가지고 올 이유가 없는 걸로 알아서요~ 만약 sort를 위해서라면 orderBy를 통해서 해결하시는 것을 추천드립니다~
|
|
||
| export default function PostList() { | ||
| const [itemList, setItemList] = useState<ItemList>({ totalCount: 0, list: [] }); | ||
| const [pageSize, setPageSize] = useState(4); |
There was a problem hiding this comment.
P2:
pageSize는 number보다는 더 좁은 타입인 1 | 2 | 3이라고 말할 수 있습니다.
이 경우에는 타입을 좁힐 필요가 크게 없지만 일반적으로는 타입은 좁힐 수 있다면 좁히는 것이 좋습니다.
enum PAGE_SIZE_BY_SCREEN {
PC = 4,
TABLET = 2,
MOBILE = 1,
}
const getPageSize = (width: number): PAGE_SIZE_BY_SCREEN => {
if (width < 768) return PAGE_SIZE_BY_SCREEN.MOBILE;
if (width < 1200) return PAGE_SIZE_BY_SCREEN.TABLET;
return PAGE_SIZE_BY_SCREEN.PC;
};
const [pageSize, setPageSize] = useState<PAGE_SIZE_BY_SCREEN>();위의 예시처럼 enum으로 어떤 경우 4이 되는지를 명시해주셔도 좋습니다.
이렇게 하시면 코드의 의도가 더 명확해집니다.
요구사항
기본
심화