데이터 패칭 라이브러리

웹 에플리케이션에서 서버로부터 데이터를 가져오는 기능을 뜻한다. 그리고 데이터 패칭 라이브러리는 이러한 작업을 단순화하고 관리를 유용하게 하기 위해 사용하는 라이브러리이다.주로 웹 API를 통해 데이터를 요청하고, 응답을 받아와서 애플리케이션의 상태를 업데이트하는 작업

가볍고, 빠르고, 페이지네이션을 지원하고, ts를 지원한다. SWR이란 이름은 HTTP 캐시 무효 전략인 stale-while-revalidate 에서 유래되었다.SWR은 캐시로부터 데이터를 반환한 후, fetch요청을 하고, 최종적으로 최신화된 데이터를 가져오는 전략

SWR 사용 효과는? 효율적인 리렌더 이러한 패칭 라이브러리를 사용하지 않고 useEffect() 로 단순하게 axios 나 fetch를 이용하면, 자식에게 정보를 전달하기 위해서 이러한 로직을 최상단 component 에서 진행해야한다. 그리고 필요한 모든 자식에게

응용 어떤 상황에서는 fetcher함수에 여러 인자를 사용해야하는 다중 인자 상황이 올 수 있다. 예를 들어 다음과 같은 hook은 올바르지 않다. useSWR('/api/user', url=> fetchWithToken(url, token)); 데이터의 식별자로서

Axios는 JavaScript 환경에서 사용되는 HTTP 클라이언트 라이브러리로, 주로 브라우저와 Node.js 환경에서 HTTP 요청을 수행하는 데 사용된다. Axios는 Promise 기반의 API를 제공하며, 비동기적인 HTTP 요청을 쉽게 처리할

get() Axios의 get 메서드는 HTTP GET 요청을 수행하는 메서드로, 주어진 URL로부터 데이터를 가져온다. 이 메서드는 Promise를 반환하며, 요청이 성공하면 resolve되고, 실패하면 reject된다. 아래에서 get 메서드에 대한 상세한 설명을

PATCH patch 메서드는 리소스의 '일부'를 업데이트하는 데 사용된다. 전체 리소스를 수정하지 않고, 변경할 부분만 전송하며 데이터의 조각을 수정할 수 있다. 매개변수 url 요청을 보낼 URL이다. 수정해야할 데이터(api)의 앤드포인트에 특정한 파라미터를

Axios의 옵션 (AxiosRequestConfig type) AxiosRequestConfig는 axios 요청을 구성할 때 사용되는 설정 객체의 타입이다. 이를 이해하면 더 정교한 HTTP 요청을 만들고, 다양한 옵션을 설정할 수 있다. url 요청을 보낼 U

가로채기 (Interceptor) Axios의 인터셉터는 요청(request)과 응답(response)을 가로채고, 이를 처리하거나 수정할 수 있는 강력한 기능을 제공한다. 이를 통해 요청 전이나 응답 후에 공통적인 작업을 수행할 수 있으며, 로깅, 인증 토큰 추가,

TanStack Query는 react 애플리케이션에서 데이터를 관리하고 서버와의 상호작용을 처리하기 위한 라이브러리이다. 주로 비동기 데이터 요청, 캐싱, 상태 관리, 데이터 업데이트 및 동기화를 단순하고 효율적으로 다루는 데 사용된다. REST API, GraphQ

v4 변경점 status 세분화 기존 useQuery 리턴값 중 하나였던 status가 fetchStatus와 status로 세분화되었다. 각각의 용어는 다음과 같다. status : data, query 결과값에 대한 정보를 나타냄 loading : 아

useQuery() 로 만든 기초 문법이다. queryKey에는 문자열 또는 객체를 담은 배열을 넣어준다. 이 배열안에서의 순서는 유의미하지만, 객체의 순서는 무의미하다. 이때 query에 사용되는 key값은 유니크해야한다. 다른 쿼리들과 중복되면 캐싱에 문제가 발생하

커스텀 훅과 폴더 분리 이전 포스트와 같이 useQuery() 구문을 컴포넌트 내에 그대로 작성해주는 것은 권장하진 않는다. 따로 폴더를 만들어주어 관리해주는 것이 유지보수와 재사용성에 효율적이기 떄문이다. 다음과 같은 분리를 권장한다. 쿼리및 데이터에 사용하는 in

사용자의 웹 서비스 경험에 있어서 사용자가 직접 서버의 데이터를 변경해야하는 경우가 있을 수 있다. 이때 사용하는 훅은 1useMutation() 이다.서버와의 상호작용을 통해 데이터를 변경하거나 업데이트하는 데 사용된다. 이를 통해 비동기적인 데이터

Prefetching은 웹 애플리케이션이나 웹 페이지의 사용자 경험을 향상시키기 위해 데이터를 미리 불러오는 기술을 말한다. 주로 사용자가 페이지를 요청하기 전에 필요한 데이터를 미리 가져와서 페이지 로딩 속도를 향상시키고 사용자 경험을 부드럽게 만드는 데 사용된다.