오늘도 회사 생활은 쉽지 않았다.
이것저것 뒤치닥거리를 하다보니 하루가 끝났다.
이제는 연차가 차서 그런가.
화를 내는 사람들의 마음도 이해가 간다.
하지만 내 길은 관리자는 아닌거 같다는 생각은 여전하다.
오늘은 라우팅을 정리하려고 한다.
파일 시스템
컴포넌트 파일 (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
위와 같은 이름으로 사용되며, 라우트가 아닌 경로로 인식한다.
일단 용어가 너무 많아서 정리하는 마음으로 작성해 보았다.
아직 명확하게 정리는 되지 않았으나, 이런게 있구나 정도로 마음 가짐을 갖고 다음을 진행해보겠다.