🤍 은지log 🤍

🎣 QueryClient react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; ... const queryClient = new QueryClient(); // 새로운 QueryClient인스턴스를 생성 function Root() { return ( ); // QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능 } 우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생..

React로 만든 프론트에서, axios를 통해 nodeJS로 만든 api를 요청하여 crud 를 구현해보려고 한다. openAPI를 통해 연습해보려고 했는데 이것저것 다해보기에는 한계가 있어서 ,, api를 만들어보기로 하였고 TDD 강의를 들으며 nodeJS로 구현해보았다 !_! reactQuery 연습하려고 만들기 시작한거였고, 해보면서도 느낀거지만 계속해서 사용해보고 계속 공부해야겠다고 느낀부분이 많았다. 해봤던것들도 사용안하다보니 잊어버리고 실수하는 부분이 많았당 🫠 그래도 하고나니 뿌-듯 '-'b 🖤🤍 아무도 안궁금해하겠지만 남겨보는 코드❤️ : 더보기 https://github.com/Amy-Eunji/nodejs https://github.com/Amy-Eunji/react-crud

React-Query란? 👉🏻 React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React-Query의 장점 ✔️ React 어플리케이션 내에서 데이터 패칭, 캐싱, 동기적, 그리고 서버의 상태의 업데이트를 좀 더 용이하기 위해 만들어준다. ✔️ 기존에는 직접 만들어서 사용했던 기능들을 별도의 옵션으로 지원하여 복잡하고 이해할 수 없는 수많은 코드를 대신 React-Query 로직을 통해 짧은 코드로 대체할 수 있게 되었다. ✔️ 프로젝트 구조가 기존보다 단순해져 애플리케이션을 유지 보수하기 쉽고, 새로운 기능을 쉽게 구축할 수 있다. 그 외에도 많은 장점이 있다. → useQuery, useM..

// Main.tsx import { useEffect, useState } from "react"; import styled from "styled-components"; import { useQuery } from "react-query"; import Pagination from "../templates/Pagination"; const Main = () => { // const [post, setPost] = useState([]); const [totalPosts, setTotalPosts] = useState(10); // 페이지 당 게시물 수 const [page, setPage] = useState(1); // 현재 페이지 번호 const offset = (page - 1) * totalP..