Space
반응형
article thumbnail
[NextJS] 회원 탈퇴 기능
React & NextJS 2024. 6. 20. 01:02

[NextJS] 회원 탈퇴 (feat. prisma)회원 탈퇴는 탈퇴하려는 유저와 관련된 모든 정보를 삭제하는 것을 의미한다. 단계별로 설명하자면1. 클라우드에 저장된 이미지 등 삭제2. DB에 저장된 유저와 관련된 모든 정보 삭제3. 쿠키, 세션, 로컬스토리지에 저장된 값 삭제4. 관련된 캐시 초기화5. 로그인 전 메인 페이지로 이동하기DB 설정 (prisma)// schema.prismamodel User { id Int @id @default(autoincrement()) // 1부터 순차적으로 커진다. username String @unique email String? @unique // 전화번호 또는 소셜 로그인으로 로그인할 수 있기에 필..

article thumbnail
[NextJS] Middleware 기반의 페이지 접근 제한
React & NextJS 2024. 6. 19. 01:37

Before you learn🔗 middleware[NextJS] Middleware 기반의 페이지 접근 제한영상코드루트파일에 위치해야 하며,파일명은 무조건 middleware.ts로 지정해야한다.middleware.ts는 파일당 하나만 지원가능하다.(주석으로 설명 적었습니다.)// middleware.tsimport { NextRequest, NextResponse } from "next/server";import getSession from "./lib/session/getSession";interface Routes { [key: string]: boolean;}const publicOnlyUrls: Routes = { "/": true, "/login": true, "/sms": true..

article thumbnail
[React & NextJS] Infinite Scroll (무한 스크롤)
React & NextJS 2024. 6. 14. 11:01

Before you learn🔗 [NextJS] pagination[NextJS] Infinite Scroll (무한 스크롤)영상Why Use?무한스크롤과 페이지네이션의 사용 이유는 간단하다. 페이지를 들어갈 때마다 서버에서 해당 페이지에 대한 모든 데이터 리스트들을 받아서 보여준다면,데이터가 많으면 많을수록 서버가 한 번에 처리해야 되는 데이터 양이 많이 지므로 서버가 더욱 좋아야 할 것이며,화면을 보여주는데 시간도 오래 걸리고, 그러면 그만큼 사용자 경험도 좋지 않으며, 사용자 경험이 좋지 않으면 유저 이탈수가 증가할 것이고, 이탈수가 증가하면 그만큼 회사의 손해이기 때문이다. 흡사 캐시를 사용하는 이유도 이러하다. 캐시도 기회가 되면 한 번 알아두면 좋겠다. 동작 방식페이지네이션을 이해하고 있으면..

article thumbnail
[NextJS] Cache Strategy (캐시 전략)
React & NextJS 2024. 6. 13. 00:33

Before you learn🔗 [NextJS] Cache (캐시)[NextJS] Cache Strategy (캐시 전략)캐시 전략각 홈페이지마다 cache 전략을 잘 세워서 작성해야 한다. 유저수가 많은 페이지일수록 더욱 중요하다. Product에 관련된 Cache 전략을 작성해 보겠다.(캐시 전략에 대해서만 작성하겠다.) Home page : `home-product-list`를 60초마다 캐시 재검증한다.// app/(tabs)/home/page.tsximport { unstable_cache as nextCache } from "next/cache";const getCacheProductList = nextCache(getInitialPostList, ["home-product-list"], {..

반응형