분류 전체보기 (395) 썸네일형 리스트형 [next.js] 10. 미들웨어 이 내용은 next.js 13버전의 공식문서를 한글로 번역한 내용을 토대로 정리되었습니다. 최신 정보와 정확한 내용은 공식 사이트의 문서를 참고해주세요. https://nextjs.org/docs/app/building-your-application/routing/middleware 미들웨어 미들웨어는 요청이 완료되기 전에 코드를 실행하여 응답을 수정할 수 있습니다. 요청에 따라 리디렉션, 재작성, 요청 또는 응답 헤더 수정 또는 직접 응답을 생성할 수 있습니다. 미들웨어는 캐시된 콘텐츠와 라우팅이 일치하기 전에 실행됩니다. 매칭 경로에 대한 자세한 내용은 https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-p.. [next.js] 9. 경로 가로채기 next.js 공식 문서를 번역 후 공부한 내용을 정리한 자료이므로 자세한 내용은 공식 사이트 문서를 참고하세요 경로 가로채기는 현재 레이아웃 내에서 애플리케이션의 다른 부분의 경로를 로드할 수 있게 해주는 것입니다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용합니다. 예를 들어, 피드(feed)에서 사진을 클릭할 때 사진을 모달(modal)로 표시하여 피드 위에 오버레이(overlay)로 표시할 수 있습니다. 이 경우 Next.js는 /photo/123 경로를 가로채고, URL을 가리고, /feed 위에 오버레이(overlay)로 표시합니다. 그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진으로 이동할 때는 모달 대신 전체 사진 페.. [next.js] 8. 병렬 라우팅 next.js 공식 문서를 번역한 내용을 토대로 공부한 자료입니다. 자세한 내용은 공식 사이트를 참고 해주세요. 병렬 경로 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 대시보드 및 소셜 사이트의 피드와 같이 매우 동적인 앱 섹션의 경우 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다. 예를 들어 팀 페이지와 분석 페이지를 동시에 렌더링할 수 있습니다. 병렬 라우팅을 사용하면 경로가 독립적으로 스트리밍될 때 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있습니다. 병렬 라우팅을 사용하면 인증 상태와 같은 특정 조건에 따라 슬롯을 조건부로 렌더링할 수도 있습니다. 이를 통해 동일한 URL에서 완전히 분리된 코드를 사용.. [next.js] 7. 에러 핸들링 해당 내용은 next.js 공식 문서의 영어를 번역하여 정리된 포스트 입니다. 자세한 내용은 공식 사이트를 참고해 주세요. 오류처리 파일 규칙을 사용하면 중첩된 경로error.js 에서 예기치 않은 런타임 오류를 적절하게 처리할 수 있습니다 . - React Error Boundary 에서 경로(path) 세그먼트와 중첩된 하위 항목을 자동으로 래핑합니다. - 세분성을 조정하기 위해 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞는 오류 UI를 만듭니다. - 나머지 애플리케이션 기능을 유지하면서 영향을 받은 세그먼트에 대한 오류를 격리합니다. - 전체 페이지를 다시 로드하지 않고 오류 복구를 시도하는 기능을 추가합니다. error.js 경로 세그먼트 내부에 파일을 추가하고 React 구성 요소를 내.. [next.js] 6. 로딩 UI 와 스트리밍 next.js13 공식 문서 영문을 번역한 내용을 토대로 작성됩니다. 자세한 내용은 공식 사이트를 참고 하세요 로딩 UI와 스트리밍 특별한 파일인 loading.js를 사용하여 React Suspense와 함께 의미 있는 로딩 UI를 생성할 수 있습니다. 이 규칙을 사용하면 라우트 세그먼트의 내용이 로드될 때 즉시 로딩 상태를 서버에서 표시할 수 있습니다. 새로운 내용은 렌더링이 완료되면 자동으로 교체됩니다. 로딩 UI 즉시 로딩 상태 즉시 로딩 상태는 탐색 시 즉시 표시되는 대체 UI입니다. 스켈레톤 및 스피너와 같은 로딩 표시자나 커버 사진, 제목 등의 미래 화면의 작은 but 의미 있는 부분을 사전 렌더링할 수 있습니다. 이를 통해 사용자가 앱이 응답하는 것을 이해하고 더 나은 사용자 경험을 제공할.. [next.js] 5. 동적 라우팅 next.js13 공식문서를 번역하여 공부한 내용을 정리한 것이므로 자세한 내용은 공식 사이트를 참고하세요. 사전에 정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터에서 라우트를 생성하려는 경우, 요청 시간에 채워지거나 빌드 시간에 사전 렌더링되는 동적 세그먼트를 사용할 수 있습니다. 규칙 동적 세그먼트는 폴더 이름을 대괄호로 묶어서 생성할 수 있습니다 --> [ 폴더이름 ]. 예를 들어, [id] 또는 [slug]와 같이 사용할 수 있습니다. 동적 세그먼트는 레이아웃(layout), 페이지(page), 라우트(route), generateMetadata 함수의 params prop으로 전달됩니다. (개인 정리) 이렇게 생성된 params 는 출력 시 {slug : 경로명} 형태로 나타난다. 예를 들.. [next.js] 4. Route Groups (개인 요약) Route Groups 은 폴더명을 (폴더명) 형태로 감싸서 정의하는데, 이렇게 정의된 폴더는 URL 에 아무런 영향을 미치지 않는다. 즉, next.js 에서는 생성된 폴더를 하나의 URL 경로로 인식하기 때문에 만일 shop 이라는 폴더를 만들었다면, http://localhost:5000/shop 이라는 경로가 생성되지만, (shop) 으로 폴더를 생성한다면, http://localhost:5000/ 과 같이 URL는 변동없이 루트 경로만 남게 된다. Route Groups는 다음과 같은 경우에 유용합니다. - 사이트 섹션, 의도 또는 팀별로 라우트를 그룹화하는 경우 - 같은 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화하는 경우: 동일한 세그먼트에 여러 중첩 레이아웃 생성, 여러.. [next.js] 3. Linking and Navigating :: next.js 에서의 라우트 간 이동법 ? Next.js에서 라우트 간 이동하는 방법은 두 가지가 있습니다 컴포넌트 사용 useRouter Hook 사용 이 페이지에서는 , useRouter()를 사용하는 방법을 설명하고, 또한 이동 작동 방식에 대해 더 자세히 살펴보겠습니다. 컴포넌트 는 내장된 컴포넌트로, HTML 태그를 확장하여 라우트 간 사전 로딩 및 클라이언트 측 이동을 제공합니다. 이는 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. next/link에서 가져와서 컴포넌트에 href 속성을 전달하여 사용할 수 있습니다 // app/page.tsx import Link from 'next/link'; export default function Page() { return 대시보드; } 에 전달할 수 있는 다른 선택적 속성도 있.. 이전 1 ··· 24 25 26 27 28 29 30 ··· 50 다음
