RSS - Sample

import React, { useState } from "react";

export default function App() {
  const [rssUrl, setRssUrl] = useState("");
  const [items, setItems] = useState([]);

  const getRss = async (e) => {
    e.preventDefault();
    const urlRegex =
      /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
    if (!urlRegex.test(rssUrl)) {
      return;
    }
    const res = await fetch(`https://api.allorigins.win/get?url=${rssUrl}`);
    const { contents } = await res.json();

    const feed = new window.DOMParser().parseFromString(contents, "text/xml");
    const items = feed.querySelectorAll("item"); 
    const feedItems = [...items].map((el) => ({
      link: el.querySelector("link").innerHTML,
      title: el.querySelector("title").innerHTML,
      date: el.querySelector("pubDate").innerHTML,
    }));
    setItems(feedItems);
  };

  return (
    <div className="App">
      <form onSubmit={getRss}>
        <div>
          <label> rss url</label>
          <br />
          <input onChange={(e) => setRssUrl(e.target.value)} value={rssUrl} />
        </div>
        <input type="submit" />
      </form>
      {items.map((item) => {
        return (
          <div>
            <h1>{item.title}</h1>
            <p>{item.author}</p>
            <a href={item.link}>{item.link}</a>
          </div>
        );
      })}
    </div>
  );
}

• 최신 - http://www.yonhapnewstv.co.kr/browse/feed/

• 헤드라인 - http://www.yonhapnewstv.co.kr/category/news/headline/feed/

• 정치 - http://www.yonhapnewstv.co.kr/category/news/politics/feed/

• 경제 - http://www.yonhapnewstv.co.kr/category/news/economy/feed/

• 사회 - http://www.yonhapnewstv.co.kr/category/news/society/feed/

• 지역 - http://www.yonhapnewstv.co.kr/category/news/local/feed/

• 세계 - http://www.yonhapnewstv.co.kr/category/news/international/feed/

• 문화ㆍ연예 - http://www.yonhapnewstv.co.kr/category/news/culture/feed/

• 스포츠 - http://www.yonhapnewstv.co.kr/category/news/sports/feed/

• 날씨 - http://www.yonhapnewstv.co.kr/category/news/weather/feed/

feed, items, feedItems

문제점…

1. rss-parser를 사용했을 때 Webpack 문제가 발생했음. (node.js에서만 가능??)

Compiled with problems 질문드립니다. - 인프런 | 질문 & 답변

ERROR in ./node_modules/rss-parser/lib/parser.js 2:13-28 Module not found: Error: Can't resolve 'http' in '/Users/taesukim/Desktop/dev/every-news-in-korea/node_modules/rss-parser/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

https://www.inflearn.com/questions/385726

1. CORS 문제

CORS workaround to consume RSS in a React App

This post will explore a method of displaying recent Medium blog posts within my web development portfolio site. Specifically, on the left hand side, we want to get this listing dynamically (outlined in red in the image below). We would like to display the last 5 blog posts that have a title, subtitle, url, pubDate, and imgUrl.

https://javascript.plainenglish.io/a-medium-slice-430c413adfb9

1. CORS 문제를 해결하기 위한 AllOrigins

「tip」공공데이터API CORS 연결하기

CORS문제가 발생한다면 allOrigins로 해결할 수 있다. 프록시로 CROS문제를 해결해주는 라이브러리는 CORS Anywhere, HTMLDriven을 비롯하여 다수 존재한다.(구글링) allOrigins는 jsonP를 활용하는 방식이며, xml방식을 json으로 변환하는 메서드와 함께 프로미스 방식으로 코드가 깔끔하다.

https://webdoli.tistory.com/181

테스트용 RSS Feed Spot

Top 25 React RSS Feeds (JavaScript library)

reactjs.org/feed.xml reactjs.org/blog/all.html React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It is an important source material for anyone who creates apps with the framework. 2 posts / quarter reactnative.dev/blog/rss.xml reactnative.dev/blog A framework for building native apps using React.

https://blog.feedspot.com/react_rss_feeds/