prefetchQuery를 통한 프론트엔드 성능 개선

[devkyoung2]

prefetchQuery를 통한 프론트엔드 성능 개선

react-query(tanstack-query)는 데이터 캐싱을 해주며 devtool을 사용하면 해당 데이터가 언제 페칭됐는지, 얼마나 오래된 데이터인지 등을 시각적으로 볼 수 있어 자주 사용하는 편인데요! 이 밖에도 무한스크롤이나 페이지네이션등 다양한 쿼리를 제공해주지만 아는만큼 보인다고..... 저는 잘 이용하지 못하는 것 같아 아쉬워요 😅

이 포스트는 react-query의 여러 기능 중 prefetchQuery 를 통해 손쉽게 성능을 개선한 경험을 기술한 포스트입니다.

스터디를 진행하면서 개인적으로 제일 이해하기 어려웠던 주제가 suspense 였는데요! 이 포스트에서 suspense를 언급해 강제로? 복습도? 했답니다.

[Young2un]

오호,, 쿼리즈는 처음봅니다!! 이런 방법도 있군,,, 배움의,, 축복이 끝이,,,

[hatchling13]

이렇게 하나의 요청이 끝나기 전까지 이후의 요청이 block되어 계단 형식으로 시각화되는 순차적 데이터 페칭 형태를 아울러 waterfall이라고 부르는 모양이더라구요. 폭포수 모델과 비슷한 네이밍 센스 아닐까 싶습니다 ㅋㅋ

참 많은 곳에서 동시성 이야기를 할 수 있는 것 같습니다. 어떠한 문제가 한 곳에서만 특별히 발생하는 게 아니고, 형태만 다르게 보이는 같은 문제라는 경험은 CS 지식의 중요성을 역설하는 것 같기도 하네요.