2. Typescript로 GeekNews의 RSS 읽어오기

이전 포스팅

2023.11.18 - [프로젝트/GeekNews 대시보드 구성하기] - 1. Typescript 개발 환경 설정하기

필요 배경 지식

• RSS 관련 지식 (있으면 좋음에 가까움)

Prerequisite

• 1. Typescript 개발 환경 설정하기에서 설정한 모든것 들.
• 가져오려는 글 혹은 사이트의 RSS 주소 

RSS가 뭐고 어떻게 활용하지?

RSS는 “Really Simple Syndication” 또는 "Rich Site Summary"의 약자로, 웹 사이트의 콘텐츠를 표현하는 방식입니다
웹 사이트 관리자는 RSS 형식으로 웹 사이트 내용을 보여주며, 이 정보를 받는 사람은 다른 형식으로 이용할 수 있습니다.

RSS 파일 형식을 직접 보게되면 아래와 같이 보인다.

<feed xmlns="http://www.w3.org/2005/Atom">
<title>GeekNews - 개발/기술/스타트업 뉴스 서비스</title>
<subtitle>개발 뉴스, 기술 관련 새소식, 스타트업 정보와 노하우, 세상의 재미난 것들을 좋아하는 사람들을 위한 뉴스 사이트. 이메일 뉴스레터/트위터/슬랙 봇으로 구독 가능</subtitle>
<link ref="alternate" type="text/html" href="https://news.hada.io"/>
<link ref="self" type="application/atom+xml" href="https://news.hada.io/rss/news"/>
<id>https://news.hada.io/rss/news</id>
<author>
<name>GeekNews</name>
<email>news@hada.io</email>
<uri>https://news.hada.io</uri>
</author>
<updated>2023-11-19T10:34:02+09:00</updated>
<icon>https://social.news.hada.io/favicon.png</icon>
<logo>https://social.news.hada.io/WideLogo500.png</logo>
<category term="technology"/>
<entry>
<title>GPT Crawler - 나만의 GPT를 만들기 위한 웹사이트 크롤러</title>
<link rel="alternate" type="text/html" href="https://news.hada.io/topic?id=11932"/>
<id>https://news.hada.io/topic?id=11932</id>
<updated>2023-11-19T10:34:02+09:00</updated>
<published>2023-11-19T10:34:02+09:00</published>
<author>
<name>xguru</name>
<uri>https://news.hada.io/user?id=xguru</uri>
</author>
<content type="html" xml:lang="ko">
<![CDATA[ <ul> <li>사이트 주소를 넣으면 전체를 크롤링해서 JSON으로 추출해줌(타이틀,주소,HTML)</li> <li>이 JSON을 GPT 빌더에 넣고 해당 내용 기반으로 동작하는 GPT 생성</li> <li>본문 셀렉터 및 최대 페이지 설정</li> <li>각 페이지당 커스텀 함수 실행 가능</li> </ul> ...</p> ]]>
</content>
</entry>
<entry>
... 생략
</feed>

새로운 글이 올라오면 위와 같은 형식으로 제공하는것을 RSS라고 하는듯.
위의 예시는 내가 가져오고싶은 RSS 정보 중 일부이다.

현재도 대부분의 블로그가 지원을 하고 있긴 한듯하다 (네이버 블로그, 티스토리, 구글 블로거 등)
블로그가 한창 붐일때는 예전에는 많이 썼다고 하는데 2010년대 들어서는 조금 그 활용이 낮아지고 있다고 하며, 서비스 종료도 심심찮게 있었다고 한다.

포맷을 봤을때 개발자가 아니면 직접적으로 사용하기가 힘든점이 활용도에서 큰 장벽이 있을것 같다.

Typescript로 RSS 데이터를 가져 오는 방법

내가 실제로 사용할 대상은 Geeknews를 제공하는 사이트의 RSS이므로 https://news.hada.io/rss/news 이 링크의 정보를 잘 가져오는지를 테스트할 예정이다.

그럼 우선 Typescript에 관련 라이브러리가 있는지 확인해 볼 필요가 있을 것 같다.

Chatgpt를 통해 나온 정보와 블로그 포스팅을 확인해 봤을때 아래와 같은 추천 포스트가 있어서 이를 활용해보려고한다.

NodeJS Guide For RSS Feeds

 

여기서 rss-parser를 추천해주기에 이를 활용해보려고 한다.

rss-parser

 

Package.json파일에 rss-parser 추가

dependencies 부분에 아래와 같이 "rss-parser"를 추가한다.

"dependencies": {
  "rss-parser": "^3.13.0"
}

rssFeedParser.ts 추가 및 index.ts 수정

rssFeedParser.ts는 다음과 같이 작성했다.

// rssFeedParser.ts
import RSSParser from 'rss-parser';

const parser = new RSSParser();

export async function parseRSSFeed(url: string) {
    try {
        const feed = await parser.parseURL(url);
        console.log(feed.title);
        feed.items.forEach(entry => {
            console.log(entry.title + ':' + entry.link);
        });
    } catch (error) {
        console.error(error);
    }
}

index.ts는 다음과 같이 수정했다.

import { parseRSSFeed } from './rssFeedParser';

const feedUrl = 'https://news.hada.io/rss/news'; // 실제 RSS 피드 URL로 대체
parseRSSFeed(feedUrl);

feedUrl에 들어간 정보는 rss 파싱 하기를 원하는 주소로 대체하면 된다.
나는 https://news.hada.io/rss/news  데이터를 파싱하기 위해서 이를 추가했다.

실행 결과

빌드 후 실행 결과는 다음과 같이 잘 나오는것으로 확인되었다.

RSS parser 코드 실행 결과

추후 포스트에서는 다음 내용을 진행하려고 한다.

1. Typescript의 Async/await 구조를 정확하게 이해하고 사용하기 (이 부분을 제대로 이해하는게 사실 프로젝트의 목표다)
2. 필요한 RSS 데이터를 추가해서 가져오기
3. RSS 데이터를 DB에 저장하기
4. DB에 저장된 데이터를 Grafana 대시보드 형태로 띄워주기

Reference

RSS 란 무엇인가