https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

고급 라우팅 패턴

1. 패럴렐 라우트(Parallel Route)

1) 패럴렐 라우트(Parallel Route)

패럴렐 라우트(Parallel Route)
= 병렬 라우트

• 하나의 화면 안에 여러 개의 페이지를 병렬로 함께 렌더링 시켜주는 패턴
• 하나의 화면 안에 Sidebar 페이지와 Feed 페이지를 함께 렌더링 시켜주는 패턴
  (이때의 '페이지'는 page.tsx 파일에 작성되는 코드를 지칭)

패럴렐 라우트를 위해서는 슬롯 생성 필요

• 이때 슬롯이란 이름 앞에 골뱅이 기호가 붙은 폴더로, 병렬로 렌더링이 될 하나의 페이지 컴포넌트를 보관하는 역할
• 슬롯의 개수에는 제한 X
• 슬롯 안에 새로운 페이지 추가도 가능

패럴렐 라우트 공식문서
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

2) 실습을 위한 환경 준비

1. vscode로 열기
   vscode에서 .../onebite-next/ 폴더로 열기

2. 터미널에서 section08 폴더 생성
   vscode에서 /onebite-next/section08/ 폴더 생성

3. 파일 옮기기
   /onebite-next/section07 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section08 폴더로 옮기기

4. 필요한 모듈 다운로드
   생성된 /section08/ 폴더로 vscode에서 다시 열기
   → vscode 터미널을 열어서 npm i 명령어 실행

5. 개발 모드로 넥스트 앱 실행
   생성된 /section08/ 폴더로 vscode에서 다시 열기
   → vscode의 터미널 열기
   → npm run dev 명령어 실행
   → http://localhost:3000/ 로 이동하면 확인 가능
   → (종료 시에는) Ctrl+D나 Ctrl+C 입력

6. 백엔드 서버 열기
   vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
   → vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

개발 시 의도하지 않은 방색대로 동작한다면 개발 모드 중단 후 .next 폴더를 삭제하고 다시 가동해보기

• 새 폴더 생성: /src/app/parallel/ 폴더 생성

• 새 파일 생성: /src/app/parallel/page.tsx 파일 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/page.tsx

• parallel 라우트 생성을 위해서는 슬롯 생성 필요: /src/app/parallel/%40sidebar/page.tsx 폴더+파일 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40sidebar/page.tsx

• 레이아웃 컴포넌트 수정: /src/app/parallel/layout.tsx 코드 생성

• 슬롯 새로 생성: /src/app/parallel/@feed/page.tsx
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40feed/page.tsx

• 슬롯에 페이지 생성: /src/app/parallel/@feed/setting/page.tsx
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40feed/setting/page.tsx

• 레이아웃 컴포넌트 수정: /src/app/parallel/layout.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/layout.tsx

• 슬롯별로 현재 렌더링할 페이지가 없을 때 대신 렌더링할 default 페이지 생성: /src/app/parallel/@sidebar/default.tsx 코드 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40sidebar/default.tsx

• 슬롯별로 현재 렌더링할 페이지가 없을 때 대신 렌더링할 default 페이지 생성: /src/app/parallel/default.tsx 코드 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/default.tsx

 

2. 인터셉팅 라우트(Inntercepting Route)

1) 인터셉팅 라우트(Inntercepting Route)

인터셉팅 라우트 공식 문서
https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes

• 사용자가 특정 경로로 접속해서 새로운 페이지를 요청할 때 그 요청을 가로채서 원래 렌더링 돼야 하는 페이지가 아닌 우리가 원하는 어떠한 페이지를 대신 렌더링하도록 설정하는 라우팅 패턴
• 사용자가 동일한 경로에 접속하게 되더라도 특정 조건을 만족하게 되면 그때에는 원래 페이지가 아닌 다른 페이지를 렌더링 하도록 설정하는 기술

인터셉팅 라우트를 동작시키는 조건

• Next.js에서 고정적으로 정해둠
  : 초기 접속 요청이 아닐 때에만 인터셉팅 라우트가 동작하도록 설정
  : 사용자가 초기 접속 요청이 아닌 클라이언트 사이드 렌더링 방식으로 접속을 하게 되었을 때에만 동작

2) 실습 진행을 위한 환경 세팅

• vscode로 section08 폴더 열기
  → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

• vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
  → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

사용자가 도서 아이템을 클릭해서 북페이지로 이동하게 될 때 화면 내 모달 형태로 피드 위에 바로 나타나도록 생성

• 북 폴더 아래에 page.tsx를 인터셉팅 할 수 있는 페이지 생성: /src/app/(.)book/[id]/page.tsx 폴더 + 코드 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/app/(.)book/%5Bid%5D/page.tsx

• 모달 형태로 상세 페이지 렌더링을 위해 모달 컴포넌트 생성: /src/components/modal.tsx 코드 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/components/modal.tsx

• 모달 컴포넌트를 브라우저에 배치: /src/app/layout.tsx 코드 수정
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/app/layout.tsx

• 모달 컴포넌트의 css 코드 생성: /src/components/modal.module.css 코드 생성
  https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/components/modal.module.css

 

3. 패럴렐 & 인터셉팅 라우트

1) 실습 진행을 위한 환경 세팅

• vscode로 section08 폴더 열기
  → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

• vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
  → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

다시 수강