HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기/
✌️
찬희팀/
🧑🏻‍💻
Devin/6/3 외부 데이터 가공/
RSS - Sample

RSS - Sample

https://www.yonhapnewstv.co.kr/browse/feed/
v2.velog.io/rss/
 
notion image
 
연합 뉴스 RSS 서비스 주소
RSS 서비스 주소
  • 최신 - 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

notion image
 
notion image
notion image
 
RSS로 가져온 데이터
notion image
 

문제점…

https://reactjs.org/feed.xml
  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.
Compiled with problems 질문드립니다. - 인프런 | 질문 & 답변
https://www.inflearn.com/questions/385726
Compiled with problems 질문드립니다. - 인프런 | 질문 & 답변
compiled with problems:x error in ./node_modules/rss-parser/lib/parser.js 3:13-28 module not found: error: can't resolve 'http' in '/users/gimmingi/desktop/programmers/react_study/react-netlify-test/node_modules/rss-parser/lib’
 
  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.
CORS workaround to consume RSS in a React App
https://javascript.plainenglish.io/a-medium-slice-430c413adfb9
CORS workaround to consume RSS in a React App
Server ? 또는 Client? 에서 Proxy가 필요하다고 함… 모르겠어요…
 
  1. CORS 문제를 해결하기 위한 AllOrigins
「tip」공공데이터API CORS 연결하기
CORS문제가 발생한다면 allOrigins로 해결할 수 있다. 프록시로 CROS문제를 해결해주는 라이브러리는 CORS Anywhere, HTMLDriven을 비롯하여 다수 존재한다.(구글링) allOrigins는 jsonP를 활용하는 방식이며, xml방식을 json으로 변환하는 메서드와 함께 프로미스 방식으로 코드가 깔끔하다.
「tip」공공데이터API CORS 연결하기
https://webdoli.tistory.com/181
「tip」공공데이터API CORS 연결하기
처음에는 Open API 처럼 AllOrigins에서 제공하는(?) 더미 RSS만 읽어오는 줄 알았는데, RSS를 지원하는 사이트 (연합뉴스, 리액트 블로그 등 RSS를 지원하는 페이지 모두 가능.)
이 방법이 최선인건지 다른 방법이 있을지… 고민
 
 
 

테스트용 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.
Top 25 React RSS Feeds (JavaScript library)
https://blog.feedspot.com/react_rss_feeds/
Top 25 React RSS Feeds (JavaScript library)
 
notion image
eslint에 해당하는 내용이였는데도… git push를 하고 빌드에서 계속 실패했습니다…
notion image
수정해서 성공~ㅋㅋㅋㅋ
 
내일은 Serverless function….
 
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.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
    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>
  );
}