Next.js (23) 썸네일형 리스트형 [Next.js] Client Rendering 파일 상단에 "use client"를 정의하여 사용한다.자식 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다. 장점상호작용성: 클라이언트 컴포넌트는 상태, 효과 및 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트할 수 있습니다.브라우저 API: 클라이언트 컴포넌트는 지리적 위치나 로컬 스토리지와 같은 브라우저 API에 액세스할 수 있습니다. client rendering 방법1. full page load: server rendering와 동일하다.2. subsequent navigation: 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 전적으로 클라이언트에서 렌더링 된다. 즉, 클라이언트 컴포넌트 자바스크립트.. [Next.js] Server Components 기본적으로 Next.js는 서버 컴포넌트를 사용한다. 따라서 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요한 경우 클라이언트 컴포넌트를 사용하도록 선택할 수 있다. 장점데이터 가져오기: 데이터 가져오기를 데이터 소스에 더 가까운 서버로 옮길 수 있다. 즉 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트의 요청 횟수를 줄여 성능을 향상시킬 수 있다.보안: 토큰 및 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험 없이 서버에 보관할 수 있다.캐싱: 서버에서 렌더링하면 결과를 캐시하여 후속 요청 및 사용자 전체에서 재사용할 수 있다. 이렇게 하면 각 요청에서 수행되는 렌더링 및 데이터 가져오기 양을 줄여 성능을 개선하고 비용을 절감할 수 있다. 성능: 기본적으.. [Next.js] Fetching, Caching, Revalidating Fetch자동으로 memoize 기능이 있다.Router handlers는 memoize 기능이 없다.server action의 경우 기본적으로 캐시는 제공되지 않는다.(no-cached) Revalidating Data시간 간격을 지정하여 새로운 데이터를 패칭하는 경우 next.revalidate 옵션을 사용한다.Segment Config Options로 모든 캐시를 한번에 갱신할 수도 있다.tags로 태그를 지정하여 revalidateTag를 불러 태그에 연결된 모든 항목을 갱신할 수 있다. (On-demand revalidation)데이터가 갱신되는 동안 오류가 발생하면 이전 데이터를 계속 캐시로 저장하고 있다. fetch를 제공하지 않는 라이브러리 Route Segment Config Option.. [Next.js] Middleware 미들웨어가 효율적으로 작동하는 예시인증 및 권한 부여: 특정 페이지 또는 API 경로에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하고 세션 쿠키를 확인서버 측 리디렉션: 특정 조건(예: 로캘, 사용자 역할)에 따라 서버 수준에서 사용자를 리디렉션경로 재작성: 요청 속성에 따라 API 또는 페이지에 대한 경로를 동적으로 다시 작성하여 A/B 테스트, 기능 롤아웃 또는 레거시 경로를 지원봇 탐지: 봇 트래픽을 감지하고 차단하여 리소스를 보호로깅 및 분석: 페이지 또는 API에서 처리하기 전에 요청 데이터를 캡처하고 분석하여 인사이트를 얻음기능 플래깅: 원활한 기능 출시 또는 테스트를 위해 동적으로 기능을 활성화 또는 비활성화 미들웨어 사용을 권장하지 않는 경우복잡한 데이터 가져오기 및 조작무거운 .. [Next.js] Intercepting Routes Intercepting Routes: 라우트를 가로채서 실행규칙(폴더)- (.) 같은 레벨- (..) 한 레벨 위- (..) (..) 두 레벨 위- (...) root app 부분ex) (..)photo : photo 폴더의 랜더링을 가로채겠다. intercepting routes + parallel routes로 modal을 구현하면 다음과 같다.x 표시를 누르지 않으면 닫히지 않는다.뒤로, 앞으로를 누르면 제자리에 위치해 있다.새로고침을 누르면 가로채진 페이지만 나타난다. -> 위에 모달이 올라간 모습이 아니다.@modal은 라우터에 포함되지 않으므로 photo와 (..)photo는 같은 단계에 있다. [Next.js] Parallel Routes Slots: @폴더이름slots를 사용하여 한 페이지에서 일부분을 동시에 라우팅할 수 있다.route segments가 아니므로 URL 주소에 포함되지 않는다.레이아웃의 props로 내려간다. slot 안에 레이아웃을 추가하여 독립적으로 탐색할 수 있다. 탭을 만들 때 유리하다. Active state and navigation소프트 탐색(navigation): 클라이언트 측 탐색 중에 Next.js는 부분 렌더링을 수행하여 슬롯 내의 하위 페이지를 변경하는 동시에 다른 슬롯의 활성 하위 페이지는 현재 URL과 일치하지 않더라도 유지한다. html을 완전히 새로 만들지 않고, 새로고침을 하지 않아도 렌더링 할 수 있다.(Link)하드 탐색(navigation): 전체 페이지 로드(브라우저 새로 고침).. [Nest.js] Dynamic Routes Dynamic segments: 대괄호로 표시한다. 요청 시간에 사용된다.레이아웃, 페이지, 라우팅 및 생성 메타데이터 함수에 매개변수 프로퍼티로 전달된다. Generating Static Params: generateStaticParams 함수로 실행하며 빌드 시점에 dynamic segments와 함께 사용된다.fetch를 사용하여 generateStaticParams를 사용하면 자동으로 memoized된다.레이아웃과 페이지가 한번만 생성되므로 빌드 시간을 단축시킨다. Catch-all Segments[...slug]처럼 표시하는 경우 이 segments 이후의 값에 상관 없이 모두 포함된다.[[...slug]]처럼 표시하는 경우 이 segments 이후에 값에 상관 없이 + 값이 없는 경우 모두 포.. [Next.js] Project Organization 페이지 주소app 라우팅은 경로를 잘못 설정할 가능성을 줄어준다.page 라우팅은 페이지 폴더 내부의 모든 파일이 라우트 역할을 하며, app 라우팅과 다르다. Private Folders폴더 이름 앞에 언더바(_)를 넣으면 라우팅에서 제외된다. 기타 항목은 지원하는 항목에 해당되며 프로젝트에 어떻게 적용하는 가는 선택에 맡겼다. [Next.js] Route Groups Route Grups: (폴더이름)폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있다.URL 경로 구조에 영향을 주지 않고, 경로 세그먼트와 프로젝트 파일을 논리적 그룹으로 구성할 수 있다. 괄호 표시된 폴더 이름은 경로에서 제외된다.그러나 layout.js를 폴더 안에 포함시킬 수 있으므로 여러 layout을 중첩하여 사용하기에 용이하다. 여러개의 Root layout.js 폴더가장 바깥쪽의 layout.js를 제거하고 각 경로 내에 layout.js를 추가한다.각 루트 레이아웃은 html, body tag가 필요하다.완전히 다른 UI 섹션으로 구분할 때 사용된다.루트레이아웃이 다른다면 페이지를 이동할 때 전체 렌더링이 발생한다. (보통 내부의 페이지만 렌더링 되었음) [Next.js] Redirecting redirect: redirect('post/${id}')try/catch문 밖에서 사용해야 한다. 내부에서 오류를 반환하기 때문이다.렌더링 프로세스 중에 클라이언트 컴포넌트에서 호출할 수 있지만 이벤트 핸들러에서는 호출할 수 없다.라우터 훅을 사용할 수 있다.외부 링크로 리디렉션하는 데 사용할 수 있다.렌더링 프로세스 전에 리디렉션하려면 next.config.js 또는 미들웨어를 사용해야 한다.next.config.js 파일의 리디렉션 옵션: 들어오는 요청 경로를 다른 대상 경로로 리디렉션할 수 있다. 페이지의 URL 구조를 변경하거나 미리 알고 있는 리디렉션 목록이 있을 때 유용하다. 리디렉션은 경로, 헤더, 쿠키, 쿼리 매칭을 지원하므로 들어오는 요청에 따라 유연하게 사용자를 리디렉션할 수 있다. .. 이전 1 2 3 다음
