728x90 app router4 [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] Static / Dynamic rendering 과 caching 기능 사용하기 (App Router ver.) 📌 Static / Dynamic rendering Next.js 는 아래 2개의 방식으로 웹페이지를 유저에게 보내준다. (Next.js 가 2개 방식을 자동으로 구분해줌) Static rendering - Next.js 에서 페이지를 하나 만들면 기본적으로 Static rendering 식으로 페이지를 보여준다. - npm run build 시 html 페이지들을 만들고, 유저가 접속할 때 마다 이 페이지를 보내준다. - 페이지 안에 별 기능이 없다. (→ 따라서, 매번 html 페이지를 새로 만들 필요가 없음) - Next.js 옛날 버전의 SSG 개념으로 보면 된다. Dynamic rendering - 페이지 안에 아래와 같은 것을 사용한다면 dynamic rendering 식으로 페이지를 보여준다.. 2023. 10. 5. [Next.js] App Router에 대해서 (+ Pages Router와 비교) 얼마 전 Next.js 가 새로운 라우팅 방식인 App Router 를 소개했다. 이를 정리해보고, (기존 방식인) Pages Router와 비교해 보고자 한다. 📌 페이지 만드는 방법 Pages Router : 기존 방식인 Pages Router 에서 페이지를 만드려면 다음과 같이 하면된다. src/ └── pages ├── about.js ├── index.js └── team.js ▲ pages 폴더 안에 파일을 만들면, 이 파일의 이름은 URL path 가 되어 페이지가 생성된다. App Router : App Router 에서 페이지를 만드려면 다음과 같이 해야한다. src/ └── app ├── about │ └── page.js ├── globals.css ├── layout.js ├── l.. 2023. 9. 5. 이전 1 다음 728x90
