NextJS 공식문서 파헤치기 (Middleware)

0️⃣ INTROMiddleware를 사용하면 요청이 완료되기 전에 코드 실행 가능그 후에 들어오는 요청에 따라 응답을 재작성, 리디렉션, 요청 또는 응답 헤더 수정 또는 직접 응답할 수 있다.Middleware는 캐시된 콘텐츠와 라우트가 일치하기 전에 실행된다.1️⃣ Use Cases일반적인 시나리오인증 및 권한 부여: 사용자 신원을 확인하고 특정 페이지나 API 라우트에 접근하기 전에 세션 쿠키 확인서버 측 리디렉션: 특정 조건에 따라 서버 수ㅜㄴ에서 사용자를 리디렉션경로 재작성: 요청 속성에 따라 경로를 동적으로 재작성하여 A/B 테스트, 기능 출시 또는 레거시 경로를 지원봇 감지: 리소스를 보호하기 위해 봇 트래픽을 감지하고 차단로깅 및 분석: 페이지나 API가 처리되기 전에 요청 데이터를 캡처하..

• format_list_bulleted FE/NextJS
• · 2024. 12. 17.
• textsms

NextJS 공식문서 파헤치기 (Error Handling)

0️⃣ INTRO에러는 예상된 에러와 예상치 못한 예외 두가지로 나눌 수 있다.예상된 에러를 반환 값으로 모델링: 서버 액션에서 예상된 에러를 try/catch 문 보다는 useActionState를 사용하여 에러를 관리하고 클라이언트에 반환하는것이 좋다.예상치 못한 에러는 에러 경계로 처리: error.tsx, global-error.tsx 파일을 사용해 에러 경계를 구현하고 에러를 처리한다.❓ useActionState ❓- React v19 에 정식 도입된 훅으로서 폼 작업의 결과에 따라 상태를 업데이트할 수 있다.- 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환한다.- 최신 폼 state와 액션이 여전히 진행(Pending) 중인지 여부도 반환한다.impor..

• format_list_bulleted FE/NextJS
• · 2024. 12. 10.
• textsms

NextJS 공식문서 파헤치기 (Caching)

0️⃣ Next.js의 캐싱 매커니즘 분류매커니즘설명위치목적지속 기간Request Memoization서버에서 함수의 반환 값을 메모이제이션 하여 저장한다.Server리액트 컴포넌트 트리에서 데이터를 재사용하기 위함요청 라이프 사이클 동안 (각 요청별로 유지)Data Cache서버에서 데이터 자체를 저장한다.Server사용자 요청과 배포 간에 데이터를 유지하여 불필요한 데이터 재요청을 줄인다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Full Route Cache서버에서 HTML과 RSC Payload를 캐시한다.Server경로를 미리 렌더링하여 렌더링 비용을 줄이고 성능을 향상 시킨다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Router Cache..

• format_list_bulleted FE/NextJS
• · 2024. 11. 15.
• textsms

NextJS 공식문서 파헤치기 (Linking and Navigating)

NextJS 에서 경로를 탐색하는 방법 컴포넌트 사용useRouter 훅 사용(클라이언트 컴포넌트)redirect 함수 사용(서버 컴포넌트)네이티브 Histroy API 사용1️⃣ 컴포넌트 컴포넌트는 HTML 태그를 확장하여 경로간 prefetching 과 클라이언트 측 탐색을 제공하는 내장 컴포넌트이다.NextJS에서 경로를 탐색하는 기본적이고 권장되는 방법next/link 에서 import 하여 사용할 수 있다.컴포넌트에 href prop을 전달하여 사용 가능 import Link from 'next/link'export default function Page() { return Dashboard}2️⃣ useRouter() 훅클라이언트 컴포넌트에서 useRouter 훅을 통해 경로를 변경할 수..

• format_list_bulleted FE/NextJS
• · 2024. 11. 14.
• textsms

NextJS 공식문서 파헤치기 (Defining Routes, Pages, Layouts and Templates)

Defining Routes1️⃣ 경로 생성폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다.각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.page 파일이 없는 폴더는 공개적으로 액세스할 수 없다.2️⃣ UI 만들기NextJS 공식문서 파헤치기(1) 에서 알아보았던 파일 컨벤션에 따라 각 경로 세그먼트에 대하여 UI를 만들 수 있다.// app/page.tsx// 각 폴더에 page 파일을 사용하여 해당 폴더 라우트에 액세스할 수 있게 해준다.export default function Page() { return Hello, Next.js!}Pagespage.js는 경로에 고유한 UI 이다.컴포넌트를 내보내는 페이지를 정의할 수 있다.ex) index 페이지를 ..

• format_list_bulleted FE/NextJS
• · 2024. 11. 14.
• textsms

NextJS 공식문서 파헤치기 (Routing Fundamentals)

라우팅 기본 사항1️⃣ App RouterNextjs 13 버전에서 React Server Components 를 기반으로 새롭게 구축 하였다.app 이라는 이름의 디렉토리를 통해 기본 레이아웃을 정의한다.기본적으로 내부 컴포넌트는 React Server Components 이다. use client 예약어를 사용하여 Client Components를 사용할 수도 있다.(Server Components에 대한 자세한 내용은 추후에 다루도록 하겠다.)2️⃣ 폴더와 파일의 역할폴더는 경로를 정의하는 데 사용된다.파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용된다.경로의 각 폴더는 경로 세그먼트를 나타낸다. 각 경로 세그먼트는 URL 경로 의 해당 세그먼트 에 매핑된다.파일 이름 규칙layout: 세그..

• format_list_bulleted FE/NextJS
• · 2024. 11. 13.
• textsms