728x90 Next.js13 [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. [Next.js+MongoDB] 게시판 북마크 기능 구현하기 (feat. App Router) 평소 메모장을 사용할 때 편리했던 기능 중에 하나인 '북마크 기능'을현재 리팩토링을 진행하고 있는 게시판 프로젝트에 적용해보고 싶었다 북마크 버튼을 통해 게시글을 북마크하고,북마크된 게시글을 최상단에서 볼 수 있는 기능을 구현하고자 한다.구현 화면 목차북마크 기능 구현 단계MongoDB를 활용한 API 세팅(Next.js App Router 를 사용한) UI 세팅 📌 북마크 기능 구현 단계북마크 기능을 구현하기 위해서는 아래 단계를 거치면 된다. 데이터베이스 내 게시글 데이터에 북마크 관련 필드를 추가한다북마크 여부를 저장하는 API 를 세팅한다UI 를 세팅한다 (→ 북마크 버튼, 북마크된 게시글이 최상단에 위치할 수 있도록 재정렬) 📌 MongoDB 를 활용한 API 세팅게시글 북마크 관련 필드.. 2024. 8. 24. React-Query 를 사용하는 이유 (+ 개념, 컨셉, SSR Hydration, Redux ...) 📌 React Query 를 사용하는 이유 ? " 비동기 데이터 관리를 위해 사용한다. " 여기서 비동기 데이터란 Server state (= 서버의 상태) 를 의미한다. 즉, API 로 클라이언트에게 제공될 수 있는 서버의 데이터와 API 로 추가/수정/삭제가 될 수 있는 서버의 데이터를 의미한다. 나의 경우 Redux 를 사용하여 비동기 데이터를 관리하곤 했다. 그러나 Redux 는 API 통신 및 비동기 데이터 관리를 위한 라이브러리가 아니기 때문에, (*Redux 는 전역 상태 관리를 위한 라이브러리) API 요청을 통해 받아온 데이터를 관리하는 코드나 API 상태를 관리하는 코드 등을 직접 작성해야 했다. 반면 React Query 는 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업.. 2023. 10. 9. 이전 1 2 3 4 다음 728x90
