🚨 문제큰 문제는 아니고 useQuery를 사용했을 때 `isPending` 상태일 때 로딩 컴포넌트를 리턴하는데 `data`가 undefined일 수 있다는 에러가 발생했다. 1차로 시도했던 방법은 삼항연산자를 사용해서 falsy한 값일 경우 명시적으로 `null` 값을 할당하는 방법으로 변경했다. /** 실제 코드는 아닌 예시 코드 */// 에러 났던 코드const { data, isPending } = useGetDataQuery(); // 커스텀 useQueryif(isPending) return Loading . . .console.log(data) // 여기서 undefined일 수도 있다는 에러 발생함타입스크립트는 `isPending`일 경우 return을 해주는 것과 관계없이 `useQ..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)이전 리팩토링 과정(1) - [스켈레톤 UI] 화면 깜빡거림 해결이번 리팩토링은 페이지가 있는 게시글 목록에서 다른 페이지로 이동할 경우 화면이 깜빡거리는 현상이 발생하여 `tanstack query` 의 `prefetchQuery` 를 이용하여 해당 문제를 해결했다. 💡 변경 방법기존에는 페이지를 이동하고 나서 해당 페이지의 데이터를 요청했다. 따라서 필연적으로 깜빡거리는 문제가 발생했다.따라서 미리 데이터를 요청하는 `prefetchQuery` 를 사용해보기로 했다. 방법은 생각보다 어렵지는 않았다. `onMouseOver` 이벤트를 이용해서 페이지 버튼에..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)💡 화면 깜빡거림벙개 상세페이지에서 필요한 api 데이터는 다음과 같다. 상세 페이지 데이터상세 페이지 데이터에 등록된 산 데이터상세 페이지 데이터에 등록된 신청자 목록총 3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다. 🚨문제점 사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다..