Je개발 일지

Next.js 는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션의 성능을 향상시키고 비용을 절감한다. 이 페이지에서는 Next.js 의 캐싱 메커니즘, 이를 구성하는데 사용할 API, 그리고 이것들이 어떻게 상호작용하는지에 대해서 설명한다. 이 페이지는 Next.js 내부 작동 방식을 이해하는데 도움을 주되, Next.js 를 효과적으로 사용하기 위한 필수 지식은 아니다. Next.js 의 캐싱 휴리스틱은 대부분 API 사용에 의해 결정되며, 최소한의 구성으로도 최적의 성능을 제공하도록 기본 값이 설정돼 있다. 1. 개요 메커니즘 무엇을 어디서 목적 지속 시간 요청 Memoization 함수들의 반환 값 서버 React 컴포넌트 트리에서 데이터를 재사용 요청 수명 주기 당 데이터 캐시 데이터 서버 사..

React 애플리케이션을 빌드할 때 애플리케이션이 서버에서 렌더링돼야할지, 클라이언트에서 렌더링해야할지에 대한 고려를 해야 한다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트를 어느 때에 사용해야할지 몇가지 추천하는 복합 패턴들을 소개한다. 1. 서버 컴포넌트, 클라이언트 컴포넌트 사용 시기 요약 필요한 작업 서버 컴포넌트 클라이언트 컴포넌트 데이터 Fetching O X 백엔드 자원에 직접적으로 접근 O X 민감한 정보를 서버에서 유지 (Access Toiken, API Key 등) O X 서버에 의존성이 큰 경우와 클라이언트 사이드 JS 크기를 줄이고자 할 때 O X 상호작용 및 이벤트 리스너 추가 (onClick, onChange) X O 상태 및 생명주기 이펙트 사용 (useState, u..

클라이언트 컴포넌트를 사용하면 서버에서 사전에 렌더링된 UI 를 상호작용 가능하게 만들어주며 브라우저에서 클라이언트 JS 를 실행시킬 수 있다. 1. 클라이언트 렌더링의 장점 클라이언트에서 렌더링 작업을 수행하면 몇 가지 이점이 존재한다. 상호작용 : 클라이언트 컴포넌트는 상태, 효과, 이벤트 리스너를 사용할 수 있다. 따라서 사용자에게 즉각적인 피드백을 제공하고 UI 를 업데이트 할 수 있다. 브라우저 API : 클라이언트 컴포넌트는 브라우저 API 에 접근할 수 있다. 예를 들면, **geolocation** 이나 **localStorage** 등이 있다. 2. Next.js 에서 클라이언트 컴포넌트 사용하기 클라이언트 컴포넌트를 사용하기 위해서는 React 의 **use client** 디렉티브를 ..

React 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI 를 작성할 수 있다. Next.js 에서는 경로 Segement 별로 렌더링 작업을 추가로 분할해서 Streaming 과 부분 렌더링이 가능하게 한다. 서버 렌더링에는 세 가지 전략이 있다. 정적 렌더링 동적 렌더링 Streaming 이 페이지에서는 서버 컴포넌트가 어떻게 작동하는지, 언제 사용하는지와 다양한 서버 렌더링 전략에 대해 설명한다. 1. 서버 렌더링의 이점 서버 렌더링에서 렌더링 작업을 하면 여러 이점이 있다. (* 이점은 중요하니 공식문서와 다르게 소주제로 다룬다) 1-1) 데이터 가져오기 서버 컴포넌트를 사용하면 데이터 소스에 더 가까운 서버로 데이터를 가져올 수 있다. 렌더링에 필요한 데이터를 가져오..

렌더링은 작성한 코드를 사용자 인터페이스로 바꾸는 과정이다. React 와 Next.js 를 사용하면 서버 혹은 클라이언트에서 렌더링 할 수 있는 하이브리드 웹 어플리케이션을 만들 수 있다. 이번 섹션에서는 렌더링 환경, 전략, 런타임의 차이점을 이해하는데 도움을 준다. 1. 기본 시작하기에 앞서 세 가지 기본 웹 컨셉을 이해하는 것이 좋다. 환경 : 애플리케이션 코드가 실행될 수 있는 환경. 서버와 클라이언트 요청-응답의 라이프사이클 : 사용자가 애플리케이션을 방문하거나 상호 작용할 때 실행 네트워크 바운더리(경계): 서버 코드와 클라이언트 코드를 구분하는 경계 1-1) 렌더링 환경 웹 애플리케이션은 서버, 클라이언트 두 환경에서 렌더링 될 수 있다. 클라이언트라 함은 사용자 디바이스에 있는 브라우저다..

미들웨어는 요청이 완료되기 전에 코드를 실행한다. 그 다음 들어오는 요청을 기반으로 응답을 수정하거나, 다시 쓰거나, 리다이렉션하거나 request 혹은 response 의 헤더를 수정하거나 직접 응답할 수 있다. 미들웨어는 캐시된 내용과 경로가 일치하기 전에 실행된다. 1. 사용 사례 미들웨어를 어플리케이션에 통합하면 성능, 보안, 사용자 경험을 향상시킬 수 있다. 미들웨어가 특히 효과적인 시나리오는 다음과 같다. 인증 및 권한 부여 : 특정 페이지 혹은 API 경로에 액세스하기 전, 사용자를 식별하거 세션 쿠키를 체크한다 서버 사이드 리다이렉션 : 서버 수준에서 특정 조건에 따라 사용자를 리다이렉션 한다 경로 바꾸기 : 요청 속성에 따라서 API 경로 혹은 페이지에 대한 경로를 동적으로 다시 쓰도록 ..

인터셉트 라우트(Intercept Route) 는 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 경로를 보여줄 수 있게 만든다. 이 패러다임은 사용자가 다른 컨텍스트를 전환하지 않고도 경로의 내용을 표시하고 싶을 때 유용하다. 예를 들어, 피드에서 사진을 클릭할 때 사진을 모달로 표시해 피드 위에 겹쳐서 보이게 할 수 있다. 이 경우, Next.js 는 `/photo/123` 의 경로를 가로채서 URL 을 가리고 /feed 위에 덮어 올린다. 하지만, 공유 가능한 URL 을 클릭하거나 페이지를 새로 고쳐서 사진으로 이동할 때는 모달 대신 전체 사진 페이지가 렌더링돼야 한다.(* /photo/123 으로 이동) 이런 경우에는 경로 가로채기가 일어나선 안 된다. 1. 규칙 경로를 가로채는 것은 (..) ..

병렬 라우트(Parallel Routes) 는 동일한 레이아웃 안에서 동시에 혹은 조건부로 하나 이상의 페이지를 렌더링할 수 잇다. 이 방법은 대시보드, 소셜 사이트 피드와 같이 동적인 앱에서 활용도가 매우 높다. 1. Slots 병렬 라우트는 이름이 있는 slot에서 생성된다. slots 은 @ 기호를 사용해서 만든다. 예를 들어, 아래의 파일 구조는 두 개의 슬롯, @analytics 와 @team 으로 구성된 구조다. 슬롯은 부모 레이아웃에 props 로 전달된다. 위의 예시에서, `app/layout.js` 컴포넌트는 이제 @analytics 및 @team 슬롯을 props 로 넘겨 받아 자식 props 와 함께 병렬로 렌더링할 수 있다. // TypeScript export default fun..

빌드 전 정확한 Segement 의 이름을 모르거나, 동적인 데이터로부터 경로를 만들고 싶을 때, 요청시에 채워지거나 빌드 타임에 미리 렌더링되는 Dynamic Segement 를 사용할 수 있다. 1. 규칙 동적 Segement 는 대괄호로 폴더의 이름을 감싸면 된다. 예를 들면 [id], [slug] 동적 Segement 는 layout.js, page.js, route.js 및 generateMetadata 함수의 params 속성으로 전달된다. 2. 예시 예를 들면, 블로그는 다음과 같은 경로를 포함할 수 있다. `app/blog/[slug]/page.js` 여기에서 [slug] 가 블로그 게시물을 위한 동적 Segment 다. export default function Page({ params ..

경로 폴더와 파일 규칙 을 제외하고는 Next.js 는 개발자가 프로젝트 파일을 어덯게 구성하고, 파일을 동일한 위치에 둘 것인지 간섭하지 않는다. 1. 안전한 동일 위치 파일 구성(기본) app 디렉토리에서는 중첩된 폴더 계층 구조가 실제 경로를 정의한다. 각각의 폴더는 경로의 Segement 를 표기하고 이는 URL path 의 Segement 를 표시한다. 하지만 이 경로 구조가 폴더로 정의된다 하더라도, 실제 해당 경로는 page.js 파일이나 route.js 파일이 없으면 사용자에게 공개되지 않는다. 그리고 해당 경로가 공개적으로 접근 가능하다 하더라도 page.js 혹은 route.js 에서 반환된 내용만을 클라이언트로 보낸다. 이것이 의미하는 바는, app 디렉토리 내부에서 파일들을 개발자 ..