-
Notifications
You must be signed in to change notification settings - Fork 37
[윤혜림] Sprint9 #309
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[윤혜림] Sprint9 #309
The head ref may contain hidden characters: "Next-\uC724\uD61C\uB9BC-sprint9"
Conversation
There was a problem hiding this 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 { |
There was a problem hiding this comment.
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); // 페이지 당 보여줄 데이터 개수 |
There was a problem hiding this comment.
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개 출력 |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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)} |
There was a problem hiding this comment.
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>({ |
There was a problem hiding this comment.
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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
example.com은 실제 데이터를 받아오지못하는 더미데이터일것으로 보이고,
aws에 대한 이미지 주소는 적절해 보이네요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
로그인, 회원가입에 필요한 form 로직을 react-hook-form 적용해 보시는 것 추천드려요.
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 regex가 어떤 정규표현식인지 변수이름을 잘 지어주면 좋을 것 같아요.
예시로 specialCharRegex
, validateSpecialChars
가 있을 것 같아요. 그러면 아래에 적어준 주석을 제거해도 코드 이해하기 쉬울거에요.
요구사항
주요 변경사항
멘토에게