728x90 전체 글69 [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. [Next.js] App Router API 요청 방식 정리 (+ Pages Router와 비교) (feat. MongoDB) 최근 게시판 프로젝트를 다시 리팩토링하고 기능을 보강하는 작업을 진행하고 있는데,App Router 로 프로젝트를 작업했지만API 요청은 Pages Router 방식으로 작성이 되어 있어서App Router 방식으로 변경하고자 하였다. API 요청 방식을 다룬 글이 많이 없어서공식 문서를 뜯어보고 한참 헤매다가해결한 코드를 공유하면 좋을 것 같아서 글을 작성하게 되었다! (기존에 작성했던 Pages Router 방식과 비교해서 보여주면좀 더 이해하기 쉬울 것 같았다.) 목차API 파일 폴더 구조GET 요청POST 요청 (application/json , formData 요청 방식)DELETE 요청 📌 API 파일 폴더 구조Pages Router ver.Pages Router 에서는 api 파일을 [프로.. 2024. 8. 10. 이전 1 2 3 4 ··· 18 다음 728x90
