개발자
사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!
답변 1
안녕하세요 캐싱된 데이터는 빠르게 렌더링된다면, 서버에서 데이터를 요청할 때 지연이 발생한다는 것인데, 이는 네트워크 문제 혹은 API 백엔드 문제일 것이라고 생각합니다. 서버에서 비효율적인 쿼리를 사용중이거나, 데이터베이스와의 네트워크 연결 상태가 느리거나 등 여러 원인을 살펴봐야 할 것 같아요
김태영
작성자
제로베이스 프론트엔드스쿨 소프트웨어개발과 • 1월 8일
답변 감사합니다! 현재 백엔드 로그를 보기가 힘든상황인데, 프론트단에서 알아보거나 조치할것은 더이상 없을까요?
노우준
연세대학교 응용통계학과, 컴퓨터과학과 • 1월 8일
보여주신 코드만 봤을 때는 상품목록을 불러올 때 서용하는 query parameter들을 전부 서버로 보내주는 방식이라 프론트 단에서는 payload에 담긴 parameter 중에 잘못된 것이 없는지 확인하는 것 말고는 크게 검토할 만한 부분이 제게는 보이지 않네요 ㅠㅠ
김태영
작성자
제로베이스 프론트엔드스쿨 소프트웨어개발과 • 1월 8일
정렬과 필터를 위한 parameter들 이라 렌더링에 영향을 주는 것들은 아닐거에요ㅠㅠ 답변 감사드립니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!