react-query2 답지 영상 데이터 소모량 개선 🚨 문제점: 과도한 데이터 소모 & 깜빡임 현상 발생초기 방식: 모든 동영상을 한 번에 불러옴초기에는 FlatList를 사용해 한 페이지당 **3개의 답지 인덱스(최대 45개 영상)**를 불러오도록 구현했다.하지만 모든 동영상이 동시에 요청되고 자동 재생되어, 데이터 사용량이 급격히 증가했다.📌 문제점 정리✔ 한 페이지당 최대 2.5GB 데이터 사용✔ 화면에 보이지 않는 동영상도 미리 로드됨✔ 스크롤 시 깜빡임 발생 (썸네일 → 동영상 전환 시)✅ 해결 목표:보이는 동영상만 로드 & 재생하도록 최적화불필요한 데이터 요청을 최소화부드러운 전환을 위한 깜빡임 방지🔍 해결 과정: 최적화 적용하기1. onViewableItemsChanged 활용 - 보이는 영상만 재생📌 기존 방식FlatList가 한 번.. 2025. 1. 3. [react-query] 3. react-query의 캐싱 컴퓨터에 있는 데이터를 가져오는 것에 비해서 서버에서 데이터를 가져오는 일은 시간이 많이 걸릴 수 있다. 그런데 유저가 방금 확인한 데이터를 자주 보는 경우에 서버에서 계속 받아오기 보다는 컴퓨터 어딘가에 저장했다가 백엔드에 요청 할 필요 없이 바로 보여주는게 효과적이다. 이럴 때 캐시라는 걸 사용한다. 1.cache 캐시란 데이터를 미리 복사해놓는 임시 장소, 저장공간의 크기는 작지만 데이터를 가져오는 속도는 빠르다는 장점이 있다. 자주 사용하는 데이터를 캐시에 저장해두면 해당 데이터를 빠르게 가져와서 사용할 수 있다. 브라우저는 기본적으로 캐시를 사용해서 속도를 높이는데, 사이트에 접속해서 받은 데이터를 캐시 형태로 저장해놓고 사용자가 같은 사이트에 접속하면 저장해놓은 데이터를 유저에게 보여준다. .. 2024. 6. 17. 이전 1 다음
