react-query4 [프로젝트] 리액트 쿼리: server데이터로 client 데이터를 어떻게 관리하지.. 프로젝트를 하면서 리액트 쿼리를 쓰며 많은 고민한 부분과 해결과정을 정리해보려고 한다. 초기 랜더링아래와 같은 예약 사이트가 있다고 하자아래 화면은 리액트 쿼리의 서버 데이터를 받아 랜더링 된 화면이다. 받은 데이터는 일단 다음과 같다. "updated": datetime string, // "2024-09-07T09:37:12.881Z" "start": datetime string, "end": datetime string, "attendees": [ { "email": "mooboongofficial@gmail.com", "displayName": "{\"id\":1,\"type\":\"personal\",\"name\":\"관리자\"}", .. 2024. 10. 5. [React][React-Query] React-Query를 통해 fallback을 구현해 보자 목차 리액트 라우터와 함께 react-query로 fallback을 구현하는 방법에 대해 알아보자아래 라우터의 기본적인 사용방법이 나와있다..참고https://be-senior-developer.tistory.com/180 [React][Tanstack Query] 개념과 활용 방법에 대해 알아보자목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었be-senior-developer.tistory.com fallback이란? 어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말한다... 2024. 8. 27. [React][Tanstack Query] 개념과 활용 방법에 대해 알아보자 목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에정리해보고자 한다.. 리액트 쿼리의 필요성 캐시동일한 데이터에be-senior-developer.tistory.com 다음과 같이 QueryClientProvider를 사용해 주자useQuery로 데이터 불러오기 main.jsximport { Navigate, RouterProvider, createBrowserRouter,} from "react-router-dom";...import { QueryC.. 2024. 8. 26. [React] React-Query 라이브러리가 무엇인지 알아보자 목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에정리해보고자 한다.. 리액트 쿼리의 필요성 캐시동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요한 일일때, 결과를 빠르게 이용하고자 성능이 좋은 혹은 가까운 곳에 저장하는 것즉 캐시는 컴퓨터의 성능을 향상 시키기 위해 사용되는 메모리를 말한다.캐싱이 캐시 영역으로 데이터를 가져와서 접근하는 방식을 말한다.예를 들어, 속도가 느린 디스크의 데이터를 속도가 빠른 메모리로 가져와 메모리상에서 읽고 쓰는 작업을 수행한다.브라우저 캐시브라우저는 이미지, 비디오 뿐만 아니라 CSS 와 Javascript 등 정적 리소스를 로컬에 저장하여 성능을 향상시킨다.장점: 브라우저 캐싱을 통해 정적 .. 2024. 5. 9. 이전 1 다음 728x90
