RedirectionNext.js에서는 다양한 형태의 Redirect 전략을 제공하고 있습니다. 어떤 방식으로 Redirect를 사용할 수 있는지 알아보도록 하겠습니다. redirect functionredirect는 서버에서 사용하는 메서드로 다른 URL로 이동하는 것을 허용하고 있습니다. 'use server' import { redirect } from 'next/navigation'import { revalidatePath } from 'next/cache' export async function createPost(id: string) { try { // Call database } catch (error) { // Handle errors } revalidatePath('..
용어용어개념기타TreeNext.js의 하이라키 폴더 구조를 뜻함. 폴더가 기본적으로 트리구조를 가짐./dashboard/settings/ (Root segment)dashboard (Segment)settings (Leaf segment)SubTree폴더를 구성하는 트리의 일부분.Root트리나 서브트리의 최상위 부모 폴더.Leaf트리나 서브트리에서 자식 폴더가 없는 폴더. URL Segment URL에서 / 사이에 구분되어져 있는 값 URL Path Domain 이후의 경로 Route Segment 라우트 세그먼트는 폴더 구조에 따라 URL Segment를 구성 ❓App Router 와 Pages Router두 라우터는 하나의 프로젝트에서 동시에 사용이 가능하지만, 겹치는 라우터가 존재하는 경우 App..
Hydration과 Dehydration은 React와 같은 프론트엔드 프레임워크에서 중요한 개념으로, 서버 사이드 렌더링(SSR) 및 클라이언트 사이드 렌더링(CSR)에서 자주 사용됩니다. 이 두 개념을 이해하면 React 애플리케이션의 초기 로딩 성능과 사용자 경험을 개선하는 데 도움이 됩니다. Hydration (수화)Hydration은 서버에서 렌더링된 HTML을 클라이언트(브라우저)에서 React가 다시 활성화하는 과정입니다. 서버 사이드 렌더링(SSR)을 사용하면 초기 HTML이 서버에서 생성되어 클라이언트로 전송되는데, 이 HTML은 React 컴포넌트가 아닌 단순한 HTML입니다. 클라이언트가 이 HTML을 받으면, React는 이 HTML을 '재사용'하고, 이를 기반으로 초기 렌더링을 수..
서버 vs 클라이언트 컴포넌트Next.js 문서에서는 아래와 같은 기준으로 서버와 클라이언트 컴포넌트를 사용하는 것을 제시하고 있습니다. 서버 컴포넌트 패턴서버의 경우 데이터 불러오기, 백엔드 접속 그리고 데이터베이스 접근과 같은 업무를 수행하는데 사용됩니다. 다음은 서버에서 어떠한 작업을 하는 지에 대한 패턴을 보도록 하겠습니다. 컴포넌트 간의 데이터 공유하나의 페이지를 구성하는 여러 컴포넌트가 존재하는데, 이들은 하나의 데이터를 기반으로 렌더링이 되는 컴포넌트들 입니다.이러한 경우, 서버에서는 fetch 또는 리액트 cache 기능을 사용하여 재반복 되는 요청을 지속적으로 불러오는 형식으로 공유가 가능합니다. (캐시가 되어진 데이터를 불러오는 것이므로 중복성 문제가 발생하지 않습니다.)해당 방식이 가..
Client Components 이점상호작용 : 클라이언트 컴포넌트에서는 useState, effects 그리고 이벤트 리스트너 사용. 즉각적으로 유저에게 반응해줄 수 있는 UI 업데이트를 제공 가능.브라우저 API: 클라이언트 컴포넌트에서 geloaction 과 localStorage와 같은 브라우저 API를 사용 가능함. Client Components 사용법use Client를 컴포넌트 상단에 입력하면 해당 컴포넌트 Client Component임을 선언함과 동시에 네트워크 바운더리가 클라이언트 모듈 그래프에 정의합니다. ❓Network Boundary네트워크 바운더리는 렌더링 단계에서 어디에서 렌더링을 수행해야 하는지 구분하기 위한 바운더리를 의미합니다. 영역은 총 두 가지로 client modu..
Next.js 14의 컴포넌트 유형Next.js에서 제공하고 있는 컴포넌트는 아래와 같습니다.Server Component: 서버에서 렌더링되는 컴포넌트.Client Component: 클라이언트에서 렌더링되는 컴포넌트.Composition Component: 서버와 클라이언트 컴포넌트를 조합하여 사용하는 컴포넌트. 서버 렌더링의 장점데이터 요청: 서버에서 데이터를 요청하므로 렌더링에 필요한 시간을 단축 시킬 수 있음.보안: 유저 측에서 데이터에 직접 접근하는 경우에는 token이나 API 키 들을 노출 될 가능성이 있으나, 서버에서 진행하게 되면 이러한 문제를 해결할 수 있음.캐싱: 서버에서 렌더링을 진행하게 된 경우에 결과를 캐싱 해두었다가 같은 요청에는 캐싱된 데이터를 반환함으로서 성능과 효율성을 ..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.