프로젝트/WINE 2

디바운스 훅

Debounce사진 처럼 와인가격을 input으로 조절하면 그 범위에 있는 가격의 와인데이터들이 불러와지는 로직을 짯는데 인풋의 gap이 하나라도 바뀔때마다 get요청을 보내기때문에 드래그를 할때마다 api get요청을 우수수 받는 문제가 있었다. 이를 디바운싱(debouncing) 과 쓰로틀링(throttling)을 이용하여 개선해보고자 하였다. 둘 중 어느 것을 사용하는게 적합할까?  디바운싱은 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 필터에서 사용자가 게이지 바를 움직일 때마다 API 요청을 보낸다면, 디바운싱을 통해 입력이 끝난 시점에만 (즉 마지막 함수 호출 시점) 요청이 이루어지는게 좋..

프로젝트/WINE 2024.12.02

무한스크롤 이슈

무한스크롤시 두번 데이터를 받아오는 현상무한스크롤을 구현하기 위해 아래 처럼 ref를 이용하여 페이지의 끝에 도달하였을때를 감지하여 뒤에 더 불러올 데이터가 있는지 확인하는 wineCursor상태, 데이터를 추가로 불러올 시점을 제어하는 isLoading과 hasMore을 이용하여 로직을 짯다. const [wineList, setWineList] = useState([]); const [wineFilterValue, setWineFilterValue] = useState({ wineType: WineEnum.Red, winePrice: { min: 0, max: 100000 }, wineRating: 0, }); const [wineName, setWineName] = useSt..

프로젝트/WINE 2024.09.19