본문으로 건너뛰기

23.08.10

오늘 한 일​

  • 카공실록 home 페이지 리팩토링 완료
  • gloddy 디자인 시스템 적용

🥲

vscode 너무 느리다.. 포맷팅 하는데에만 하루종일 걸린다..

next도 느려... 왜이럴까...?

이슈(카공실록) - prefetch해서 데이터를 가져왔을 때 이전 데이터가 겹치는 현상​

현재 페이지 쪽 코드는 다음과 같다.

  • home 에서는 placeAround 데이터를 미리 가져와서 hydrate
  • place 에서는 place 데이터를 미리 가져와서 hydrate
// home
<QueryAsyncBoundary
  rejectedFallback={<div>에러가 발생했습니다.</div>}
  pendingFallback={<Loading />}
>
  <HydrationProvider
    queryFn={() => getPlacesAround(DEFAULT_COORDINATES)}
    queryKey={Keys.placesAround(DEFAULT_COORDINATES)}
  >
    <HomeDetail />
  </HydrationProvider>
</QueryAsyncBoundary>

// place
<QueryAsyncBoundary
  rejectedFallback={<div>에러가 발생했습니다.</div>}
  pendingFallback={<Loading />}
>
  <HydrationProvider queryKey={PlaceKeys.place(placeId)} queryFn={() => getPlace(placeId)}>
    <PlaceDetail />
  </HydrationProvider>
</QueryAsyncBoundary>

근데 이렇게 하면 home 페이지에서 place 페이지로 이동했을 때, home 페이지에서 가져온 데이터가 place 페이지에도 적용되는 문제가 발생한다.

이게 무슨 말이냐 하면, 분명 place 페이지에서 가져온 데이터를 hydrate 했는데, 이 데이터가 placeAround 데이터로 받아오게 된다.

🤔왜 이럴까?​

캐싱 때문이라고 생각한다. 다른 api 요청을 보냈는데 이상한 데이터가 들어오는 것은 캐싱 말고는 떠오르는게 없다.

🤔어떻게 해결할까?​

hydrate 과정을 없애면 해결되긴 한다. 일단 이 방법은 최후의 수단으로 두었다.

cache 설정

캐시를 저장하지 않도록 설정했다. 이 방법은 SSR 방식과 같다.

export const getPlace = async (id: number) => {
  const { data } = await api.get<Place>(`api/v1/places/${id}`, { cache: 'no-store' });

  return data;
};

export const getPlacesAround = async (params: PlacesAround) => {
  const { data } = await api.get<{ places: Place[] }>('api/v1/places/around', {
    searchParams: { ...params },
    cache: 'no-store',
  });

  return data;
};

이렇게 하면 캐시를 저장하지 않기 때문에 데이터가 겹치는 현상은 해결된다.

음.. 근데 뭔가 찝찝하다. 분명 뭔가 잘못된 것 같은 느낌이 든다. 확실한 원인을 찾고 해결해야겠다.

내일 할 일​

  • gloddy 버튼 공통 컴포넌트 구현
  • 카공실록 api 연결 진행