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 ( ..

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로 해당 페이지..

11. Intercepting RoutesIntercepting Routes는 사용자의 Context 변화 없이 현재 레이아웃 안에서 Application에 존재하는 다른 부분으로의 route가 가능하도록 해줌.예를 들어, 피드 안에서 게시물을 클릭했을 때, /feed 라는 URL을 마스킹하고 /photh/123 URL로 Route를 시킬 수 있다. (Modal 구조)그러나, 공유된 URL 혹은 페이지 새로 고침 시 Modal이 나타나는 것이 아닌, photo에 대한 게시글이 전체 페이지에 로드되어야 하며 route interceptor가 발생하면 안된다 -> route interceptor 발생 (Modal open), 새로 고침 혹은 공유 URL (원래 의도된 페이지로 접근)(..)을 사용해서 정의할..

10. Parallel RoutesParallele Routes는 하나의 레이아웃에 여러 page를 조건부 혹은 동시에 렌더링할 수 있게 해주는 기능.10-1. SlotsParallele Route는 slots를 사용해 만들 수 있으며, @folderName 처럼 정의할 수 있다. 위 사진에선, analytics와 team slots를 만들었다.export default function Layout({ children, team, // slots analytics, // slots}: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode}) { return ( {children} ..

9. Dynamic Routes사전에 정확한 segment 명칭을 알 수 없거나, 동적 데이터를 활용해서 route를 생성하고자 할 때 buildTime에 prerendered 되거나 요청 시 동적으로 segment를 채워주는 Dynamic Routes를 사용할 수 있다.[folderName]과 같이 대괄호를 이용해 생성할 수 있으며, params prop 형태로 layout, page, route, generateMetadata function에 전달된다.9-1. Exampleexport default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug}}app/blog/[slug]/page.js ..