배경

최근 들어 개발자나 사이드 프로젝트를 만드는 사람들이 많아지면서,
무료이면서도 최신 데이터를 활용할 수 있는 환경이 점점 줄어들고 있다는 것을 느꼈다.
• 프리 티어가 너무 제한적이라 사실상 실사용이 어렵고
• 짧은 체험 기간 이후에는 불투명한 과금이 뒤따르며
• API 사용 정책도 복잡하고 제약이 많다.

하지만, 이 모든 고민을 덜어주는 데이터 소스를 찾았다.
바로 RSS.

RSS란?

RSS는 XML 문서 한 장에 콘텐츠 목록(제목, 링크, 날짜, 요약)을 담아 두는 형식이다.
브라우저, 슬랙 봇, 메일링, 검색 엔진이 모두 이해한다.

예시)

<rss version="2.0">
  <channel>
    <title>예시 피드</title>
    <item>
      <title>Hello World</title>
      <link>https://example.com/hello</link>
      <pubDate>Sat, 18 May 2025 12:00:00 GMT</pubDate>
      <description>Hello World 글 요약…</description>
    </item>
  </channel>
</rss>

왜 RSS는 무료일까?

JavaScript/React에서 RSS 사용하기

import { useEffect, useState } from 'react';

type Item = { title: string; link: string; pubDate: string };

export default function FTFeed() {
  const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchFeed() {
      const proxy = 'https://allorigins.hexlet.app/get?url=';
      const url = encodeURIComponent(
'https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml'
      );
      const res = await fetch(`${proxy}${url}`);
      const xmlText = (await res.json()).contents;

      const doc = new DOMParser().parseFromString(xmlText, 'application/xml');
      const parsed: Item[] = [...doc.querySelectorAll('item')]
        .slice(0, 8)
        .map(i => ({
          title: i.querySelector('title')?.textContent ?? '',
          link: i.querySelector('link')?.textContent ?? '',
          pubDate: new Date(
            i.querySelector('pubDate')?.textContent ?? ''
          ).toLocaleString(),
        }));

      setItems(parsed);
      setLoading(false);
    }
    fetchFeed();
  }, []);

  if (loading) return <p>FT 헤드라인 로딩 중…</p>;

  return (
    <ul>
      {items.map((it, idx) => (
        <li key={idx}>
          <a href={it.link} target='_blank' rel='noopener noreferrer'>
            {it.title}
          </a>{' '}
          <small>{it.pubDate}</small>
        </li>
      ))}
    </ul>
  );
}

포인트
• CORS 프록시(allorigins)로 교차 도메인 차단 해소
• 브라우저 내장 DOMParser로 XML→DOM 파싱(의존성 0)
• 헤드라인·링크만 노출 → 클릭 시 원문 이동(게시자 예의)

🛠️ CORS 문제 해결을 위한 도구: AllOrigins

브라우저에서 직접 RSS 피드를 가져오려 하면 CORS(Cross-Origin Resource Sharing) 오류가 발생하는 경우가 많다.
이때 AllOrigins 를 사용하면 중간 서버 역할을 대신해 CORS 문제를 우회할 수 있다.

덕분에, 별도의 백엔드 서버 없이도 프론트엔드에서 바로 RSS 데이터를 불러오는 것이 가능진다.
공개된 데이터를 사용하는 프로젝트라면, 이 방식으로 빠르게 시작할 수 있다.

const proxyUrl = 'https://allorigins.hexlet.app/get?url=';
const feedUrl = encodeURIComponent('https://www.wsj.com/xml/rss/3_7085.xml');
const response = await fetch(`${proxyUrl}${feedUrl}`);
const data = await response.json();
const contents = data.contents; // 여기에 실제 RSS XML이 담겨 있음

단, 로그인이나 인증이 필요한 API에는 사용할 수 없고, GET 방식의 공개 데이터에 적합하다.