Skip to content

Conversation

y5037
Copy link
Collaborator

@y5037 y5037 commented Jan 21, 2025

요구사항

기본

  • 자유 게시판 페이지 주소는 “/boards” 입니다.
  • 전체 게시글에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
  • 게시글 목록 조회 api를 사용하여 베스트 게시글, 게시글을 구현합니다.
  • 게시글 title에 검색어가 일부 포함되면 검색이 됩니다.

심화

  • 반응형으로 보여지는 베스트 게시판 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
  • next의 data prefetch 기능을 사용해봅니다.

주요 변경사항

  • Vite -> Next 마이그레이션

멘토에게

y5037 added 28 commits January 17, 2025 13:45
@y5037 y5037 requested a review from withyj-codeit January 21, 2025 14:49
@y5037 y5037 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 21, 2025
Copy link
Contributor

@withyj-codeit withyj-codeit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스프린트 미션하느라 수고 많으셨어요~👏🏻
useQueryBoard 부분은
useQuery 훅을 만들고, useQueryBoard 훅에서는 useQuery를 활용해 board에 필요한 데이터를 요청하는 형식으로 만들어주는게 좋을 것 같아요. 지난주 멘토링 예시 코드도 공유드리도록 할게요.

@@ -0,0 +1,35 @@
import { StaticImport, StaticRequire } from "next/dist/shared/lib/get-img-props";

export interface ProductDataProps {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

items에 정의된 타입이랑 다른 건가요?(링크) 다르게 유지해야 할 필요가 있는게 아니라 동일한 api 데이터 받는 거라면 하나를 보도록 하는게 좋을 것 같아요.

pageCount,
isDataCount,
}: Pagination) {
const itemCountPerPage = Math.ceil(pageCount / isDataCount); // 페이지 당 보여줄 데이터 개수
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isDataCount는 boolean 값으로 보이는데 나누기 연산을 해서 property 이름을 바꾸거나 number로 형변환하고 나누기 연산하는게 안전할 것 같아요.

isDataCount,
}: Pagination) {
const itemCountPerPage = Math.ceil(pageCount / isDataCount); // 페이지 당 보여줄 데이터 개수
const ITEMS_PER_PAGINATION = 5; // 한 페이지당 pagination 5개 출력
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변수명 만으로도 의미를 충분히 알 수 있어서 주석은 불필요해 보여요.

page,
pageCount,
isDataCount,
ITEMS_PER_PAGINATION: itemsPerPagination,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

파라미터로 넘겨주는 값은 대문자_대문자_대문자 로 사용하지 않도록 수정이 필요해요.
ITEMS_PER_PAGINATION -> itemsPerPagination

{currentSet > 1 && (
<li
className={`${styles.move} ${noPrev && styles.invisible}`}
onClick={() => setPage(1)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이전페이지를 누르면 1페이지로 이동하는건가요?

loading: boolean;
};

export const useQueryBoard = <T>({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이름은 useQueryBoard인데, Board에 대한 query만 수행하는 건 아닌 걸로 보여서
useQuery 같은 일반적인 이름이 더 적절해 보여요.

}
images: {
domains: [
"example.com",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

example.com은 실제 데이터를 받아오지못하는 더미데이터일것으로 보이고,
aws에 대한 이미지 주소는 적절해 보이네요.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인, 회원가입에 필요한 form 로직을 react-hook-form 적용해 보시는 것 추천드려요.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

특정 컴포넌트에서만 사용하는 타입들은 해당하는 컴포넌트에서 정의하시는게 좋아요.


// onKeyDown 이벤트 키가 Enter와 일치하면 실행
const activeEnter = (e: KeyboardEvent<HTMLInputElement>) => {
const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\+<>@\#$%&\'\"\\\(\=]/gi;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 regex가 어떤 정규표현식인지 변수이름을 잘 지어주면 좋을 것 같아요.
예시로 specialCharRegex, validateSpecialChars 가 있을 것 같아요. 그러면 아래에 적어준 주석을 제거해도 코드 이해하기 쉬울거에요.

@withyj-codeit withyj-codeit merged commit 1ac41b7 into codeit-bootcamp-frontend:Next-윤혜림 Jan 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

순한맛🐑 마음이 많이 여립니다..

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants