Conversation
- window width 값에 따라 media query를 통해 현제 device를 체크하는 커스텀 훅
- window is not defined error 해결 위해 window type 체크 추가
- 현재 device에 따라 파라미터로 전달한 pageSize값을 다시 return 해주는 커스텀 훅
- Article 타입의 updatedAt과 createdAt의 타입을 string으로 변경 - createDateStringWithDot 함수 생성
- useCurrentDevice hook을 이용해서 조건부 렌더링 했을때 해당 조건이 현재 window 상태와 일치하지 않으면 랜더링을 다르게 해서 생기는 에러여서 반응형으로 처리함
| @@ -0,0 +1,48 @@ | |||
| import instance from "./instance"; | |||
There was a problem hiding this comment.
instance 이름은 axiosInstance 같은 좀 더 구체적인 이름을 추천드릴게요. 나중에는 다른 instance가 생길 수도 있거든요!
| import useToggle from "@/hooks/useToggle"; | ||
| import Image from "next/image"; | ||
|
|
||
| type DropdownProps<T extends string> = { |
There was a problem hiding this comment.
export default function Dropdown<T extends string>({
itemDict,
currentItemValue,
onItemChange,
}: DropdownProps<T>) {
const [isOpen, toggleIsOpen] = useToggle();
const handleItemClick = (value: T) => {
onItemChange(value);
toggleIsOpen();
};
...컴포넌트 쪽에서 이런식으로 썼는데 이것도 문제 없을까요?
구글링 해서 찾아 쓰긴 한건데 왜 function Dropdown<T extends string> 형태로 컴포넌트 옆에도 다시 정의 해줘야하는지를 모르겠습니다.
그러니까 정확히는 props type에서 선언한 제네릭 T를 함수에서 받아서 사용할 수 없는걸까요?
| const router = useRouter(); | ||
| const path = router.pathname; |
There was a problem hiding this comment.
이 두 줄은 다음과 같이 요약할 수 있을 것 같습니다.
const { pathname } = useRouter();
| className="hidden md:block" | ||
| width={153} | ||
| height={51} | ||
| priority |
| import React, { useState } from "react"; | ||
|
|
||
| export interface SearchBarProps { | ||
| onKeywordChange: React.Dispatch<React.SetStateAction<string>>; |
There was a problem hiding this comment.
setState 함수를 바로 받아오는 것 보다 setState를 포함하고있는 () => void 타입의 함수를 받아오신다면 좀 더 유용하게 로직을 작성할 수 있게 됩니다.
| mobilePageSize: number, | ||
| tabletPageSize: number, | ||
| desktopPageSize: number |
There was a problem hiding this comment.
요런 경우에는 객체로 파라미터를 받아오게 하는 것도 추천드립니다. usePageSize(1, 2, 3) 이렇게 사용되면 어떤 파라미터가 어떤 역할인지 알기 어려울 것 같아서요!
|
|
||
| export default function PostList() { | ||
| const [articles, setArticles] = useState<Article[]>([]); | ||
| const [orderOption, setOrderOption] = useState<orderOption>("recent"); |
There was a problem hiding this comment.
orderOption 타입 이름이라면 파스칼 케이스로 사용하시는 것을 추천드립니다.
|
질문 남겨주신 부분은 멘토링 시간에 같이 보면 좋을 것 같습니다. |
사이트 배포 링크
요구사항
피그마 링크
기본 요구사항
체크리스트 (기본)
체크리스트 (심화)
피드백 반영
추가 예정 사항
주요 변경사항
멘토에게