router path 타입체킹하여 관리하기

[BoBeenLee]

Background

• 개인 홈페이지기에 router path가 다소 적어 관리 이유는 적합하지 않으나 회사내 대부분 규모가 큰 서비스를 진행할 경우 고민 포인트중 하나이기에 개인 홈페이지에 적용함으로써 best practice를 만들어보고자함.

Examples

• path: "/blog/[id]" 일 경우, 타입스크립트로 pathValues id를 입력받게하여 path타입에 따른 관리를 진행합니다.

Insight

• https://www.youtube.com/watch?v=CG3_Y9T03J4
  • 유니온 타입을 이용해 각 router path, params를 구분할 수 있기에 이를 착안하여 라우터 관리에 적용하고자 합니다.

[BoBeenLee]

Library

• https://github.com/aspida/pathpida

[BoBeenLee]

Issue

• 아래처럼 타입 조건문으로 표기여부를 결정할 수 있으나 urlPath와 urlPathValues결합하는 시점에서 urlPathValues가 존재하지 않은 속성으로 인식이 되어 실제 urlPathValues 값을 사용할 수 없는 이슈
• 임시적으로 urlPathValues?: NavRouter[F]['path']; optional처리하여 가져오게 구성했습니다.

  urlPathValues 값이 never이 아닐 경우에만 노출하고 싶을때,
  {
  [key in F as key extends infer K extends keyof NavRouter
  ? NavRouter[K] extends { urlPathValues: never }
    ? never
    : 'urlPathValues'
  : never]?: NavRouter[key]['urlPathValues'];
  };