Next.js4 [Next.js] 페이지네이션 구현하기, 무한스크롤 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 무한스크롤 구현하기4. 전체 코드 [1. 초기설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DComment = { id: number; nickname: string; content: string;}; 3. api연결- getComment- 페이지값(page)과 한 페이지에 보여줄 댓글 개수(limit)를 통해 댓글을 조건에 맞게 가져온다- 반환 타입은 앞서 설정한 DComment의 배열 형.. 2024. 7. 4. [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] Modal 구현하기 목표- 재사용성이 높은 모달을 구현한다- '모달 띄우기' 버튼을 클릭하면 화면에 모달이 뜬다- 모달 외부는 어둡게 변한다- 모달이 뜬 상태에서는 스크롤 기능을 막는다- 모달 외부를 클릭하면 모달이 사라진다- 모달에 다양한 기능을 넣는다 목차1. 기본 환경 구성2. 모달 컴포넌트 생성하기3. 화면에 모달 띄우기4. 모달에 기능 넣기5. 전체 코드 [1. 기본 환경 구성]1. 버튼 생성- 아래와 같이 모달을 띄울 버튼을 생성한다- 코드// src/app/page.tsx"use client";import React, { useState } from "react";function Home() { return ( 모달 띄우기 );}export default Ho.. 2024. 6. 25. [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 다음
