3. Typescript 로 html 데이터 파싱하기

이전 포스팅

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

2023.11.19 - [프로젝트/GeekNews 대시보드 구성하기] - 2. Typescript로 GeekNews의 RSS 읽어오기

 

파싱 원하는 html 데이터 포맷

아래와 같이 html 포맷을 가지고 있다.

<h3>개요</h3>
<ul>
<li>
<p>Cerebral Valley AI Summit 행사에서 Cortue Ventures의 Sri Viswanath가 발표한 AI 현황에 대한 내용입니다.</p>
</li>
<li>
<p>Cortue Ventures는 지금까지 10년 이상 AI 분야를 지켜보며 50개가 넘는 AI 관련 회사들에 투자한 투자 회사(VC)입니다.</p>
</li>
<li>
<p>특히, 이 보고서에는
클로드 2.1:https://news.hada.io/topic?id=11979
content :
<h2>클로드 2.1 소개</h2>
<ul>
<li>클로드 2.1은 API를 통해 사용 가능하며, claude.ai 채팅 경험을 제공함.</li>
<li>업계 선도적인 200K 토큰 컨텍스트 윈도우, 모델 환각 감소, 시스템 프롬프트 및 새로운 베타 기능인 도구 사용을 특징으로 함.</li>
<li>고객의 비용 효율성 향상을 위해 가격 정책 업데이트 예정임...</p>
샘 알트만, OpenAI의 CEO로 복귀합니다.:https://news.hada.io/topic?id=11978
content :
<p>OpenAI는 브렛 테일러(Bret Taylor) 의장 그리고 래리 서머스(Larry Summers) 및 애덤 디엔젤로(Adam D'Angelo) 멤버로 구성 된 새 이사회를 받아들이며 샘  알트만의 CEO 복귀에 합의 했습니다.</p>

인도에서 살펴봐야 할 8개의 스타트업:https://news.hada.io/topic?id=11977
content :
<ul>
<li>세계에서 가장 인구가 많은 나라에서 새로운 바람을 일으키고 있는 8개의 스타트업들</li>
<li>Classplus(교육), Bhanzu(수학), Allo Health(성 건강), Kiwi(신용카드), Varaha(탈 탄소화), Ethereal Machines(제조), Zluri(SaaS 관리), ChistaDATA(데이웨어하우징)</li>
</ul>
<h2>액션 가능한 인사이트들...</p>
GTA에서 저격할 때 달의 크기가 변하는 이유:https://news.hada.io/topic?id=11976
content :
<h2>달의 크기가 변하는 이유</h2>
<ul>
<li>게임 내에서 달의 텍스처를 제공받아 밤하늘에 적절한 크기로 배치함.</li>
<li>나중에 4명의 아티스트가 달의 크기를 변경해달라고 요청함; 2명은 현실적인 크기를 원했고, 다른 2명은 영화 같은 크기를 원함.</li>
<li>달의 크기를 게임 내에서 변경 가능하도록 제안함; 스...</p>
Leantime - 오픈소스 JIRA 대체제:https://news.hada.io/topic?id=11975
content :
<ul>
<li>PM이 아닌 사용자를 위한 전략적 프로젝트 관리 시스템</li>
<li>전략, 계획, 실행을 결합하면서도 누구나 쉽게 사용할 수 있도록 함</li>
<li>Trello 처럼 간단하지만, JIRA 처럼 기능이 많음</li>
</ul>
<h2>기능들</h2>
<ul>
<li>자오는 시애틀 연방 법원에서 유죄를 인정하고, 바이낸스는 범죄 혐의에 대해 유죄를 인정하고 총 43억 달러의 벌금을 납부하기로 합의함.</li>
<li>Binance는 미국 사용자들이 위치를 숨겨 미국의 반돈세탁 법규를...</p>
노스볼트, 160Wh/kg로 검증된 최첨단 소듐이온 배터리 개발:https://news.hada.io/topic?id=11972
content :
<h2>셀 기술</h2>
<ul>
<li>Northvolt가 스웨덴 스톡홀름에서 나트륨 이온 배터리를 개발함.</li>
<li>이 새로운 배터리는 전 세계적으로 비용 효율적이고 지속 가능한 에너지 저장 시스템 확장에 기여할 것으로 기대됨.</li>
<li>Northvolt Labs에서 160Wh/kg 이상의 에너지 밀도로 검증된 이 배터리는 안전하고 비용 효...</p>
Stable Video Diffusion 출시:https://news.hada.io/topic?id=11971
content :
<ul>
<li>Stable Video Diffusion 은 이미지 모델인 Stable Diffusion 을 기반으로 한 첫 번째 생성 비디오 모델</li>
<li>연구용 프리뷰로 제공되며, 이 최신 생성 AI 비디오 모델은 다양한 유형의 모델을 만드는 여정에서 중요한 단계</li>
<li>코드는 GitHub 저장소에서, 모델을 로컬에서 실행하는 데 필요한 가중치는...</p>

따라서, typescript에서 html 포맷을 처리해 주는 기능을 찾아보자.

현재 나의 요구사항에서 심플하게는 <h2> 태그와 <li> 만 추려내서 가져오면 된다.

GPT 검색을 해보면 다음과 같은 설명을 해준다.

예를 들어, TypeScript에서 HTML 문자열 안의 <li> 태그들을 배열로 변환하고 싶다면, 브라우저 환경에서는 DOMParser를 사용할 수 있습니다. Node.js 환경에서는 jsdom 같은 라이브러리를 사용할 수 있습니다.

 

JSDOM 라이브러리 설치

그래서 바로 설치해서 사용해보자

npm install jsdom
npm i --save-dev @types/jsdom

위 명령어를 통해서 설치 해 볼 수 있다.

 

JSDOM 활용

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

const parser = new RSSParser();

export async function parseRSSFeed(url: string) {
    try {
        const feed = await parser.parseURL(url);
        console.log(feed.title);
        for (const entry of feed.items) {
            console.log(entry.title + ':' + entry.link);
            console.log("content : \n" + entry.content);
            // 여기가 기존에서 추가된 부분 시작
            const domParser = new JSDOM.JSDOM(entry.content);
            const doc = Array.from(domParser.window.document.querySelectorAll('li')).map((li: { textContent: any; }) => li.textContent);
            console.log(doc)
            // 여기가 기존에서 추가 된 부분 끝
        }

    } catch (error) {
        console.error(error);
    }
}

요즘은 GPT가 요구사항을 잘 전달해주면 잘 만들어 주어서 어렵지 않게 위와같은 코드를 추가할 수 있었다.

결과를 뽑아보니 예상대로 잘 파싱 해주는 케이스가 있는 반면 아닌케이스도 있었다.

애초에 포맷이 고정되어있지는 않은것 같기도 해서 다 처리를 해주어야 하나 싶다.

예상대로 잘 된 케이스

<h2>클로드 2.1 소개</h2>
<ul>
<li>클로드 2.1은 API를 통해 사용 가능하며, claude.ai 채팅 경험을 제공함.</li>
<li>업계 선도적인 200K 토큰 컨텍스트 윈도우, 모델 환각 감소, 시스템 프롬프트 및 새로운 베타 기능인 도구 사용을 특징으로 함.</li>
<li>고객의 비용 효율성 향상을 위해 가격 정책 업데이트 예정임...</p>

를 아래와 같이 출력해 주었다.

[
  '클로드 2.1은 API를 통해 사용 가능하며, claude.ai 채팅 경험을 제공함.',
  '업계 선도적인 200K 토큰 컨텍스트 윈도우, 모델 환각 감소, 시스템 프롬프트 및 새로운 베타 기능인 도구 사용을 특징으로 함.',
  '고객의 비용 효율성 향상을 위해 가격 정책 업데이트 예정임...'
]

이게 내가 딱 원했던 포맷이고

예상대로 잘 안된 케이스

샘 알트만, OpenAI의 CEO로 복귀합니다.:https://news.hada.io/topic?id=11978
content :
<p>OpenAI는 브렛 테일러(Bret Taylor) 의장 그리고 래리 서머스(Larry Summers) 및 애덤 디엔젤로(Adam D'Angelo) 멤버로 구성 된 새 이사회를 받아들이며 샘 알트만의 CEO 복귀에 합 의 했습니다.</p>

얘는 li가 하나도 없어서 출력 조차 못했다.

[]

<p> 태그도 같이 처리를 해줘야하는데 rss에 나와있는 데이터가 어떤 포맷으로 구성 되는지 확인을 해봐야할듯.

 

추가 처리 이후

<p> 태그 까지 추가로 확인해 봤을 때는 <li> 혹은 <p> 태그 두가지 정도로 모든(?) 정보를 파싱할 수 있을것 처럼 보이긴하는데 혹시나 또 다른 데이터가 있으면 처리를 해주어야 할 수 도 있을것같다.

const domParser = new JSDOM.JSDOM(entry.content);
const docli = Array.from(domParser.window.document.querySelectorAll('li')).map((li: { textContent: any; }) => li.textContent);
const docp = Array.from(domParser.window.document.querySelectorAll('p')).map((p: { textContent: any; }) => p.textContent);
console.log(docli)
console.log(docp)

위의 예상대로 잘 안된 케이스를 <p> 태그로 쓰여진 부분만 모으는 코드만 추가했더니 잘 안됐던 케이스에서 다음과 같이 출력했다.

파싱할 데이터

샘 알트만, OpenAI의 CEO로 복귀합니다.:https://news.hada.io/topic?id=11978
content :
<p>OpenAI는 브렛 테일러(Bret Taylor) 의장 그리고 래리 서머스(Larry Summers) 및 애덤 디엔젤로(Adam D'Angelo) 멤버로 구성 된 새 이사회를 받아들이며 샘 알트만의 CEO 복귀에 합 의 했습니다.</p>

결과

[]
[
  "OpenAI는 브렛 테일러(Bret Taylor) 의장 그리고 래리 서머스(Larry Summers) 및 애덤 디엔젤로(Adam D'Angelo) 멤버로 구성 된 새 이사회를 받아들이며 샘 알트만의 CEO 복귀에 합 의 했습니다."
]

<li>에 없는 데이터는 <p> 태그로 출력이 되도록 해주긴 한다.

 

파싱할 데이터2

<h3>개요</h3>
<ul>
<li>
<p>Cerebral Valley AI Summit 행사에서 Cortue Ventures의 Sri Viswanath가 발표한 AI 현황에 대한 내용입니다.</p>
</li>
<li>
<p>Cortue Ventures는 지금까지 10년 이상 AI 분야를 지켜보며 50개가 넘는 AI 관련 회사들에 투자한 투자 회사(VC)입니다.</p>
</li>
<li>
<p>특히, 이 보고서에는

결과2

[
  '\n' +
    'Cerebral Valley AI Summit 행사에서 Cortue Ventures의 Sri Viswanath가 발표한 AI 현황에 대한 내용입니다.\n',
  '\n' +
    'Cortue Ventures는 지금까지 10년 이상 AI 분야를 지켜보며 50개가 넘는 AI 관련 회사들에 투자한 투자 회사(VC)입니다.\n',
  '\n특히, 이 보고서에는'
]
[
  'Cerebral Valley AI Summit 행사에서 Cortue Ventures의 Sri Viswanath가 발표한 AI 현황에 대한 내용입니다.',
  'Cortue Ventures는 지금까지 10년 이상 AI 분야를 지켜보며 50개가 넘는 AI 관련 회사들에 투자한 투자 회사(VC)입니다.',
  '특히, 이 보고서에는'
]

이런 케이스의 경우 둘다 찍히긴 하지만 알아서 잘 처리하면 될것같기도 하다.

일단은 이정도만 할 수 있어도 대시보드에 띄우는건 문제없을듯.

 

 

Reference

GPT 검색 결과

• https://chat.openai.com/share/6c6ae630-95ce-4a0e-a4a1-2bc5b9d6245b