React와 GSAP로 만든 델리 지하철 경로 플래너

출처: Dev.to

최근에 무료 델리 메트로 경로 플래너를 만들었습니다:

https://metro.coolhead.in/

첫 번째 버전은 인터랙티브한 React 앱으로 잘 동작했습니다. 출발역을 선택하고 도착역을 선택하면 경로, 예상 요금, 정차 횟수, 이동 시간, 환승 횟수, 그리고 메트로 지도상의 노선 색상 안내를 확인할 수 있었습니다.

문제: 대부분의 사용자는 “델리 메트로 경로 플래너”와 같은 일반적인 검색어보다 “Rajiv Chowk to Kashmere Gate 메트로 경로”와 같이 구체적인 경로를 검색합니다. 단일 페이지 앱의 홈 페이지만으로는 많은 유용한 검색 수요를 포착하지 못했기 때문에, 모든 역‑대‑역 조합에 대해 프로그래밍 방식으로 SEO 페이지를 추가했습니다.

내가 원하는 것

다음 두 URL이 동일한 유용한 경로를 보여주길 원했습니다:

https://metro.coolhead.in/routes/rajiv-chowk-to-kashmere-gate/
https://metro.coolhead.in/?from=RCK&to=KG

• 첫 번째 URL은 깔끔하고 검색 친화적입니다.
• 두 번째 URL은 앱 상태 관리와 공유에 간단합니다.

두 URL 모두 다음과 같은 React 플래너 상태로 하이드레이트되어야 합니다:

• from 자동 입력
• to 자동 입력
• 경로 자동 검색
• 요금, 시간, 정차 횟수, 환승 정보 표시

데이터 모델

앱에는 이미 두 개의 유용한 데이터셋이 있었습니다:

• labels.json: 역 ID와 이름
• edge.json: 역 간 그래프 엣지, 노선 색상 및 SVG 경로

각 역은 다음과 같은 간결한 ID를 가집니다, 예시:

{
  "id": "RCK",
  "text": "Rajiv Chowk"
}

경로 페이지 슬러그는 역 이름에서 파생됩니다:

Rajiv Chowk → rajiv-chowk
Kashmere Gate → kashmere-gate

따라서 쌍:

RCK → KG

는 다음과 같은 URL이 됩니다:

/routes/rajiv-chowk-to-kashmere-gate/

모든 경로 생성

앱 데이터에는 241개의 역이 있습니다. 동일한 역 간 경로를 제외한 모든 순서가 있는 출발/도착 쌍에 대해, 제너레이터는 정적 페이지를 생성합니다:

241 * 240 = 57,840 개의 경로 페이지

각 생성된 경로 페이지에는 다음이 포함됩니다:

• 경로 전용 <title>
• 메타 설명
• Open Graph 메타데이터
• Twitter 메타데이터
• 정규화 URL (canonical URL)
• JSON‑LD
• HTML에 미리 렌더링된 경로 텍스트
• React 앱을 위한 하이드레이트 페이로드