728x90 MongoDB3 [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. [MongoDB] Next.js 에서 MongoDB 사용하기 (+ Dynamic Route 에서 DB 데이터 사용하는 법) 1. MongoDB 라이브러리 설치 npm install mongodb : Next.js 작업 폴더를 열어 라이브러리를 설치한다. 2. DB 연결 함수를 담을 js 파일 만들기 긴 코드를 따로 파일을 만들어 export 하여 사용함으로써 - 재사용이 간편함 - 컴포넌트마다 DB 연결 코드를 작성하면, 새로고침 할 때 마다 connet 를 계속함 → DB 에 부담 → Next.js 서버 띄울 때 1번만 실행하면 좋기 때문에 따로 파일을 만드는 것이 나음 • /util/database.js // database.js import { MongoClient } from "mongodb" const url = ''; const options = { useNewUrlParser: true }; let connetD.. 2023. 9. 12. 이전 1 다음 728x90
