*TanStack Query v4 기준으로 작성된 글입니다. 리액트 쿼리에서 제공하는 옵션과 적절한 메서드를 활용하여 불필요한 API 호출을 없애 네트워크 비용을 줄이고 사용자 경험을 개선시켜 봅시다. [딜리버블] ← 해당 프로젝트에 적용한 내용입니다. 정적 데이터에 staleTime 적용하기 리액트 쿼리의 useQuery의 옵션에는 staleTime이 존재합니다. 이전 게시글에서도 언급한 내용이지만 staleTime은 얼마의 시간이 흐른 뒤에 데이터를 stale(:신선하지 않은)하다고 취급할 것인지를 지정하는 옵션입니다. 기본값이 0이기 때문에 별도로 값을 지정하지 않으면 데이터는 받아오자마자 fresh 상태에서 stale 상태가 됩니다. 캐싱된 데이터가 stale한 상태가 되면 리액트 쿼리는 다음 조..

🔧 삽질 기록입니다. 🔨 프로그래머스 데브코스 프론트엔드 3기에 합류하고 벌써 일주일이 지났네요. 깃허브에서 3기 분들 35명을 일일이 팔로우하다가 한 번에 팔로우 해주는 프로그램을 한 번 만들어봐야 겠다는 생각이 들었습니다. 아래는 완성본입니다. 깃허브 API 깃허브 REST API 공식 문서입니다. GitHub REST API - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com Users 문서의 user 리스트, user 정보, 팔로워 가져오기 등의 API를 postman으로 확인했습니다. 아래는 user의 정보를 가져오는..

리액트 쿼리란? React Query는 리액트 앱에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업(fetching, caching, synchronizing, updating)을 도와주는 라이브러리다. function Coins() { const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.slice(0, 1..