소개
typesafe-routes는 TypeScript를 위한 타입 안전한 라우팅 라이브러리입니다. 이 라이브러리를 사용하면 라우트 경로와 매개변수에 대한 타입 검사를 통해 더 안전하고 예측 가능한 코드를 작성할 수 있습니다.
Tech stack
ts-toolbelt
ts-toolbelt는 TypeScript의 타입 시스템을 확장하고 개선하기 위한 유틸리티 타입 모음입니다. 이 라이브러리를 사용하면 복잡한 타입 조작을 더 쉽게 수행할 수 있습니다.
사용한 주요 유틸리티 타입은 다음과 같습니다.
- Compute: 타입을 평탄화하여 가독성 향상
- OptionalDeep: 객체의 모든 속성을 깊이 있게 optional로 변환
- src/types.ts에서 InferPathParams, InferQueryParams 같은 복잡한 타입 추론에 활용
tsup
tsup은 TypeScript 프로젝트를 빌드하기 위한 번들러입니다. 빠르고 사용하기 쉬우며, 다양한 출력 형식을 지원합니다.
ESM(.mjs), CJS(.cjs)를 동시에 빌드하고 d.ts 타입 선언 파일도 생성합니다.
@biomejs/biome
Biome은 JavaScript 및 TypeScript 코드를 위한 올인원 코드 품질 도구입니다. 코드 포맷팅, 린팅, 정적 분석 등을 하나의 도구로 처리할 수 있습니다.
tape
tape는 간단하고 직관적인 API를 제공하는 테스트 러너입니다. 테스트를 작성하고 실행하는 과정을 간소화하여 개발자가 더 쉽게 테스트를 작성할 수 있도록 도와줍니다.
@arethetypeswrong/cli
@arethetypeswrong/cli는 TypeScript 프로젝트에서 타입 오류를 쉽게 찾고 수정할 수 있도록 도와주는 CLI 도구입니다.
createRoutes
createRoutes 함수는 라우트 구성을 정의하는 데 사용합니다.
Proxy를 활용하여 lazy evaluation을 통해 라우트 트리 전체를 미리 생성하지 않고 필요할 때 처리 합니다.
특정 route 이름에 접근하면 다시 Proxy를 사용하여 Context 객체를 생성합니다.
Context 객체는 현재 경로 배열(path), 현재 경로 정보 배열(nodes), 상대 경로 정보 배열(relativeNodes), children 정보 등을 포함합니다.
template
template 함수는 경로 템플릿을 생성하는 데 사용합니다.
react-router 등에서 라우트를 정의할 때 사용하는 경로 패턴을 생성할 때 유용합니다.
상대 경로 정보 배열(relativeNodes)을 순회하면서 각 노드의 경로를 조합하여 최종 경로 패턴을 생성합니다.
string이 아닌 경우 AnyParam으로 간주합니다.
AnyParam은 str, int, float, isoDate 등으로 정의한 path parameter를 의미합니다.
options.template로 명시적으로 템플릿을 지정하지 않으면 :paramName 형식으로 경로 패턴을 생성합니다.
optional일 경우 :paramName? 으로 표시합니다.
renderPath
renderPath 함수는 주어진 경로 매개변수를 사용하여 실제 경로 문자열을 생성합니다.
param 인자로 경로 매개변수를 받고, 이를 사용하여 경로 템플릿의 플레이스홀더를 실제 값으로 대체합니다.
renderQuery
renderQuery 함수는 주어진 쿼리 매개변수를 사용하여 쿼리 문자열을 생성합니다.
render
render 함수는 renderPath와 renderQuery를 결합하여 전체 URL을 생성합니다.
parsePath
parsePath 함수는 주어진 경로 문자열을 분석하여 경로 매개변수를 추출합니다.
parseQuery
parseQuery 함수는 주어진 쿼리 문자열을 분석하여 쿼리 매개변수를 추출합니다.
parseLocation
parseLocation 함수는 전체 URL을 분석하여 경로와 쿼리 매개변수를 모두 추출합니다.
마치며
이 라이브러리는 TypeScript의 강력한 타입 시스템을 활용하여 라우팅을 더 안전하고 예측 가능하게 만듭니다. 타입 안전한 라우팅이 필요한 프로젝트에 유용하게 사용할 수 있습니다.
Tanstack Router는 조금 과한 느낌의 프레임워크이고, react-router-typesafe-routes react router에 종속입니다.
Type Route는 라우팅 기능을 포함하고 있으며 현재 유지보수가 활발하지 않습니다.
typesafe-routes는 라우팅에 필요한 최소한의 기능만 제공하여 가볍고 유연하게 사용할 수 있을 것으로 기대합니다.