-
Notifications
You must be signed in to change notification settings - Fork 35
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 #285
The head ref may contain hidden characters: "Next-\uB098\uC724\uC8FC-sprint9"
[나윤주] Sprint9 #285
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.
고생하셨습니다 윤주님!
이번 한 주도 화이팅합시다 :)
} | ||
|
||
useEffect(() => { | ||
const fetchArticles = async () => { |
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.
try catch 문으로 감싸져있다면 조금 더 좋았을 것 같네요 👍
font-weight: 600; | ||
color: var(--gray900); | ||
margin-bottom: 24px; | ||
@media (max-width: 767px) { |
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.
scss mixin 이라는 문법을 통해서 @media (max-width: 767px) {} 부분을 함수화시킬 수 있어요 :)
if (newPageSize !== pageSize) { | ||
setPageSize(newPageSize); | ||
|
||
const fetchBestArticles = async (size: number) => { |
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.
요 함수가 useEffect 외부에 위치하는 것이 가독성 측에서 더 좋을 것 같아요!
const handleSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
e.preventDefault(); | ||
if (!keyword) { | ||
return router.push("/boards"); |
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.
push() vs replace() 둘 모두 알고 계시면 더 좋습니다 👍
router가 이동하면서 history를 남기느냐 남기지 않느냐 차이가 있습니다 :)
}, [router.query.q]); | ||
|
||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
setKeyword(e.target.value); |
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.
키보드가 입력될때마다 state값이 변경되는데 debounce를 적용하면 마지막 액션만 판단하여 state를 변경할 수 있습니다!
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.
키보드가 입력될때마다 state값이 변경되는데 debounce를 적용하면 마지막 액션만 판단하여 state를 변경할 수 있습니다!
정확하게 어떻게 변경해야는지 모르겠습니다.
page = false, | ||
children, | ||
}: ContainerProps) { | ||
const classNames = `${styles.container} ${ |
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.
classnames라는 라이브러리를 사용하면 이렇게도 짜볼 수 있겠네요!
import classNames from "classnames";
const containerClass = classNames(
styles.container,
{
[styles.page]: page,
},
className
);
return <div className={containerClass}>{children}</div>;
className={`${styles["dropdown-menu"]} ${menuOpen ? styles.open : ""}`} | ||
> | ||
{sortOptions.map((option) => ( | ||
<li key={option.value}> |
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.
react가 key props를 쓰는 이유는 ?! ㅎㅎ
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.
react가 key props를 쓰는 이유는 ?!
각 요소를 식별하고 효율적으로 업데이트할 수 있도록 해줍니다.
|
||
return ( | ||
<Link href={href} legacyBehavior> | ||
<a className={linkClass} {...props} aria-disabled={disabled}> |
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.
disabled가 true라면 onclick도 막아줘야할 것 같은데 고건 여기서 처리해야 하지 않을까요!?
const handleWindowResize = () => setWidth(window.innerWidth); | ||
handleWindowResize(); | ||
window.addEventListener("resize", handleWindowResize); | ||
return () => window.removeEventListener("resize", handleWindowResize); |
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.
오 clean up 함수 사용 좋아요!
|
||
useEffect(() => { | ||
const handleWindowResize = () => setWidth(window.innerWidth); | ||
handleWindowResize(); |
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.
아래에서 resize 이벤트 핸들러로 handleWindowResize()를 계속 감지하는대로 실행할 것이기 때문에 요 부분에는 함수 호출이 불필요할 수 있겠다 라는 생각이 드네요!
스프린트 9미션
요구사항
체크리스트 [기본]
심화
스크린샷
멘토에게