[SP2] 프로젝트 목록 useQuery 적용 및 필터링 값 유지 #256
Conversation
| const [selectedCategory, setCategory] = useStorage<ProjectCategoryType>( | ||
| 'projectCategory', | ||
| 'sessionStorage', | ||
| ProjectCategoryType.ALL, |
There was a problem hiding this comment.
여기서 초깃값을 undefined로 주고, selectedCategory가 undefined이면 아무것도 띄우지 않으면 어떤가요?
|
|
||
| if (state.data.length === 0) return null; | ||
| const { data } = useGetProjectList(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt'); | ||
| const recentProjectList = data as ProjectType[]; |
There was a problem hiding this comment.
as를 사용하지 않는 방법은 없나요..? as를 사용하면 실수할 가능성이 생겨서 최대한 지양하고 있습니다.!!
There was a problem hiding this comment.
타입 단언을 해주고 있는데 리액트 쿼리를 v5로 업그레이드 하기 전에 임시로 써둔 코드입니다! useSuspenseQuery 훅을 사용하게 되면 지울 예정입니다!
| export function ProjectList({ selectedCategory, state }: ProjectListProp) { | ||
| export function ProjectList({ selectedCategory, selectedPlatform }: ProjectListProp) { | ||
| const { data } = useGetProjectList(selectedCategory, selectedPlatform); | ||
| const projectList = data as ProjectType[]; |
| })()} | ||
| <S.ProjectListHeader selectedCategory={selectedCategory}> | ||
| <ProjectCategoryDescription selectedCategory={selectedCategory} /> | ||
| <ProjectListCount count={projectList?.length ?? 0} /> |
There was a problem hiding this comment.
위에 as가 있어서 타입이 항상 array로 캐스팅되므로 undefined인 경우가 고려되지 않아도 괜찮을 것 같습니다!
| & > span { | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
별도 스타일드 컴포넌트로 빼면 어떨까요..?? 자식 선택자를 사용하면 나중에 유지보수하기 어려워질 수 있을 것 같아요..!!
There was a problem hiding this comment.
여기에서도 여쭤봤었는데 자식 선택자를 지양하는 게 좋은 이유가 궁금합니다~!!
| } from '../../types/project'; | ||
|
|
||
| const client = axios.create({ | ||
| baseURL: BASE_URL, | ||
| timeout: DEFAULT_TIMEOUT, |
There was a problem hiding this comment.
timeout review/sopticle api 에도 있는데, 삭제해도 되는건가요?
There was a problem hiding this comment.
timeout이 3000으로 되어 있는데 프로젝트 목록을 불러올 때 해당 timeout을 초과해서 에러가 발생하는 경우가 많더라고요.
그래서 제거했는데 아예 제거하는 것보다 좀 늘려서 다시 지정하는 게 좋을까요?
There was a problem hiding this comment.
아 초과해서 삭제했군요! 음,, 안전장치? 처럼 부하를 막기 위해 있으면 좋다고 생각해서 6000 정도로 늘리는건 어떨까요?
필요한가?에 대한 의견도 궁금합니다!
Summary
Screenshot
Comment
최근 출시한 프로젝트(상단)와SOPT에서 진행된 프로젝트 둘러보기(하단)에서 각각 useFetch가 사용되고 있었습니다. 카테고리, 플랫폼 필터 모두 '전체'일 때 받아오는 데이터의 차이가 없고 정렬 여부만 달랐기 때문에 만든 useQuery 훅을 두 곳에서 모두 사용하였습니다.해당 [이슈]로 인해 useQuery에서 받아오는 data의 타입을
projectType[]으로 단언하는 코드를 추가적으로 작성하였습니다. Tanstack-Query v5에서는 아예 서스펜스 관련 쿼리가 따로 있어 data가 undefined일 때에 대한 처리를 따로 해주지 않아도 됩니다. (버전 업데이트를 희망하는 이유)필터링 값을 useStorage 훅을 통해 세션 스토리지에 저장 중인데 새로고침을 하면 defaultValue로 준 '전체'데이터가 잠깐 보였다가 필터링된 데이터로 돌아갑니다. 세션 스토리지에 값이 있으면 해당 값을 state의 기본값으로 주고자 했으나 하이드레이션 이슈가 있어서... 좋은 해결 방법을 고민 중입니다.
2023-11-05.1.57.29.mov