728x90 2024/092 [React-Query] useMutation 으로 CRUD 적용하기 (feat. 무한 스크롤) [ 게시판 프로젝트 ]Stack : Next.js (14 App Router - Client / Serverless API 직접 구현), MongoDBInfo : 기록하고 싶은 글을 자유롭게 남길 수 있는 게시판 서비스 목차useMutation 적용 이유useMutation 적용 예시 (feat. 북마크 기능)최종 구현 화면 📌 useMutation 적용 이유현재 게시판 프로젝트는 무한 스크롤 기능(React-Query 의 useInfiniteQuery)이 적용된 상태이다.사용자가 page=2, page=3.. 으로 게시글을 보고 있다가, 특정 동작(ex. 수정, 삭제)을 하면 데이터가 page=1 로 초기화 된다.이렇게 되면 이전에 보고 있던 데이터를 보고 싶으면 다시 불러와야 한다.이를 React-.. 2024. 9. 30. [Next.js] 게시판 프로젝트에 무한 스크롤 적용하기 (+ React-Query, useInfiniteQuery) (feat. App Router ver.) [ 게시판 프로젝트 ]Stack : Next.js (14 App Router - Client / Serverless API 직접 구현), MongoDBInfo : 기록하고 싶은 글을 자유롭게 남길 수 있는 게시판 서비스 목차React-Query 적용 이유무한 스크롤 적용 (useInfiniteQuery + react-intersection-observer)최종 구현 화면 📌 React-Query 적용 이유게시판 프로젝트는 Next.js 14 App Router 를 사용하고 있다.기존에는 일부 클릭 이벤트 같은 client 동작이 있는 컴포넌트를 제외하곤 server component 에서 동작하였다.그러나 메인 페이지에 접속할 때마다 전체 게시글 데이터를 조회하는 것은 (데이터가 많아질 경우) 서버에 .. 2024. 9. 11. 이전 1 다음 728x90
