RSS ??? ????? ????? CORS? ?? ???? ??? ? XML ???? ?? ?? ? ?? ??? ??? ???? ??? JavaScript? ?????. 1. allorigins.win ?? rss2json.com? ?? ???? ???? CORS? ?????. 2. fetch()? ???? RSS URL? ???? ??? ????. 3. DOMParser? ???? XML? ?? ????? JSON ?? ???? ?? ?????. 4. ??, ??, ??, ?? ?? ??? ?????. 5. HTML? ???? ???? ??? ??? ?????. 6. ????? CSS ?? ???? ?????. 7. ?? ?? ??, ?? ?? ? ?? ? ?? ??? ???? ???? ????. ????? JavaScript? ?? ??? ??? ???? ?? ??? ????? ???? ?? ??? ???? ???? ??? ??? ???? ? ?????. ?? ????? ???? ?? ???? ??? ???? ?????.

JavaScript? ???? ? ???? RSS ??? ???? ?? ?? ???? ??? ????? ?? ??? ?? ????? ???? ???? ???? ?? ?????. ????? RSS(XML ??)? ?? ?? ? ???? ??? ???? XML? ?? ???? JavaScript? ???? HTML? ?? ?? ???. ???? ???? ??? ??? ????.

? RSS ??? JavaScript? ???? ??? ??????

RSS ??? XML ???? ???? ????? XML ???? ?? ??? ???? ????. JavaScript? ???? ??? ??? ? ????.

• ?? ???? RSS ??? ?????.
• XML ???? ?? ?????.
• ??, ??, ??, ?? ??? ?????.
• ??? ???? ???? ??????.

?? ??: CORS(Cross-Origin Resource Sharing) ???? ?? ????? ?? ???? ???? ?? ? ?? ????? ?? RSS ??? ??? ? ????. ? ??? ????? ??? ??? ? ???? ??? ?????.

?? 1??: ???? ???? RSS ?? ????

CORS? ?? ?? ???? ?? ?? ??? ???? ?? ?? ????? ? JavaScript?? https://example.com/feed.xml ? ?? RSS ??? ?? ??? ? ????.

?? ??: ?? CORS ???? Feed-to-JSON ???? ?????.

?? ?? ??:

• https://api.allorigins.win/get
• http://ipnx.cn/link/93ec3bccd20f1403374ea7636b10f56d (API? ?? RSS? JSON?? ??)
• https://thingproxy.freeboard.io/fetch

? ? ???? allorigins.win? ?????.

? 2??: ??? ???? ?? ???? JavaScript ??

??? fetch() ? AllOrigins ???? ???? ?? ?????.

 <div id="rss-feed"></div>

<????>
  const rssFeedContainer = document.getElementById("rss-feed");
  const rssUrl = "https://yourwebsite.com/feed"; // RSS ?? URL? ??
  const ProxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`;

  ????(???Url)
    .then(?? => response.json())
    .then(??? => {
      const ?? = ??? DOMParser();
      const rss = ??.parseFromString(data.contents, "text/xml");
      const items = rss.querySelectorAll("item");

      html = "<ul>";
      items.forEach(?? => {
        const title = item.querySelector("title").textContent;
        const link = item.querySelector("link").textContent;
        const pubDate = item.querySelector("pubDate") ? new Date(item.querySelector("pubDate").textContent) : null;
        const ?? = item.querySelector("description")?.textContent || "";

        HTML = `
          <?>
            <h4><a href="${link}" target="_blank">${title}</a></h4>
            ${pubDate ? `<small>${pubDate.toLocaleDateString()}</small>` : ""}
            <p>${description.substring(0, 150)}...</p>
          </li>
        `;
      });
      html = "</ul>";
      rssFeedContainer.innerHTML = html;
    })
    .catch(err => {
      rssFeedContainer.innerHTML = "<p>RSS ??? ???? ?????.</p>";
      console.error("RSS ???? ??:", err);
    });
</script>

? ?? ??

1. Proxy Request : CORS? ???? ?? RSS URL? AllOrigins? ?? ?????.
2. XML ?? ?? : DOMParser XML ???? DOM ??? ?????.
3. ??? ?? : querySelector ???? <title> , <link> , <pubDate> ?? ?????.
4. HTML ?? : ??? ??? ???? ???? ?????.

? ????: ?? ??? ??

CSS? ???? ?? ?? ????.

 #rss-feedul {
  ?? ???: ??;
  ??: 0;
}

#rss-?? ? {
  ?? ??: 20px;
  ??? ??: 1px ?? #eee;
  ?? ??: 15px;
}

#rss-?? h4 {
  ??: 0 0 5px 0;
}

#rss-?? {
  ??? ??: ??;
  ??: #1a73e8;
}

#rss-?? ?? {
  ??: #666;
}

#rss-?? p {
  ??: #444;
  ?? ??: 0.9em;
}

?? ?? ?? ? ?? ??

• ?? ?? : AllOrigins? ?? ?? ???? ??? ??? ? ????. ??? ???? ?????.
• ??? : ?? ???? ??? ? ????. ????? ?? ??? ??????.
  • ??? ???(Node.js, PHP ?)
  • rss2json.com API ??(?? ?? ?? ??)
  • ?? ?? ???? ????? ???

rss2json? ?(? ????):

 fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`)
  .then(res => res.json())
  .then(??? => {
    if (data.status === "??") {
      const html = data.items.slice(0, 5).map(item => `
        <div>
          <h4><a href="${item.link}" target="_blank">${item.title}</a></h4>
          <small>${new Date(item.pubDate).toLocaleDateString()}</small>
          <p>${item.description.substring(0, 120)}...</p>
        </div>
      `).join(&#39;&#39;);
      rssFeedContainer.innerHTML = html;
    }
  });

??? ?

• ??? ???? ?? ?? ??? ????? (XSS ??).
• ???? ?? ?? ?????(?: 5~10).
• ??? RSS ??? ??????. ?? ??? XML? ?? ????.
• ?? ??? ??? ??? ???? ???? ???? ??? ???? ?? ?????.

????? ???? JSON ???? ???? ??? ????. JavaScript? ???? ????? ??? ??? ?? ??? ???? ??? ? ????. ?? ?????: ?????? RSS? ?? ???? ?? ??????. ?? ???? ??? ??? .

? ??? JavaScript? ???? ????? RSS ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!