JavaScript로 간단한 RSS 위젯 만들기
RSS는 20년이 넘은 기술입니다. 여전히 뉴스, 블로그, 팟캐스트를 공유하는 가장 대표적인 방법 중 하나입니다.
많은 개발자가 RSS 피드를 보여주기 위해 무거운 프레임워크를 사용합니다. 하지만 그럴 필요는 없습니다. RSS는 단순한 XML일 뿐입니다. 브라우저는 XML을 네이티브로 읽을 수 있습니다.
Vanilla JavaScript와 CSS만 사용하여 깔끔하고 반응형인 RSS 위젯을 만들 수 있습니다.
작동 방식:
- Fetch API를 사용하여 XML 데이터를 가져옵니다.
- DOMParser를 사용하여 해당 XML을 읽을 수 있는 문서로 변환합니다.
- 항목을 순회하며 제목, 링크, 설명을 추출합니다.
- 데이터를 카드 그리드 형태로 렌더링합니다.
흔한 문제는 CORS입니다. 서버가 요청을 차단하면 브라우저가 이를 중단합니다. allorigins.win과 같은 프록시를 사용하여 이 문제를 해결할 수 있습니다. 전문적인 프로젝트라면 Cloudflare Worker를 사용하여 요청을 처리하세요.
이 방식의 주요 특징:
- npm 설치나 외부 라이브러리가 필요 없습니다.
- 파일 크기가 작고 로딩이 빠릅니다.
- 모든 표준 RSS 2.0 피드에서 작동합니다.
- 카테고리 필터를 추가하기 쉽습니다.
다음과 같은 기능을 추가하여 위젯을 확장할 수 있습니다:
- 콘텐츠를 최신 상태로 유지하기 위한 자동 새로고침.
- 특정 게시물을 찾기 위한 검색창.
- 데이터 캐싱을 위한 Local storage.
- CSS 변수를 사용한 다크 모드 지원.
네이티브 API가 완벽하게 작동할 때 무거운 도구에 의존하지 마세요.
출처: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803