이전 장에서는 폼 유효성 검사를 추가하고 접근성을 향상하여 송장 경로 구축을 완료했다. 이 장에서는 대시보드에 인증을 추가한다. 이번 장에서 다룰 주제는 아래와 같다. 인증이란? NextAuth.js를 사용하여 앱에 인증을 추가하는 방법. 미들웨어를 사용하여 사용자를 리디렉션하고 경로를 보호하는 방법. React의 useFormStatus 및 useFormState를 사용하여 보류 상태 및 폼 오류를 처리하는 방법. 인증이란? 인증은 오늘날 많은 웹 애플리케이션의 핵심 부분이다. 이는 시스템이 사용자가 자신이 누구인지 확인하는 방법이다. 보안 웹사이트에서는 사용자의 신원을 확인하기 위해 다양한 방법을 사용하는 경우가 많다. 예를 들어 사용자 이름과 비밀번호를 입력하면 사이트에서 기기로 인증 코드를 보내거..

이전 장에서는 오류(404 오류 포함)를 포착하고 사용자에게 대체 메시지를 표시하는 방법을 살펴보았다. 그러나 여전히 퍼즐의 또 다른 부분인 폼 유효성 검사에 대해 논의가 필요하다. 서버 액션으로 서버측 유효성 검사를 구현하는 방법과 접근성을 염두에 두고 useFormState 후크를 사용하여 폼 오류를 표시하는 방법을 살펴보겠다. 이번 장의 주제는 아래와 같다. 접근성 모범 사례를 구현하기 위해 Next.js와 함께 eslint-plugin-jsx-a11y를 사용하는 방법. 서버 측 폼 유효성 검사를 구현하는 방법. React useFormState 후크를 사용하여 폼 오류를 처리하고 사용자에게 표시하는 방법. 접근성이란? 접근성이란 장애가 있는 사용자를 포함하여 모든 사람이 사용할 수 있는 웹 애플리..

이전 장에서는 서버 액션을 사용하여 데이터를 변경하는 방법을 배웠다. JavaScript의 try/catch 문과 Next.js API를 사용하여 오류를 우아하게 처리하는 방법을 살펴보자. 이번 장의 주제는 아래와 같다. 특수 error.tsx 파일을 사용하여 경로 세그먼트에서 오류를 포착하고 사용자에게 대체 UI를 표시하는 방법. notFound 함수와 찾을 수 없는 파일을 사용하여 404 오류(존재하지 않는 리소스의 경우)를 처리하는 방법. 서버 액션에 try/catch 추가 먼저 오류를 적절하게 처리할 수 있도록 JavaScript의 try/catch 문을 서버 액션에 추가해 보자. 이를 수행하는 방법을 알고 있다면 서버 액션을 업데이트하는 데 몇 분 정도 시간을 투자하거나 아래 코드를 복사할 수 ..

이전 장에서는 URL 검색 매개변수 및 Next.js API를 사용하여 검색 및 페이지네이션을 구현했다. 송장 생성, 업데이트 및 삭제 기능을 추가하여 송장 페이지 작업을 계속해 보자. 이번 장에서 다룰 내용은 아래와 같다. React Server Actions가 무엇이며 이를 사용하여 데이터를 변경하는 방법. 양식 및 서버 컴포넌트로 작업하는 방법. 유형 유효성 검사를 포함하여 기본 formData 개체 작업에 대한 모범 사례. revalidatePath API를 사용하여 클라이언트 캐시를 재검증하는 방법. 특정 ID를 사용하여 동적 경로 세그먼트를 만드는 방법. 낙관적 업데이트를 위해 React의 useFormStatus 후크를 사용하는 방법. 서버 액션이란? React Server Actions를 ..

이전 장에서는 스트리밍을 통해 대시보드의 초기 로드 성능을 개선했다. 이제 /invoices 페이지로 이동하여 검색 및 페이지네이션을 추가하는 방법을 알아보자! 이번 장에서는 아래와 같은 주제를 다룬다. Next.js API(searchParams, usePathname 및 useRouter)를 사용하는 방법을 알아보세요. URL 검색 매개변수를 사용하여 검색 및 페이지네이을 구현합니다. 코딩 시작 /dashboard/invoices/page.tsx 파일 내에 다음 코드를 붙여넣는다. import Pagination from '@/app/ui/invoices/pagination'; import Search from '@/app/ui/search'; import Table from '@/app/ui/inv..

부분 사전 렌더링은 Next.js 14에 도입된 실험적 기능이다. 기능이 안정화되면서 이 페이지의 내용이 업데이트될 수 있다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰어도 된다. 이 장은 전체 과정을 완료하는 데 꼭 필요하지 않다. 이번장에 다룰 주제는 아래와 같다. 부분 사전 렌더링이란? 부분 사전 렌더링의 작동 방식 정적 콘텐츠와 동적 콘텐츠 결합 현재 경로 내에서 동적 함수(예: noStore(), cookie() 등)를 호출하면 전체 경로가 동적이 된다. 이는 오늘날 대부분의 웹 앱이 구축되는 방식과 일치한다. 전체 애플리케이션 또는 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에서 선택한다. 그러나 대부분의 경로는 완전히 정적이거나 동적이지 않다. 정적 콘텐츠와 동적 콘텐츠가 모두 포..