민ズl으l 개발일ブl

[next.js]패럴렐 라우트란🤔

패럴렐 라우트란🤔동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있는 기능사용자 경험을 향상시키고, 페이지 전환 시 더 부드러운 인터페이스를 제공예를 들어, 대시보드 같은 복잡한 UI를 만들 때 유용하게 사용 패럴렐 라우트의 장점 🌟동시 렌더링 : 여러 페이지를 동시에 렌더링할 수 있어서, 사용자에게 더 빠른 반응성을 제공유연한 구조 : 다양한 페이지를 조건부로 렌더링할 수 있어, 복잡한 애플리케이션 구조를 쉽게 관리모듈화 : 슬롯(Slot) 개념을 통해 콘텐츠를 모듈화할 수 있어, 재사용성이 높음[공식문서] Routing: Parallel Routes | Next.jsSimultaneously render one or more pages in the same view that..

SSG : 서버에서 미리 페이지를 생성하여 정적 html로 저장하고, 클라이언트가 요청시 즉시 반환=>14버전에선 디폴트(안적거나) 또는 cache:"force-cache" =>yarn build시 ssg페이지는 ㅇ static으로 표현됨 SSR : 클라이언트가 요청할때마다 서버에서 html을 생성하여 반환=>cache:"no-store" : yarn build시 ssr페이지는 f dynamic으로 표현됨 CSR  : 클라이언트에서 js를 사용해 UI를 생성하고 렌더링=>리액트 훅 사용=>"use client" 사용 ISR : SSG와 유사하게 미리 페이지를 생성하지만, revalidate 주기에 따라 서버에서 페이지를 다시 생성하여 최신 데이터를 제공=>next:{revalidate:다시 생성할 시간}

이미지 최적화웹 성능을 개선하는 중요한 작업으로, 다음 방법들을 활용할 수 있음차세대 형식 사용: WebP, AVIF로 변환디바이스 크기에 맞는 이미지 제공: 적절한 해상도로 최적화레이지 로딩 적용: 스크롤 시 필요한 이미지만 로드블러 이미지 사용: 로딩 중에도 사용자 경험 개선*이미지 최적화 예제import Image from "next/image";export default function BookItem({...}: BookData) { return ( ... );} * 외부 이미지 로드 문제 해결외부 도메인의 이미지를 사용하려면 next.config.js 파일을 수정/** @type {import('next').NextConfig} */const nextConfig = { ..

Parallel Route (병렬 라우트)하나의 화면에 여러개의 페이지 컴포넌트들을 동시에 렌더링하는 라우팅 패턴복잡한 구조의 애플리케이션을 구축할 때 유용예시소셜 미디어 서비스 (예: 왼쪽 사이드바, 중앙 피드, 오른쪽 알림 창을 병렬로 표시)관리자의 대시보드 (예: 메뉴, 콘텐츠 영역, 상태 표시창 등을 동시 렌더링) slot(슬롯)병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더URL 경로에는 아무런 영향을 미치지 않으며, 라우트 그룹과 비슷한 역할을 함export default function Layout({ children, sidebar, feed,}: { children: ReactNode; sidebar: ReactNode; feed: ReactNode;}) { return ( ..

dynamic 옵션특정 페이지의 유형을 강제로 Static 또는 Dynamic 페이지로 설정할 수 있는 옵션 1. auto기본값어떤 설정도 강제하지 않음export const dynamic = 'auto' 2. force-dynamic페이지를 강제로 Dynamic 페이지로 설정export const dynamic = 'force-dynamic'; 3. force-static페이지를 강제로 Static 페이지로 설정props가 undfined로 설정됨하위 데이터 패칭 함수에서 cache:'no-store'를 사용하더라도 강제로 캐싱됨정적페이지로 강제됨단점: 검색 페이지 등 동작이 필요한 페이지에서 문제가 발생export const dynamic = 'force-static'; 4. error페이지를 강제로..

캐싱이란🤔데이터를 효율적으로 저장하고 빠르게 제공하기 위한 기술🥳Next.js에서 클라이언트와 서버에서 데이터를 빠르게 제공하거나 서버 부하를 줄이는 데 사용캐싱의 종류1. 클라이언트 캐싱브라우저나 사용자 디바이스에 데이터를 저장하여 재요청 없이 데이터를 제공예시: 브라우저가 이미 로드된 이미지나 CSS 파일을 캐싱하여, 다시 방문 시 빠르게 로드 🏃‍♀️2. 서버 캐싱서버가 자주 사용하는 데이터를 미리 저장하여 클라이언트 요청에 빠르게 응답서버 부하를 줄이고 성능을 최적화 🌟예시 : API 요청 결과를 캐싱하여 동일 요청 시 더 빠르게 처리주요 캐싱 개념과 옵션1. Full Route Cache페이지 전체를 캐싱하여 요청 시 저장된 페이지를 반환정적 페이지나 cache : 'force-cache..

환경변수명 : NEXT_PUBLIC_~~~NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345 환경변수 적용시const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/post`); [공식문서] Configuring: Environment Variables | Next.jsLearn to add and access environment variables in your Next.js application.nextjs.org

React Server Component react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트오직 서버에서만 실행되는 컴포넌트(브라우저에서 실행 x)페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장!클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할것서버 컴포넌트서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행됨브라우저에서 실행될 코드가 포함되면 x클라이언트 컴포넌트에게 직렬화되지 않는 Props는 전달불가클라이언트 컴포넌트서버측에서 사전 렌더링 진행할때 한번, 하이드레이션 진행할 때 한번 총 2번 실행=> 클라이언트에서만 실행하는건 아님서버 컴포넌트 import 못함//클라이언트 컴포넌트"use client";import { useEffect } from "react";...export defa..

Linknext/link클라이언트 사이드 렌더링 방식의 링크 생성programmatic navigation=> push=> replace : 뒤로가기를 방지하며 페이지 이동=> back : 페이지 뒤로가기import { useRouter } from "next/router";...const router = useRouter();const onClickbutton = () => { router.push("/test");};인텔리센스 : 코드 문법 자동 완성 기능Pre-fetching사전에 페이지를 미리 불러옴빠른 페이지 이동을 위해 제공되는 기능연결된 모든 페이지의 JS Bundle 불러옴API RoutesNext.js에서 API를 구축할 수 있게 해주는 기능@경로src 폴더를 가리킴import boo..

🌟page router🌟Pages폴더의 구조를 기반으로 react router처럼 페이지 라우팅 기능을 제공함다양한 방식의 사전 렌더링 제공단점💩페이지별 레이아웃 설정이 번거로움데이터 페칭이 페이지 컴포넌트에 집중됨불필요한 컴포넌트들도 JS Bundle에 포함됨 동적 경로 : ~/post/1,,, => [post]🌟app router🌟페이지 라우팅 설정 방식 변경레이아웃 설정 방식 변경데이터 페칭 방식 변경React 18 신규 기능 추가ex: React Server Component, Streaming [next.js] React Server ComponentReact Server Component react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트서버측에서만 실행되는 컴포넌트(브라우저..