React-query : fetch, cache, synchronize, update(for server state)에 사용되는 라이브러리이다. 공식사이트 React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 배경 server state 사용 시 발생할 수 있는 문제점은 다음과 같다. caching deduping(데이터 중복 제거) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

query가 오래 되었다는 것을 판단하고 다시 fetch해올 때, queryClient.invalidateQueries 함수를 사용한다. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..

query와 다르게 CUD에 사용된다. https://react-query.tanstack.com/guides/mutations Mutations Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.com 사용예제 const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.mes..

Ajax는 js를 이용한 비동기 통신으로, 클라이언트 서버 간의 xml(Extensible Markup Language)데이터를 주고받는 기술이다. 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. Ajax 방식을 이용한 웹 API는 XMLHttpRequest 부터 시작하여 fetch를 거쳐 axios까지 다양하다. XMLHttpRequest는 복잡하고 가독성이 떨어지기 때문에 fetch api가 ES6에서부터 표준이 되었는데, 따라서 현재 fetch api는 기본 라이브러리로 따로 설치하지 않고 사용해도 된다. axios는 Node.js에서 XMLHttpRequests를 사용하기 좋게 만들어둔 api이며 따로 설치해주어야 동작한다. TOP Ajax API를 참고하면 더 많은..