SvelteKit과 Cloudflare Workers로 만드는 초고속 만화 뷰어

by DD
5개월 전
조회수 20

SvelteKit 기반의 만화 뷰어 FanaCumik을 개발, Cloudflare Workers를 활용하여 성능을 극대화함

Cheerio를 사용하여 HTML 파싱, TailwindCSS로 모바일 친화적인 UI를 구현함

이미지 핫링크 방지 문제를 해결하기 위해 API 프록시를 구축, 어댑터 패턴을 적용하여 확장성을 확보함

Edge 환경에서의 아키텍처 설계

Cloudflare Workers를 사용하여 Edge 환경에서 스크래핑 로직을 실행한다. 따라서 사용자에게 낮은 지연 시간으로 데이터를 제공한다. 구체적으로 SvelteKit은 SSR을 담당하고, Cheerio는 HTML 파싱을 수행하여 빠른 페이지 로딩 속도를 보장한다.

이미지 프록시 구현과 핫링크 방지

만화 사이트의 핫링크 방지를 위해 API 프록시를 구축했다. Referer 헤더를 조작하여 이미지 요청을 위장한다. 반면, 이 방식은 추가적인 서버 부하를 발생시킬 수 있다. 따라서 캐싱 전략을 통해 성능 저하를 방지해야 한다.

어댑터 패턴을 활용한 확장성 확보

어댑터 패턴을 적용하여 새로운 만화 사이트 추가를 용이하게 했다. 각 사이트는 BaseSource를 상속받는 클래스로 구현된다. 결과적으로 코드 재사용성을 높이고, 유지보수성을 향상시켰다. 또한, 새로운 기능 추가에 대한 유연성을 확보했다.

Scraping on the Edge: How I Built a Lightning-Fast Manga Reader with SvelteKit