본문 바로가기

Computer Programming/Next

[Next.js] Optimistic UI 구현 (좋아요, 북마크 기능 개선)
Computer Programming/Next 2024. 2. 24. [Next.js] Optimistic UI 구현 (좋아요, 북마크 기능 개선) Optimistic UI는 API에 요청을 보낸 후 UI를 그려내는 과정에서 모든 것을 낙관적으로 보고 UI를 먼저 그리는 모델이다. 다시 정리하자면, 옵티미스틱 UI는 모든 API 통신이 성공할 것이라 여기고 화면에 먼저 결과 값을 그리는 것을 말한다. 성공확률이 99%정도 되는 요청엔 적용해줘도 되지 않을까..? (좋아요, 북마크는 메인페이지 -> 상세페이지에 접근한 후 가능한데, 상세 페이지 유저가 좋아요나 북마크 버튼을 누를 때 아래와 같은 onSubmit 함수가 실행된다. const onSubmitOption = async (type: string) => { try { const res = await fetch( `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/${..
Computer Programming/Next 2023. 8. 3. Next.js 13 - 블로그 프로젝트 | 성능 최적화 1. cache() - fetch를 사용하지 않는 api 비동기 함수 fetch()는 중복된 호출이 있다면 한번 캐싱하고 그 값을 자동으로 사용한다. export const getPosts = cache(async () => { const filePath = path.join(process.cwd(), "data", "posts.json"); return readFile(filePath, "utf-8") .then(JSON.parse) .then((posts) => posts.sort((a, b) => (a.date > b.date ? -1 : 1))); }); cache -> request 인자가 동일한 인자라면 한번 호출이 되면 캐시된 값을 반환한다. 한번 렌더링 될 때 유지되며 (= 한번 렌더링 될..
Next.js 13 - Redirects, Rewrites, Middleware, .env
Computer Programming/Next 2023. 8. 2. Next.js 13 - Redirects, Rewrites, Middleware, .env 1. Redirects 삭제된 페이지, 존재하지 않는 페이지일 경우 지정한 경로로 리다이렉트 시킴 next.config.js에서 설정함 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", }, ], }, async redirects() { return [ { source: "/products/deleted_forever", destination: "/products", permanent: true, //search engine에게 현재 페이지는 존재하지 않는다고 알려줌 -> 캐싱 }, { source:..
Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트
Computer Programming/Next 2023. 8. 2. Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트 1. loading.tsx layout.tsx와 같은 위치의 폴더 안에 loading.tsx를 정의해주면 해당하는 return 값이 로딩중에 보여지게 된다. export default function PageLoading() { return loading...; } layout은 보여지고, 그 layout의 children에 해당하는 부분에서 로딩중일 때 실행된다. 정적인 데이터이므로 pre-fetched html에 포함되어있다. -> SSG에서는 확인할 수 없으며 의미도 없다. 즉 loading 이라는 것은 dynamic하게 SSR이나 CSR을 사용할 때 의미가 있음 loading.tsx는 한 라우트당 1개씩 지정할 수 있기 때문에, 데이터들 내에서 loading...들을 보여주고싶다면 segments..
Next.js 13 - Route Handler
Computer Programming/Next 2023. 8. 2. Next.js 13 - Route Handler v12의 API Routes가 개선됨 -> Route Hanlder api 함수 1개 당 목적 별로 (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS). 나눠서 처리할 수 있음 https://nextjs.org/docs/app/building-your-application/routing/route-handlers Routing: Route Handlers | Next.js Using App Router Features available in /app nextjs.org app/api/products/route.ts import { getProducts } from "@/api/products/products"; import { NextResponse } from "next..
Next.js - fetch를 이용한 SSG, ISR, SSR, CSR 구현 옵션
Computer Programming/Next 2023. 8. 1. Next.js - fetch를 이용한 SSG, ISR, SSR, CSR 구현 옵션 1. SSG - 비동기 데이터 fetching data / products.json에 데이터가 있다고 가정하고 [ { "id": "1", "name": "청바지", "price": "10000" }, { "id": "2", "name": "티셔츠", "price": "13000" }, ...objects ] api 폴더의 products.ts 모듈을 만들어 데이터를 가져온다. import path from "path"; import { promises as fs } from "fs"; export type Product = { id: string; name: string; price: string; }; export async function getProducts(): Promise { const fil..
Next.js - Server Component/ Client Components
Computer Programming/Next 2023. 8. 1. Next.js - Server Component/ Client Components **v12가 아닌 v13을 선택한 이유 - v12에서는 페이지 단위로 서버/클라이언트를 구분했는데, 앱이 복잡해질수록 필요한 클라이언트 소스코드가 많아지니 결국 사용자에게 필요한 JS 번들링이 커지고, 앱의 성능면에도 영향을 준다. - 이번 프로젝트에서는 실시간 데이터를 가져오는 오픈 API 사용 + 사용자가 글을 자주 올리는 커뮤니티 + 레이아웃 등의 각각 성격이 매우 다른 컴포넌트들이 한 페이지에 동시에 존재하는 경우가 있다. - 기존 v12의 페이지 단위 렌더링 방식보다는 컴포넌트 단위로 다른 렌더링방식을 가지는 v13이 더 최적화에 도움이 될 것이라고 생각한다. 1. Server Components vs Client Components - Server Components v13에 도입된 app 폴..
Next.js - Metadata
Computer Programming/Next 2023. 8. 1. Next.js - Metadata Metadata https://nextjs.org/docs/app/api-reference/file-conventions/metadata - 제일 상위 폴더의 layout에서 metadata 정의 하위 폴더의 layout에서 metadata를 정의하면 폴더별로 다른 metadata의 title과 desc를 가질 수 있다. 만약 지정하지 않으면 최상위 폴더의 metadata를 덮어쓰게 된다. export const metadata = { title: { default: "나영의 블로그", template: "나영의 블로그 | %s" }, description: "나영이의 블로그입니다", }; // main layout - dynamic한 metadata를 정의할 수도 있다. export async func..
Next.js - File Convention :not-found, layout(+Link tag), loading,
Computer Programming/Next 2023. 8. 1. Next.js - File Convention :not-found, layout(+Link tag), loading, 1. not-found.tsx 최상위 또는 해당 폴더에서 라우트를 찾을 수 없다면 notFound() 함수가 호출되고 이에 따라 해당하는 위치에서 not-found.tsx가 실행됨. 따라서 [...post] 를 하지 않은 상태에서 products/s/s 이렇게 두번 더 연결하면 최상위 폴더의 not-found로 연결됨. export default function PostPage({ params }: Props) { if (params.post === "nothing") { notFound(); } return {params.post} Post; } 또는 특정한 상황에서 notFound()를 직접 호출해도 됨 => 페이지별로 다른 not found UI를 보여줄 수 있음 2. layout.js - head..

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*