피드로 돌아가기
I Built a Hosting Diagnostic Tool on Cloudflare Workers
Dev.toDev.to
Frontend

개발자가 7개 질문에 답하면 30초 만에 최적의 호스팅 서비스를 추천하는 터미널 스타일 진단 도구를 Cloudflare Workers로 구축한 과정을 소개합니다.

I Built a Hosting Diagnostic Tool on Cloudflare Workers

shumatsumonobu2026년 3월 30일3intermediate

Context

호스팅 서비스(Vercel, Netlify, Cloudflare, Railway 등)가 다양해지면서 각 플랫폼의 가격, 제한 사항, 트레이드오프를 비교하는 데 많은 시간과 노력이 소요됩니다. 개발자들은 최적의 선택을 내리기 위해 개별 플랫폼의 문서를 탐색해야 하는 번거로움을 겪습니다.

Technical Solution

  • [대상: Next.js + TypeScript + Cloudflare Workers] → [수행 내용: 터미널 스타일의 웹 인터페이스를 구현하여 타이핑 애니메이션과 키보드 네비게이션으로 30초 내 진단 완료]
  • [대상: 7개 질문 기반 점수 매트릭스] → [수행 내용: 10개 호스팅 서비스에 0~3점 배점하는 알고리즘을 구현하고 /about 페이지에서 완전한 투명성 제공]
  • [대상: Cloudflare Workers의 font 로딩 제한] → [수행 내용: self-referencing fetch 실패 문제를 Google Fonts CDN에서 try-catch 폴백 방식으로 해결]
  • [대상: 다국어 지원] → [수행 내용: heavy i18n 라이브러리 대신 Record<Lang, TextMap> 구조로 2개 파일 약 200줄 구현]
  • [대상: CSS 테마 시스템] → [수행 내용: :root의 CSS custom properties로 Tailwind CSS v4 런타임 테마 변수 관리]

Impact

기존 비교 분석 시간을 개별 문서 탐색(수십 분)에서 30초로 단축하여 3개 추천 서비스 제공

Key Takeaway

Cloudflare Workers 환경에서는 loopback 요청이 차단되므로 외부 CDN을 통한 리소스 로딩과 폴백机制的 확보가 필수적입니다.


Cloudflare Workers 환경에서 외부 폰트 로딩 시 Google Fonts CDN을 try-catch 폴백 방식으로 적용 시 self-referencing fetch 실패로 인한 500 에러 방지 효과

원문 읽기
I Built a Hosting Diagnostic Tool on Cloudflare Workers | Devpick