본문 바로가기

분류 전체보기

 (138)
[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 구조를 변경하거나 미리 알고 있는 리디렉션 목록이 있을 때 유용하다. 리디렉션은 경로, 헤더, 쿠키, 쿼리 매칭을 지원하므로 들어오는 요청에 따라 유연하게 사용자를 리디렉션할 수 있다. ..
[Next.js] Loading UI and Streaming loading.js로 로딩 상태 표현loading.js를 폴더 안에 생성하면 layout.js를 제외한 page.js를 suspense로 감싼 형태로 로딩 상태를 표현한다. Streaming with Suspense스트리밍은 각 컴포넌트를 하나의 청크로 간주할 수 있다.컴포넌트를 각각 Suspense로 감싸고 fallback을 사용하여 모두 로딩되기 전 대체되는 UI가 나타날 수 있게 한다. 렌더링 단계1. 서버에서 데이터를 모두 패칭한다.2. 서버가 페이지의 HTML을 렌더링한다.3. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송된다.4. 생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스가 표시된다.5. 마지막으로, React는 사용자 인터페이스에 hydrate하여..
[Next.js] Error Handling error.js 파일로 중첩된 경로의 runtime errors를 처리중첩된 경로에서 error.js로 runtime errors를 처리할 수 있다.에러가 발생한 상위 컴포넌트는 상태를 유지하며, 상호작용할 수 있다. React Error Boundary를 자동으로 생성하며 내부의 모든 컴포넌트에 대한 오류를 처리한다.error.js 내에 에러가 발생했을 때의 UI를 생성하면, 에러가 발생 시 fallback되며 error.js가 리랜더링된다. Layout, Template에서의 error.jsLayout과 Template의 오류 처리는, 같은 수준의 폴더에 있는 error.js가 하지 않는다.그 결과 내부의 컴포넌트 하나가 오류를 반환해도 다른 페이지로 이동을 수월하게 할 수 있다.만약 오류를 처리하고..
[Next.js] Linking and Navigating Nest.js의 라우팅 방법Next.js는 새로운 라우트에 이동할 때 가장 위쪽으로 이동하며, 뒤로가기 또는 앞으로가기로 이동했을 때 스크롤의 위치를 기억한다. 1. Linkprefetching을 제공한다.클라이언트 측 이동(client-side navigation)에 해당한다.* 추천하는 항목이다.* 특정 id로 스크롤하고 싶다면 URL이나 href에 #로 표시하여 나타내면 된다.* 스크롤의 위치를 기억하게 하고 싶지 않다면 Link, router.push(), router.replace()에서 scroll=false로 초기값을 지정한다. 2. useRouter()클라이언트 컴포넌트에서 사용한다.이벤트 핸들러에서 사용해야 할 때 사용한다. 3. redirect function307번이 기본값, 서버에서..
[Next.js] Layouts and Templates Layout레이아웃은 여러 라우트가 공유하는 UI다.페이지와 같은 위치에 있으면 페이지를 감싸며 생성된다.상위폴더와 하위폴더가 모두 레이아웃이 있는 경우 중첩되어 생성될 수도 있다. 레이아웃은 처음 랜더링 후 다시 랜더링되지 않는다.따라서 중첩되는 레이아웃이 있어도 레이아웃간 데이터를 전달할 수 없다. layout.js 파일에서 React 컴포넌트를 내보내 레이아웃 UI를 생성한다.  Root Layout모든 라우트에 적용되는 레이아웃으로 필수적으로 포함해야 한다.또한 html, body tag를 포함해야 한다.Root Layout 이외에는 html, boty tag를 포함할 수 없다.*Layout은 server, client Compnent에 모두 적용할 수 있으나, Root Layout만은 serve..
[Next.js] Routing Next.js에서 라우트를 생성하는 방법홈페이지를 만들다보면 페이지 전환이 필요한 경우가 있다.이때 필요한 것이 라우터다. 라우터는 둘 이상의 패킷 전환 네트워크 또는 서브네트워크를 연결하는 장치를 말한다.Next.js 프로젝트에서는 홈페이지에서 페이지를 이동하는 것에 해당한다. 페이지의 경로는 어떻게 생성될까?React에서는 경로를 일일히 지정해주었지만 Next.js에서는 경로를 설정하는 법칙이 정해져 있다. Next.js의 프록젝트에서 app 폴더 아래에 생성되는 것은 라우트라고 간주된다.app 폴더 아래의 구조에 따라 폴더명을 segment로 URL 경로가 자동으로 생성, 할당된다.페이지는 page.js의 형식으로 생성되어야 하며, page 이외의 다른 이름으로 생성되면 안된다.페이지의 파일 확장자..

티스토리툴바