3. Client ComponentsClient Components는 Server에서 사전에 렌더링되고 브라우저에서 Javascript를 실행 시킬 수 있는 상호 작용 가능한 UI를 만들 수 있게 한다. 3-1. Benefits of Client Rendering상호 작용성 : Client Components는 state, effects, event listener 등을 사용할 수 있다. 이는 사용자에게 즉각적인 피드백과 UI 제공이 가능하다는 의미.Browser API : Client Components는 Browser API에 접근이 가능하다. (localStorage, geolocation 등..) 3-2. Using Client Components in Next.js"use client" 지시어를..

2. Server ComponentsReact Server Components는 렌더링할 수 있고 선택적으로 Server에서 캐싱할 수 있는 UI를 만들 수 있게 한다.Next.js에서는 route segnets로 분할 되어 Streaming, 부분 렌더링을 지원한다.Server 렌더링 전략으로 3가지가 있다.Static RenderingDynamic RenderingStreaming 2-1. Benifits of Server RenderingData FetchingServer Components는 Data fetching을 서버에서 data source와 가깝게 수행할 수 있다.이는, 렌더링에 필요한 데이터를 fetching하는 데 있어서 시간과 Client의 요청 수를 줄이고 성능을 향상 시킬 수 있..

1. RenderingRendering은 작성한 코드가 UI로 변환되는 과정을 의미.React와 Next.js는 코드가 Server 혹은 Client에서 렌더링될 수 있는 하이브리드 웹 애플리케이션을 지원.1-1. Fundamentals시작하기에 앞서, 익숙해지면 좋은 web의 기본적인 컨셉.코드가 실행될 수 있는 환경은 Server와 Client이다.사용자가 방문하거나 상호작용을 통해 요청과 응답 생명주기가 시작된다.네트워크 경계를 통해 Server와 Client 코드를 구분한다.1. Rendering Environments웹 애플리케이션에서 Client와 Server에서 렌더링이 가능하다.Client는 애플리케이션 코드에 대한 요청을 서버로 보내고 UI를 받는 사용자 장치의 브라우저를 의미.Serve..

3. Data Fetching Patterns and Best PracticesReact와 Next.js에서 추천할 만한 Data Fetching 방법을 소개한다.아주 일반적인 패턴을 어떻게 사용하는 지 소개한다.3-1. Fetching data on the Server가능하면, Server Componente와 함께 Server에서 Data fetching 하는 것을 추천한다.database와 같이 backend resources에 직접 접근이 가능.Client에 민감한 정보를 노출시키지 않아 보안 향상.data fetch와 render를 Server에서 함께 수행하면, client와 server 사이의 이동이 줄어들기 때문에 성능 우수.Client에서 요청마다 data fetch하는 대신 Server..

2. Server Actions and MutationsServer Actions는 Server에서 실행되는 비동기 함수를 의미.Server Components, Client Componenets에서 사용될 수 있으며, 폼 제출, Mutations 처리 등을 한다.2-1. Convention비동기 함수 내부의 최상단 또는 분리된 파일 내 최상단에 "use server" 지시어로 Server Actions를 정의할 수 있다.1. Server Components// Server Componentexport default function Page() { // Server Action async function create() { 'use server' // ... } return ( ..

1. Data Fetching, Caching, and RevalidatingData Fetching은 application에서 가장 중요한 부분이다.Data Fetching을 위한 4가지 방법.Server에서 fetch 사용Server에서 third-party libraries 사용 (ex. axios)Client에서 Route Handler 사용Client에서 third-party libraries 사용 (ex. swr, react-query)1-1. Server에서 fetch 사용.Next.js에서는 Web API의 fetch를 확장해서, 각 요청마다 caching과 revalidating 설정을 할 수 있도록 제공.React Component tree가 렌더링 될 때, 동일한 API 요청에 대해선..

14. InternationalizationNext.js는 다국어를 지원한다.14-1. 용어Locale : 언어 및 서식 설정에 대한 식별자로, 사용자의 언어와 지리적 가능성을 포함.en-US : 미국식 영어nl-NL : 네덜란드식 네덜란드어nl : 일반 네덜란드어14-2. Routing브라우저 상의 사용자 기본 언어 설정을 선택하는 것이 베스트. 언어 정보가 변경되면 Accept-Language header에 정보가 담긴다.import { match } from '@formatjs/intl-localematcher'import Negotiator from 'negotiator' let headers = { 'accept-language': 'en-US,en;q=0.5' }let languages = n..

13. MiddlewareMiddleware는 요청이 완료되기 전에 코드를 실행시킬 수 있는 환경을 제공한다.사용자 요청을 기반으로 응답을 재작성하거나, request or response header를 수정하거나 바로 응답하는 등의 작업이 가능하다.Caching Content와 Route가 발생하기 전에 실행된다.13-1. Use Cases사용하면 좋은 경우.인증 및 인가 : Route handler or Page에 접근하기 전에 session cookies를 확인하여 사용자 신원에 대한 인증 및 인가.Server Side Redirect : Server Level에서 조건에 따라 사용자를 Redirect.Path 재생성 : A/B Test, 신규 기능 적용, legacy path 변경 등 요청 정보에..

12. Route HandlerRoute Hnadler는 Web Request, Response API를 이용해서 custom request handler를 만들 수 있게 도움을 준다.Route Handler는 app directory에서만 유효하며, page directory의 API Route와 동일한 개념이다.Route Handler는 route.js | ts로 명명해야 하며, page와 동일한 level에서 함께 존재할 수 없다. (ex. app/settings/page.tsx가 있으면, Route Handler는 있으면 안된다.)GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS HTTP Methods 지원하고, 그 외 Method는 405 Method Not All..

외전. Intercepting Routes과 Parallel Routes 실습Parallel Routes와 Intercepting Routes는 완전히 처음 보는 개념이라 이해하는 데 어려움이 있다.항상 새로운 개념을 보면, 원론적인 동작 방식은 ~~해서 ~~이렇다.고 이해는 가지만, 그래서 이걸 언제? 어떻게 효율적으로 사용할 수 있는가?라는 질문이 계속해서 떠오른다.ㅠㅠㅠㅠㅠ그래서 일단, 공식 문서 Modal 예제를 통해 개념적인 내용만 구현해보고 추후 개인 프로젝트를 통해 고민해보아야 겠다.이거 실습하다가 잠깐 막혔는데, 혹시 참고하실 분들은 참고해보세요.문제 상황: slot 구성 후 intercept page를 Fragment 태그로 대충 감싸서 테스트용 페이지 만듬 -> Link로 해당 페이지..