Before you learn🔗 [NextJS] hard / soft navigation🔗 [NextJS] Intercepting Routes[NextJS] Parallel RoutesNextJS의 13.3 버전에 추가된 기능입니다. 영상 instagram의 사진을 눌렸을 때 모달이 나타나지만,해당 모달이 나타났을 때 새로고침을 하면 해당 사진 페이지로 이동합니다. Intercepting Routes와 Parallel Routes를 사용하면 instagram의 모달처럼 구현할 수 있습니다.장∙단점굳이 Parallel Routes를 사용할 필요는 없다.직접 페이지에 컴포넌트를 여러 개 넣으면 되기 때문이다.하지만, Parallel Routes를 사용하면 각각의 Loading 파일을 작성하기에 용이하다...

Before you learn 🔗 [NextJS] hard / soft navigation [NextJS] Intercepting RoutesNextJS의 13.3 버전에 추가된 기능입니다. 영상 윗 영상은 Intercepting Routes만 사용하였습니다. instagram의 사진을 눌렸을 때 모달창이 나타나지만,해당 모달창이 나타났을 때 새로고침을 하면 해당 사진 페이지로 이동합니다. Intercepting Routes와 Parallel Routes를 사용하면 instagram의 모달처럼 구현할 수 있습니다.Intercept 사전적 의미말 그대로 Intercepting Routes는 특정 경로를 가로채서 다른 경로를 표현할 때 사용합니다.  예를 들어,/feed에서 사진을 클릭하면,/photo/1..

Before you learn🔗 [NextJS] Sever Action🔗 [React] useState[NextJS] Pagination영상Code 처음 로딩 시 take에 적힌 수만큼 상품 리스트를 가져옵니다.현재는 등록된 총 상품 수가 2개 이므로,하나씩 가져오기 위해 take : 1 를 입력하였습니다. 가져온 상품 리스트들을 props로 컴포넌트에게 전달합니다.// app/products/page.tsximport ProductList from "@/components/product-list";import db from "@/lib/db";import { Prisma } from "@prisma/client";async function getInitialProducts() { // take에..

[NextJS] Skeleton (스켈레톤)영상 Code로딩 시 보여주고 싶은 페이지의 자식으로 loading.tsx (jsx) 파일을 만듭니다.loading.tsx(jsx) 파일을 만들면 Next.js가 알아서 로딩 시 동작합니다.// app/products/[id]/loading.tsximport { PhotoIcon } from "@heroicons/react/24/solid";export default function Loading() { return ( );} 로딩 시 화면을 보기 위해 setTimeOut을 사용하였습니다. 아래의 코..