Conversation
There was a problem hiding this comment.
useEffect(() => {}, []) 에서 window.innerSize를 감지하는 것 너무 좋습니다!
prefetch는 필요한 곳에 Next/Link 태그만 사용해주셔도 됩니다 :)
https://medium.com/hcleedev/web-next-js-link%EC%99%80-prefetch-%EA%B3%BC%EC%A0%95-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EA%B8%B0-44e22ace13e7
타입도 types라는 폴더에 용도에 맞게 파일을 만들어주고 export 해보세요!
정현님 이번 미션도 너무 고생하셨습니다!
이번 한 주도 화이팅이에요 :)
| } | ||
|
|
||
| export default function LinkButton({ | ||
| href, |
There was a problem hiding this comment.
이런 props들의 기본 값을 설정해주면 동작을 명확히 하는데 도움을 줄거에요!
| return ( | ||
| <> | ||
| <button | ||
| className={`${styles.button} ${className}`} |
There was a problem hiding this comment.
classname을 부여하는데 조건식이 필요하다면 classnames라는 라이브러리를 사용해보세요! 아주 편하고 좋습니다 ㅎㅎ
| } | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
이 빈 태그는 불필요해보이는데 제거해도 좋을 것 같아요!
| import NAVIGATION_LIST from '@/utils/NAVIGATION_LIST'; | ||
| import styles from './Header.module.css'; | ||
|
|
||
| const navList = NAVIGATION_LIST.map(list => ( |
There was a problem hiding this comment.
이 부분을 컴포넌트로 분리하면 좋을 것 같네요!
| mobile: 768, | ||
| }; | ||
|
|
||
| function getBestPostSize() { |
There was a problem hiding this comment.
window객체를 참조하는 함수가 컴포넌트 외부에 위치해서 오류가 발생할 수 있어요. 컴포넌트 내부로 이동하는 것이 좋을 것 같아요 👍
| import usePostList from '@/hooks/usePostList'; | ||
|
|
||
| interface OptionType { | ||
| orderBy: string | string[] | undefined; |
There was a problem hiding this comment.
interface OptionType {
orderBy: 'recent' | 'like';
keyword?: string;
}처럼 string이 특정 값만 가질 수 있도록 제한하는 타입으로 정의하는 것이 가장 좋은 방법이에요! (제한할 수 있다면)
| keyword: options.keyword, | ||
| }; | ||
| getPost({ query }); | ||
| }, [options]); |
There was a problem hiding this comment.
options자체를 의존성배열에 적어주는 것보다는 options.orderBy, options.keyword를 직접 포함시켜서 불필요하게 실행되는 경우를 방지해주는 것이 좋습니다 :)
| }, [options]); | ||
|
|
||
| const showSortOptionHandler = () => { | ||
| setIsSortOpen(prev => !prev); |
There was a problem hiding this comment.
prev로 이전 값을 통한 업데이트 너무 좋습니다!
요구사항
기본
심화
주요 변경사항
그래서 아직 기능적인 부분이 덜 완성되었습니당 (정렬, 검색 까지 완료했습니다!)
스크린샷
멘토에게
시도 해봤는데 pages폴더 안에 있는 컴포넌트에서만 된다는 블로그 글을 보았습니다. 저는 따로 BestPost와 Posts 컴포넌트에서 fetch를 하고 boards 디렉토리에 index에서 두개의 컴포넌트(BestPost,Posts)를 불러오는 방식으로 되어 있는데 이러면 prefetch 기능을 사용하려면 boards디렉토리의 index에서 무조건 fetch를 해야하나용??