카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고

📝 URL 생성 함수 (URLSearchParams 객체 활용)

• API 엔드포인트를 문자열로 직접 조합하는 방식이 너무 복잡하게 느껴졌다. 쿼리 파라미터가 많아지고 복잡해질수록 이를 관리하기 어려웠고, URL 인코딩과 같은 세부적인 처리를 수동으로 해야 해서 실수할 가능성도 높았다.
• URLSearchParams 객체를 활용하여 쿼리 파라미터를 쉽게 관리할 수 있도록 했다. 이를 통해 URL 인코딩 문제도 자동으로 해결되었고, 코드 안정성도 높아졌다. 아래와 같은 함수로 URL 생성 로직을 분리했다.

const getThemesProductsPath = ({ themeKey, pageToken, maxResults }: RequestParams) => { 
 const params = new URLSearchParams(); 
 if (pageToken) params.append('pageToken', pageToken); 
 if (maxResults) params.append('maxResults', maxResults.toString()); 
 return `/v1/themes/${themeKey}/products?${params.toString()}`; 
};

 

📝 API 요청 함수 (fetchInstance 활용)

• API 요청 로직이 여러 컴포넌트에 중복되어 있어서 이를 관리하는 것이 어려웠다. API 요청 방식이 변경될 때마다 여러 곳을 수정해야 했다.
• API 요청 로직을 getThemesProducts 함수로 분리하고, fetchInstance를 통해 API 요청을 처리하도록 했다. 이를 통해 API 요청 방식이 변경되더라도 한 곳만 수정하면 되도록 개선했다.

import { fetchInstance } from '../instance';

export const getThemesProducts = async (params: RequestParams) => { 
 const response = await fetchInstance.get<ThemesProductsResponseData>(getThemesProductsPath(params)); 
 return response.data; 
};

 

📝 React Query 

• React의 useState와 useEffect를 사용하여 무한 스크롤을 구현하려고 했다. 그러나 데이터 패칭, 캐싱, 재시도, 페이지네이션 관리 등의 복잡한 로직을 직접 처리해야 해서 코드 복잡도가 증가하고 유지보수가 어려웠다.
• React Query의 useInfiniteQuery 훅을 사용했다. 데이터 패칭, 캐싱, 재시도, 페이지네이션 관리 등 복잡한 로직을 React Query가 자동으로 처리해주어 코드 복잡도가 낮아지고 유지보수성이 높아졌다. 또한, React Query의 캐싱 기능을 활용하여 불필요한 API 요청도 줄일 수 있었다.

import { type InfiniteData, useInfiniteQuery, type UseInfiniteQueryResult } from '@tanstack/react-query';

type Params = Pick<RequestParams, 'maxResults' | 'themeKey'> & { initPageToken?: string };

export const useGetThemesProducts = ({ 
 themeKey, 
 maxResults = 20, 
 initPageToken, 
}: Params): UseInfiniteQueryResult<InfiniteData<ThemesProductsResponseData>> => { 
 return useInfiniteQuery({ 
  queryKey: ['themesProducts', themeKey, maxResults, initPageToken], 
  queryFn: async ({ pageParam = initPageToken }) => { 
   return getThemesProducts({ themeKey, pageToken: pageParam, maxResults }); 
  }, 
  initialPageParam: initPageToken, 
  getNextPageParam: (lastPage) => lastPage.nextPageToken, 
 }); 
};

 

📝 Daily Scrum

• STEP2 진행 후 PR

 

😋 Today 회고

1. 상품 옵션 데이터 출력 문제
   • 네트워크 탭에서 /v1/products/{productId}/options API 호출이 성공하고 데이터가 정상적으로 수신되는 것을 확인했음. @/components/features/ProductDetail/ProductOptions 컴포넌트의 로직을 살펴보았으나, API 응답 데이터를 화면에 렌더링하는 부분에서 문제가 발생하는 것으로 추측됨.
   • @/pages/ProductDetail에서 productDetailData?.detail로 데이터를 불러왔으나, productOptionsData의 경우 productOptionsData.options로 설정하려고 했을 때 타입에 맞지 않는다고 나옴. 여러 타입 정의를 다시 세워봤지만 정확한 방법을 모르겠음.
2. 로딩 관련 문제
   • @/pages/ProductDetail에서 데이터를 기다리는 시간이 오래 걸림. 이를 개선할 수 있는 방법이 있을지 고민해야함.
3. 페이지 이동 관련 문제
   • 상품 상세 페이지 (@/pages/ProductDetail)에서 주문 결제 페이지 (@/pages/Payment)로 이동하며, productId를 전달하는 과정에서 문제가 발생함.
   • @/pages/ProductDetail에서 다음과 같이 설정하였으나, 메인 화면으로 돌아가는 현상이 발생함.

 

➡️ 참고 링크

https://oliveyoung.tech/blog/2023-10-04/useInfiniteQuery-scroll/

useInfiniteQuery로 무한스크롤 구현하기 | 올리브영 테크블로그