본문 바로가기
반응형

분류 전체보기

 (399)
[nextjs] 13. 폼과 변이(Form and Mutations) - 서버액션 활용 예시 폼과 변이(Form and Mutations) 폼을 사용하면 웹 애플리케이션에서 데이터를 생성하고 업데이트할 수 있습니다. Next.js는 서버 액션(Server Actions)을 사용하여 폼 제출 및 데이터 변이를 강력하게 처리할 수 있는 방법을 제공합니다. 서버 액션이 어떻게 동작하는지 서버 액션을 사용하면 API 엔드포인트를 수동으로 생성할 필요가 없습니다. 대신 컴포넌트에서 직접 호출할 수 있는 비동기 서버 함수를 정의합니다. 서버 액션은 서버 컴포넌트에서 정의하거나 클라이언트 컴포넌트에서 호출할 수 있습니다. 서버 컴포넌트에서 액션을 정의하면 JavaScript가 없어도 폼이 작동하여 점진적으로 향상됩니다. next.config.js 파일에서 Server Actions을 활성화하세요: // ne..
[next.js] 12. 데이터 가져오기 패턴 본 내용은 next.js 공식 문서를 한글로 번역하여 정리한 자료입니다. 자세한 내용은 공식 사이트를 참조해 주세요. https://nextjs.org/docs/app/building-your-application/data-fetching/patterns Data Fetching: Data Fetching Patterns | Next.js There are a few recommended patterns and best practices for fetching data in React and Next.js. This page will go over some of the most common patterns and how to use them. If you need to use the same data (..
[nextjs] globalThis 형식에 인덱스 시그니처가 없다는 타입에러가 뜰 때 현황 next.js 강의를 듣던 중 아래와 같이 타입스크립트, nextjs 환경에서 몽고DB 를 서버와 연결 시 global._mongo 에서 globalThis 형식에 인덱스 시그니처가 없다는 타입에러가 발생 하였다. 원인을 찾아보니 , globalThis 라는 변수에 접근 시 _mongo 라는 속성이 존재하지 않음으로 이를 전역적으로 사용하고 있다는 것을 타입스크립트에 알려주어야 해결할 수 있음을 알게 되었다. import { MongoClient } from 'mongodb' const url = process.env.DB_URL_STRING const options = { useNewUrlParser: true } let connectDB; if (process.env.NODE_ENV === 'd..
[next.js] 11. Data Fetching, Caching, and Revalidating next.js 공식 사이트 문서를 번역하여 정리한 내용입니다. 자세한 내용은 공식 사이트를 참고해주세요. https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating 데이터 가져오기, 캐싱 및 재유효화 데이터 가져오기는 모든 응용 프로그램의 핵심 부분입니다. 이 페이지에서는 React 및 Next.js에서 데이터를 가져 오고, 캐시하고, 데이터를 재유효화하는 방법을 살펴봅니다. 데이터를 가져 오는 방법은 다음과 같이 네 가지가 있습니다. - 서버에서 fetch를 사용하여 - 서버에서 서드파티 라이브러리를 사용하여 - 클라이언트에서 Route 핸들러를 통해 - 클라이언트에서 서드파티 라..
[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 구성 요소를 내..
반응형

티스토리툴바