[NextJS] 20260408 라우팅 정리

오늘도 회사 생활은 쉽지 않았다.

이것저것 뒤치닥거리를 하다보니 하루가 끝났다.

 

이제는 연차가 차서 그런가. 

화를 내는 사람들의 마음도 이해가 간다.

하지만 내 길은 관리자는 아닌거 같다는 생각은 여전하다.

 

오늘은 라우팅을 정리하려고 한다.

 

파일 시스템 

컴포넌트 파일 (page.js) - UI를 렌더링 

레이아웃(layout.js) - UI를 정의하며 여러 페이지 같에 공유한다.

중첩 라우팅 - 폴더 안에 폴더를 만드는 방식 app/blog/context/page.js

    blog/context 경로

 

동적 라우팅 

경로 구조: app/blog/[slug]/page.js 

매칭 url: /blog/abc, /blog/qqq 등

 

동적 라우팅의 3가지 유형

기본 

[id] 단일 세그먼트 

/1

{ id: '1' }

포괄적(Catch-all)

[...slug]

/a/b/c 

{ slug: { slug: ['a', 'b', 'c'] }

 

선택적 포괄적(Optional)

[[...slug]]

해당 경로가 없어도 매칭

/

{}

/a

{slug: ['a']}

 

인터셉팅 라우트

현재 페이지의 컨텍스트를 유지하면서, 특정 경로를 가로채서 다른 UI(모달이나 오버레이)를 보여주는 고급 라우팅

URL로 집적 접속할때와 내부 링크를 통해 이동할 때 서로 다른 화면을 보여주는 경우에 사용된다.

 

폴더 명명 규칙

.. 한단계 위 수준의 세그먼트를 가로챈다.

(.) 동일 수준의 세그먼트를 가로챈다.

(..) 두단계 위 수준의 세그먼트를 가로 챈다.

(...) app 디렉토리 루트로 시작하는 세그먼트를 가로 챈다.

 

병렬 라우트

@slot 

위와 같은 이름으로 사용되며, 라우트가 아닌 경로로 인식한다.

 

일단 용어가 너무 많아서 정리하는 마음으로 작성해 보았다.

아직 명확하게 정리는 되지 않았으나, 이런게 있구나 정도로 마음 가짐을 갖고 다음을 진행해보겠다.