[김희진] sprint 9#78
Merged
kiJu2 merged 49 commits intocodeit-bootcamp-frontend:Next-김희진from Mar 11, 2025
Hidden character warning
The head ref may contain hidden characters: "Next-\uae40\ud76c\uc9c4-sprint1"
Merged
Conversation
Collaborator
|
스프리트 미션 하시느라 수고 많으셨어요. |
Collaborator
app router로 진행했습니다! 추후 loading 파일도 진행할 예정입니다오호 ~ App Router 좋지요 😊😊 |
kiJu2
approved these changes
Mar 11, 2025
Comment on lines
+13
to
+20
| const { initialAllData, initialBestData } = await getBoardsData(); | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-center my-10 lg:my-0"> | ||
| <div className="max-w-[1200px] min-w-[343px] px-6 lg:p-4 md:p-6 flex flex-col gap-10"> | ||
| <Best initialData={initialBestData} /> | ||
| <All initialData={initialAllData} /> | ||
| </div> |
Collaborator
There was a problem hiding this comment.
오호.. 초기 데이터를 받아와서 TTV를 빠르게 하셨군요 ..? 🫢🫢
훌륭합니다. ㄷㄷㄷ 첫 코드부터 기대되는데요 ?
TTV: 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
| export const revalidate = 60; | ||
|
|
||
| export default async function Boards() { | ||
| const { initialAllData, initialBestData } = await getBoardsData(); |
Collaborator
There was a problem hiding this comment.
각기 다른 예외 처리를 하기에 어려울 것 같아요.
서로 다른 쿼리로 통신 하고 있기에 다른 에러가 발생할 여지가 있으나(물론 해당 코드에는 예외처리가 없긴 하지만), 이렇게 처리하면 특정 API의 예외처리를 하기 어려울 것 같군요 !
Collaborator
There was a problem hiding this comment.
또한, 현재 직렬처리로 되어있는데 병렬로 처리하시면 성능에 도움이 됩니다 !
Suggested change
| const { initialAllData, initialBestData } = await getBoardsData(); | |
| const allData = await getBoards({ | |
| page: 1, | |
| pageSize: 10, | |
| orderBy: "recent", | |
| keyword: "", | |
| }); | |
| const bestData = await getBoards({ | |
| page: 1, | |
| pageSize: 3, | |
| orderBy: "like", | |
| keyword: "", | |
| }); | |
| // .......... | |
| const [ allData, bestData ] = await Promise.all([ | |
| getBoards({ | |
| page: 1, | |
| pageSize: 10, | |
| orderBy: "recent", | |
| keyword: "", | |
| }), | |
| getBoards({ | |
| page: 1, | |
| pageSize: 3, | |
| orderBy: "like", | |
| keyword: "", | |
| }) | |
| ]) |
| const [bestItems, setBestItems] = useState<BoardItem[]>(initialData); | ||
| const { showItems } = useResize(1, 2, 3); | ||
|
|
||
| const best = bestItems.slice(0, showItems); |
Collaborator
There was a problem hiding this comment.
(선택) useMemo를 사용해볼 수 있을 것 같아요:
Suggested change
| const best = bestItems.slice(0, showItems); | |
| const best = useMemo(() => bestItems.slice(0, showItems), [bestItems, showItems]); |
배열을 정렬하거나 슬라이스를 하는 것은 아이템 수에 따라 성능 차이가 있을 수 있기에 선택적으로 추천드립니다 ! 😊
Comment on lines
+4
to
+8
| export default function usePagination({ | ||
| totalBoards, | ||
| currentPage, | ||
| pageSize, | ||
| }: PagingProps) { |
Comment on lines
+11
to
+14
| const pageGroup = Math.ceil(currentPage / 5); | ||
| const totalPages = Math.ceil(totalBoards / pageSize); | ||
| const startPage = (pageGroup - 1) * 5 + 1; | ||
| const endPage = Math.min(startPage + 4, totalPages); |
Collaborator
There was a problem hiding this comment.
마법수가 많이 보이는 군요 !
Suggested change
| const pageGroup = Math.ceil(currentPage / 5); | |
| const totalPages = Math.ceil(totalBoards / pageSize); | |
| const startPage = (pageGroup - 1) * 5 + 1; | |
| const endPage = Math.min(startPage + 4, totalPages); | |
| const pageGroup = Math.ceil(currentPage / PAGE_GROUP_SIZE); | |
| const totalPages = Math.ceil(totalBoards / pageSize); | |
| const startPage = (pageGroup - 1) * PAGE_GROUP_SIZE + 1; | |
| const endPage = Math.min(startPage + PAGE_GROUP_SIZE - 1, totalPages); |
상수를 통하여 가독성을 향상시켜볼 수 있어요 !
마법 수(Magic Number): 매직 넘버(Magic number)는 코드에서 하드 코딩된(literal value) 일정한 값을 의미하는 숫자나 문자열 등을 의미합니다.
| @@ -0,0 +1,30 @@ | |||
| import { useRouter, useSearchParams } from "next/navigation"; | |||
|
|
|||
| export default function useParams() { | |||
Collaborator
There was a problem hiding this comment.
와우 ㄷㄷ.. 페이지네이션의 쿼리를 읽는 훅이군요? 좋은 아이디어로 보이네요:
Suggested change
| export default function useParams() { | |
| export default function usePaginamtionQueries() { |
조심스레 이름을 제안드려보고 싶어요 ! useParams는 목적이 범용적으로 보일 수 있을 것 같아서요 !
Collaborator
|
크으.. 너무 멋진데요 ? App router도 정복하셨군요? 훌륭합니다. 보면서 감탄했어요 굿굿 ! 👍👍 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게