메타데이터는 SEO 및 공유성에 매우 중요하다. 이 장에서는 Next.js 애플리케이션에 메타데이터를 추가하는 방법에 대해 설명한다. 이번 장에서 다룰 주제는 아래와 같다. 메타데이터란? 메타데이터 유형. 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법 메타데이터를 사용하여 파비콘을 추가하는 방법 메타데이터란? 웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부정보를 제공한다. 페이지를 방문하는 사용자에게는 메타데이터가 표시되지 않는다. 대신 페이지의 HTML, 일반적으로 엘리먼트에 포함되어 뒤에서 작동한다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요하다. 메타데이터가 왜 중요한가? 메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할..

이전 장에서는 폼 유효성 검사를 추가하고 접근성을 향상하여 송장 경로 구축을 완료했다. 이 장에서는 대시보드에 인증을 추가한다. 이번 장에서 다룰 주제는 아래와 같다. 인증이란? 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..