2023년 10월 27일

1. Routing

1-1. Terminology

• 계층 구조 용어

  

• URL 구조 (예 abc.com/dashboard/settings)

  • URL Segment: 슬래시로 구분된 URL 경로, 위에 dashboard 혹은 settings 모두가 URL 세그먼트
  • URL Path: 도메인 뒤에 오는 부분, 세그먼트로 구성되어있다. 위 예시중 도메인 abc.com 뒤 dashboard/settings가 URL 패쓰

1-2. The app Router

• app 라우터와 page 라우터 둘 다 존재 시 app 라우터가 우선 순위가 높고 동일한 경로 존재 시 빌드 에러가 발생한다.
• 기본적으로 모든 컴포넌트는 서버 컴포넌트이다.

1-3. Component Hierarch

• 예약 파일(특수 파일)은 특정 계층 구조로 렌더링된다.

  Next13_Building_Your_Application_Routing_02.avif

• 중첩된 경우 세그먼트 구성 요소는 상위 세그먼트의 구성 요소 안에 중첩된다.

  Next13_Building_Your_Application_Routing_03.avif

1-4. Colocation

• 프로젝트 디렉토리 구조는 기존과 같이 사용할 수 있다. URL에 매핑되는 파일은 page.js 혹은 route.js만 매핑되기 때문이다.

  Next13_Building_Your_Application_Routing_04.avif