Node2 [Next.js] 페이지 기반 페이지네이션 구현하기 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다- 페이지 번호를 클릭하면 해당 페이지로 이동한다- '이전', '이후' 버튼을 사용해 다른 데이터를 렌더링할 수 있다- 마지막 페이지일 경우, 이후페이지를 클릭할 수 없고 첫 페이지일 경우 이전 페이지를 클릭할 수 없다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 페이지 버튼 구현하기 - 훅 구현4. 데이터 가져오기 및 이전페이지, 이후페이지 구현하기 - 훅 구현5. 전체 코드[1. 초기 설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DCom.. 2024. 7. 4. [Next.js] 이미지 업로드하기 (Nest.js연결 및 S3에 업로드) 목표1. 클라이언트에서 이미지를 선택해 저장을 누르면2. 서버를 통해 S3에 저장된다 목차1. S3버켓 만들기 및 서버 코드 작성하기2. 서버와 클라이언트 연결하기3. 클라이언트 로직 구현하기 1. S3 버켓 만들기 & 연결되는 서버 코드 작성하기- 아래 링크에서 확인할 수 있다- https://sangddong-back.tistory.com/59 2. 서버와 클라이언트 연결하기(1) 서버 코드 수정- cors 설정하기- 포트를 클라이언트와 겹치지 않도록 설정하기 (필자는 서버 3001, 클라이언트 3000으로 설정했다)// main.tsimport { NestFactory } from '@nestjs/core';import { AppModule } from './app.module';async fun.. 2024. 6. 14. 이전 1 다음
