Frontend/Next.js

[Next.js] 공식문서 공부 기록(Chapter. 10 ~ 16)

yjwoo 2023. 12. 10. 12:45

 

 

 

 

Learn Next.js: Partial Prerendering (Optional) | Next.js

An early look into Partial Prerendering and how it works.

nextjs.org

 

 

 

 

Partial Prerendering

  • Next.js 14에서 실험 중인 기능
  • 소셜미디어에서 포스팅은 static, 좋아요는 dynamic인 것처럼 dynamic + static 콘텐츠를 조합할 수 있음
  • 정적 로딩 셸을 사용하여 경로를 렌더링하면서 일부 부분을 동적으로 유지할 수 있는 실험적 기능으로, 경로의 동적 부분을 분리할 수 있습니다.
  • React의 Concurrent API를 활용하고 Suspense를 사용하여 특정 조건(예: 데이터가 로드될 때까지)이 충족될 때까지 애플리케이션의 일부 렌더링을 연기합니다.

Search and Pagination

  • URL search params 사용 이점
    • 북마크 및 공유 가능한 URL: 검색 매개변수가 URL에 있으므로 사용자는 검색 쿼리 및 필터를 포함한 애플리케이션의 현재 상태를 북마크에 추가하여 나중에 참조하거나 공유할 수 있습니다.
    • 서버 측 렌더링 및 초기 로드: URL 매개변수를 서버에서 직접 사용하여 초기 상태를 렌더링할 수 있으므로 서버 렌더링을 더 쉽게 처리할 수 있습니다.
    • 분석 및 추적: 검색 쿼리와 필터를 URL에 직접 넣으면 추가적인 클라이언트 측 로직 없이도 사용자 행동을 더 쉽게 추적할 수 있습니다.
  • useSearchParams
    • /dashboard/invoices?page=1&query=pending → 결과: {page: '1', query: 'pending'}
  • usePathname
    • /dashboard/invoices → 결과: '/dashboard/invoices'
  • useRouter
    •  클라이언트 구성 요소 내에서 프로그래밍 방식으로 경로 간 탐색 가능
  • Next.js의 클라이언트 측 탐색 기능 덕분에 페이지를 다시 로드하지 않고도 URL이 업데이트됩니다.
  • defaultValue vs value / Controlled vs. Uncontrolled
    • state를 사용해 입력의 값을 관리하는 경우, value 속성을 사용해 제어되는 컴포넌트로 만들 수 있습니다. 이는 React가 입력의 상태를 관리한다는 것을 의미합니다.
    • 하지만 state를 사용하지 않는다면 defaultValue를 사용할 수 있습니다. 이는 네이티브 입력이 자체 상태를 관리한다는 뜻입니다. state 대신 URL에 검색 쿼리를 저장하기 때문에 괜찮습니다.
  • useSearchParams() vs serachParams
    • <Search>는 클라이언트 컴포넌트이므로 클라이언트에서 파라미터에 액세스하기 위해 useSearchParams() 훅을 사용했습니다.
    • <Table>은 자체 데이터를 가져오는 서버 컴포넌트이므로 페이지에서 컴포넌트로 searchParams 프로퍼티를 전달할 수 있습니다.
    • 일반적으로 클라이언트에서 매개변수를 읽으려면 서버로 돌아갈 필요가 없으므로 useSearchParams() 훅을 사용합니다.

 

  • Debouncing
  • 함수가 실행될 수 있는 속도를 제한하는 프로그래밍
    1. 이벤트 트리거: 검색창의 키 입력과 같이 디바운스되어야 하는 이벤트가 발생하면 타이머가 시작됩니다.
    2. 대기: 타이머가 만료되기 전에 새 이벤트가 발생하면 타이머가 재설정됩니다.
    3. 실행: 타이머의 카운트다운이 끝나면 디바운스된 함수가 실행됩니다.

Mutating Data

  • React 서버 액션을 사용하면 서버에서 직접 비동기 코드를 실행할 수 있습니다. 데이터를 변경하기 위해 API 엔드포인트를 만들 필요가 없습니다. 대신 서버에서 실행되고 클라이언트 또는 서버 컴포넌트에서 호출할 수 있는 비동기 함수를 작성하면 됩니다.

 

Error Handling

  • error.tsx 파일 작성
    • 모든 에러를 처리하는 파일
    • "use client": 클라이언트 컴포넌트여야 함
    • error: 이 객체는 자바스크립트의 기본 오류 객체의 인스턴스입니다.
    • reset: 오류 경계를 재설정하는 함수입니다. 이 함수가 실행되면 경로 세그먼트를 다시 렌더링하려고 시도합니다.
  • notFound: 404 에러 발생시 사용

 

Authentication

  • 보안 웹사이트에서는 사용자의 신원을 확인하기 위해 여러 가지 방법을 사용하는 경우가 많습니다. 예를 들어, 사용자 이름과 비밀번호를 입력한 후 사이트에서 인증 코드를 디바이스로 보내거나 Google 인증기와 같은 외부 앱을 사용할 수 있습니다. 이러한 2단계 인증(2FA)은 보안을 강화하는 데 도움이 됩니다. 누군가 내 비밀번호를 알아내더라도 고유 토큰 없이는 내 계정에 액세스할 수 없습니다.

  • Authentication(인증) vs Authorization(권한 부여)
    • Authentication(인증): 사용자가 자신이 말한 사람이 맞는지 확인하는 것입니다. 사용자 이름과 비밀번호와 같은 정보를 통해 신원을 증명하는 것입니다.
    • Authorization(권한 부여): 권한 부여는 다음 단계입니다. 사용자의 신원이 확인되면 권한 부여를 통해 애플리케이션의 어떤 부분을 사용할 수 있는지 결정합니다.
  • NextAuth.js
// NextAuth 설치
npm install next-auth@beta

// 비밀 키 생성
openssl rand -base64 32

 

 

Metadata

  • 메타데이터란 무엇인가요?
    • 웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부 정보를 제공합니다. 메타데이터는 페이지를 방문하는 사용자에게는 표시되지 않습니다. 대신 페이지의 HTML, 일반적으로 <head> 요소 내에 포함된 백그라운드에서 작동합니다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요합니다.
  • 메타데이터가 중요한 이유는 무엇인가요?
    • 메타데이터는 검색 엔진과 소셜 미디어 플랫폼이 웹페이지에 더 쉽게 접근하고 이해할 수 있도록 웹페이지의 SEO를 향상시키는 데 중요한 역할을 합니다. 적절한 메타데이터는 검색 엔진이 웹페이지를 효과적으로 색인화하여 검색 결과에서 웹페이지의 순위를 높이는 데 도움이 됩니다. 또한 오픈 그래프와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 콘텐츠가 사용자에게 더욱 매력적이고 유익한 정보가 되도록 합니다.

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};