Astro, Svelte 5 및 Hono로 호스팅 비교 플랫폼을 만들었습니다

Source: Dev.to

Overview

호스팅 비교 웹사이트에 지쳤습니다. 여러분도 아시겠지만 “2024년 최고의 호스팅 Top 10” 같은 글은 2022년 이후로 업데이트되지 않았고, 가격은 완전히 틀렸으며, 순위는 언제나 같은 제공자를 가장 먼저 배치하는 경우가 많습니다.

그래서 직접 만들기로 했습니다. 제휴 링크가 달린 블로그 글이 아니라, 호스팅 유형별로 필터링하고, 플랜을 나란히 비교하며, 실제 현재 가격을 보여주는 실제 도구입니다. 약 6개월간 작업한 뒤, HostingSift가 공개되었고, 그 과정을 공유하고자 합니다.

Why This Stack

Astro의 하이브리드 SSR 모드가 가장 적합했습니다. 대부분의 페이지(호스팅 프로필, 카테고리, 메인 페이지)는 빌드 시에 프리렌더링되므로 바로 빠르게 로드됩니다. 비교 도구와 같은 몇몇 라우트는 서버 렌더링이 필요하고, Astro는 페이지별로 전환을 처리해 주어 매우 편리합니다.

인터랙티브한 부분은 Svelte 5를 사용했습니다. 이전에 React를 쓰던 제가 새롭게 도입된 런스 API($state, $derived, $effect)에 금방 매료되었습니다. 의존성 배열도 없고, 오래된 클로저도 없으며, 컴포넌트가 가볍게 느껴집니다. 사고방식 전환에 일주일 정도 걸렸지만, 그 이후로는 뒤돌아보지 않았습니다.

백엔드는 Hono on Node.js입니다. Express와 비슷하지만 실제 TypeScript 지원과 더 나은 성능을 제공합니다. 인증, 관리자 패널 API, 제휴 클릭 트래킹 등 모든 로직을 담당합니다. 데이터베이스는 PostgreSQL과 Drizzle ORM을 사용했으며, 쿼리와 마이그레이션 모두 안정적이었습니다.

모든 코드는 모노레포에 있습니다:

apps/web
apps/api
packages/db
packages/email

pnpm 워크스페이스가 이를 연결합니다.

Keeping Prices Up to Date

사이트의 핵심은 정확한 가격을 보여주는 것이므로, 각 제공업체의 플랜 데이터를 주간 스케줄로 가져오는 자동 파이프라인을 구축했습니다. 모든 플랜, 모든 결제 주기, 모든 기능 토글을 수집합니다. 파이프라인은 들어온 데이터를 기존 데이터베이스와 비교해 차이가 있으면 upsert합니다. 각 실행마다 스냅샷을 생성해, 예를 들어 제공업체가 월 $2씩 갱신 가격을 조용히 올렸을 경우에도 기록됩니다. 시간이 지나면 모든 플랜에 대한 가격 히스토리가 쌓이게 됩니다.

각 제공업체마다 데이터를 정확히 추출하는 것이 가장 큰 시간 소모였습니다. 제공업체마다 가격 페이지 구조가 다르고, 깔끔한 레이아웃도, 탭이나 드롭다운 뒤에 숨겨진 플랜도, 페이지 구조를 자주 바꾸는 경우도 있습니다. 결국 제공업체별로 매우 특화된 로직을 작성해야 했고, 유지보수가 일부분이라는 점을 받아들여야 했습니다.

Things I’d Do Differently

• 초기 단계에서 데이터 검증에 더 많은 시간을 투자했어야 했습니다. 한 제공업체의 가격 버그처럼 보이는 것을 실제 웹사이트를 확인하기 전에 거의 “수정”했었거든요. 사실 그들은 가장 큰 프로모션 할인을 저가 플랜이 아니라 중간 티어 플랜에 적용하고 있었습니다. 이제는 데이터베이스에 어떤 변경을 가하기 전에 항상 원본을 검증합니다.
• Svelte 5 + Astro는 훌륭한 조합이지만, 아직 생태계가 따라잡고 있는 중입니다. React/Next에서 한 줄로 해결할 수 있는 일부 기능은 아직 동등한 대안이 없습니다. 그래도 트레이드‑오프는 충분히 가치가 있습니다—출력 파일이 눈에 띄게 가볍고, 개발자 경험도 정말 좋습니다.

Try It

HostingSift가 현재 라이브 중이니 확인해 보세요. 호스팅 유형별로 필터링하고, 제공업체를 비교하며, 최신 가격을 확인할 수 있습니다. 아직도 제공업체와 기능을 추가하고 있으니, 뭔가 이상하거나 아이디어가 있다면 댓글로 알려주시면 감사하겠습니다.