Next.js(ver.13)

Intercepting Routes Intercepting Routes은 현재 페이지의 레이아웃을 유지하면서 현다른 페이지의 경로를 불러올 수 있게 해준다. -> 예를 들어 피드 내에서 사진을 클릭하면 피드에 오버레이되는 모달이 사진과 함께 표시되게 하고싶을때 Next.js는 /feed 경로를 가로채고 이 URL을 '마스킹'하여 /photo/123을 대신 표시한다. (경로는 바뀌지만 화면에 비추는 모습은 마치 모달) NextGram nextgram.vercel.app Convention Intercepting Routes는 (..)컨벤션을 따르면 된다. Next개발팀이 ../에서 영감을 받은 듯 하다. (..) 는 파일 시스템이 아니라, route segment다. -> 경로로 작용한다는 소리 사용방법 ..

실험한 깃 레포 https://github.com/JeonInguk/Parallel-Routes-Next-app-router GitHub - JeonInguk/Parallel-Routes-Next-app-router Contribute to JeonInguk/Parallel-Routes-Next-app-router development by creating an account on GitHub. github.com Parallel Routes Parallel Routes의 존재이유는 각 경로가 독립적으로 스트리밍될 때 각 경로에 대해 독립적인 오류 및 로딩 상태를 정의할 수 있다는 점이다. export default function Layout(props: { children: React.ReactNod..

Error Handling error.js는 pgae.js와 같은 Nex.js의 파일컨벤션이다. Error컴포넌트는 반드시 'use client'로 Client Components화 시켜야 한다. 특정 segment에 특정 에러바운더리를 설정할 수 있다. -> segment별로 page.js가 있는 것처럼 전체 페이지를 다시 로드하지 않고 오류에서 복구를 시도하는 기능을 사용할 수 있다. -> reset() loading.js뿐만 아니라 error.js도 컴포넌트별로 다뤄지네 "use client"; // 에러 컴포넌트는 반드시 클라이언트 컴포넌트여야함! import { useEffect } from "react"; export default function Error({ error, reset }: {..

Loading UI and Streaming loading.js는 pgae.js와 같은 Nex.js의 파일컨벤션이다. React의 Suspense개념과 같이 쓰여, 설정한 컴포넌트의 데이터가 서버로부터 받아지지 않았을 때 로딩스피너 혹은 스켈레톤UI와 같은 컴포넌트를 화면에 보여주어, 유저가 로딩중이라는 것을 알 수 있게 해준다. '스트리밍'(일반적인)이란 무엇인가? 갑자기 스트리밍에 대해 강의해준다. SSR의 장단점에 알 수 있단다. 다음은 SSR로 인한 렌더링이 유저의 화면을 통해 보여지고, 유저와 상호작용할 수 있는 단계가 되기 전까지 거쳐야하는 일련의 과정이다. 렌더하고자 하는 페이지에 대한 정보가 서버로부터 fetch됨 서버가 페이지에 대한 HTML을 렌더함 그 렌더한 HTML과 CSS JS가 ..

앱 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 그러나 폴더를 경로 그룹으로 표시하여 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있다. 이렇게 하면 URL 경로 구조에 영향을 주지 않고 경로 세그먼트와 프로젝트 파일을 논리적 그룹으로 구성할 수 있다. (marketing) 및 (shop) 내부의 경로가 동일한 URL 계층 구조를 공유하더라도 해당 폴더에 layout.js 파일을 추가하여 각 그룹에 대해 서로 다른 레이아웃을 만들 수도 있고, 같은 레이아웃을 공유할수도 있다. 루트 레이아웃을 여러 개 만들려면 최상위 layout.js 파일을 제거하고 각 경로 그룹에 layout.js 파일을 추가한다. 이는 애플리케이션을 완전히 다른 UI 또는 경험을 가진 섹션으로 분할하는 데 유..

Linking and Navigating The default behavior of is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. -> 이렇게 해야 하는 이유는 Link의 특성 때문이다. 페이지 이동 시 스크롤을 맨 위로 올리는 게 Link 컴포넌트의 default scroll behavior이기 때문에, scroll={false}를 통해 이 default scroll behavior를 override하겠다는 의사를 밝혀야 한다. id Link와 목적지 div를 연결해주는 값은 id이다. 예를 들어, Link의 href 속성에 #123이라는 값을 넣어..

Layouts VS Templates 템플릿은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사하다. 하지만, 경로 전체에서 지속되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 하위 레이아웃에 대해 새 인스턴스를 생성한다. 즉, 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고, 효과가 다시 동기화된다. Layouts Templates 이번 프로젝트에는 위와 같이 네비게이션바가 들어간다. 사용자가 무엇을 눌렀는지 표시해주는 초록색 버튼은 'state'로 관리된다. template를 사용할 경우 네비게이션 바를 눌러 다른 페이지로 이동했을 때 해당 버튼의 state가 초기화되기때문에 layo..

영어공부도 할겸, 나만의 언어로 바꾸면서 나중에 잊어버릴때마다 찾아볼겸 겸사겸사 작성하는 글입니다. 따라서 오타 및 오역이 있을 수 있으며, 글의 구조가 공식문서와 약간씩 다를 수 있습니다. Defining Routes route(경로)를 어떻게 정의하는지, routes(경로들)어떻게 조직할 것인지 알려주는 글입니다. Defining Routes Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. page.js(타입스크립트라면 ts확장자)파일이 route경로로 접근 가능하도록 만들어줍니다. 이미지가 직관적이므로 이해가 쉽지만, 이런식의 접근방식(파..