RSS를 이용해 티스토리 블로그 글 가져오기

현재까지 진행중인 화면

포트폴리오에 티스토리 블로그 글을 가져와서 Blog 컴포넌트를 꾸미려고 했습니다.

예전에 Tistory Open API를 사용해 구현한 사례를 본 적이 있어, 이를 활용하려고 했는데 검색해보니 Tistory Open API가 서비스 종료되었다는 소식을 접하게 됐습니다.

그래서 다른 방법을 찾아보다가 RSS를 통해 블로그 글을 가져오는 방법을 알게 되었습니다.

 

하지만 RSS를 사용하여 구현을 진행했을 때 RSSTOJSON의 제한으로 인해 한 번에 10개의 데이터만 가져올 수 있었습니다.

원래는 페이지네이션 기능도 넣으려 했으나, 이 제한 때문에 구현하지 못한 것이 아쉬웠습니다.

앞으로 Next.js를 학습하여 RSSTOJSON을 사용하지 않고, RSS를 직접 파싱해서 페이지네이션까지 완벽하게 구현해보고 싶습니다.

RSS란?

RSS(Really Simple Syndication)는 웹사이트의 콘텐츠를 자동으로 업데이트해주는 표준 XML 형식 파일입니다.

이를 통해 특정 웹사이트나 블로그의 최신 글이나 업데이트 정보를 확인할 수 있습니다.

예를 들어, 티스토리 블로그는 https://블로그이름.tistory.com/rss 형식의 URL로 RSS 피드를 제공합니다.

RSSToJson

https://rss2json.com/docs

API Documentation - rss2json.com

티스토리의 RSS 피드를 직접 호출하려고 시도하면 CORS에러가 발생합니다.

이러한 문제를 해결하기 위해 rssToJson API를 사용할 수 있습니다.

rssToJson은 RSS 피드를 JSON 형식으로 변환해주는 서비스로, 이를 통해 CORS 문제를 우회하고 데이터를 더 쉽게 처리할 수 있습니다.

 

다음은 useQuery를 사용하여 티스토리 블로그의 RSS 피드를 가져오는 코드입니다.

const {
    data: posts,
} = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
        const response = await axios.get(
            `https://api.rss2json.com/v1/api.json?rss_url=${rssUrl}&api_key=${apiKey}`
        );
        return response.data.items;
    },
});

RSS 피드 URL에는 가끔 특수문자나 공백이 포함될 수 있습니다.

이러한 특수문자로 인해 URL이 제대로 인식되지 않거나 오류가 발생할 수 있으므로, encodeURIComponent를 사용하여 URL을 인코딩해주는 것이 좋습니다.

문서에서도 이를 권장하고 있으므로 사전에 문제를 방지하기 위해 인코딩을 사용해야 됩니다.

const rssUrl = encodeURIComponent('https://hy-un.tistory.com/rss'); 

티스토리 블로그 데이터 처리하기

RSS 피드를 통해 티스토리 블로그 데이터를 가져오다 보니 몇 가지 처리해야 할 부분들이 있었습니다.

1. pubDate 시간 변환

티스토리에서 제공되는 pubDate 값은 UTC 시간으로 표시되기 때문에, 한국 시간과 다릅니다.

이를 적절히 변환해주는 처리가 필요하며, 이를 해결하기 위해 pubDate를 변환하는 함수를 구현했습니다.

const formattedDate = useCallback((dateString: string): string => {
    const date = new Date(new Date(dateString).getTime() - new Date().getTimezoneOffset() * 60000);

    return [
        date.getFullYear(),
        (date.getMonth() + 1).toString().padStart(2, "0"),
        date.getDate().toString().padStart(2, "0")
    ].join('.');
}, []);

getTimezoneOffset을 사용하여 시간을 변환하는 로직에 대한 자세한 설명은 아래 블로그 포스트를 참고해주시면 됩니다.

자바스크립트 Date 객체 정리 및 관련 함수

2. description의 HTML 태그 처리

description 필드는 HTML 태그가 포함된 상태로 제공되기 때문에 이를 처리하기 위해 DOMParser를 사용했습니다.

const parser = new DOMParser();
const doc = parser.parseFromString(post.description, 'text/html');
const strText = doc.body.textContent || '';

여기서 parser.parseFromString(post.description, 'text/html'); 는 HTML 문자열을 파싱해서 DOM 객체로 변환해줍니다.

이 과정에서 description에 포함된 HTML 태그들이 DOM 구조로 파싱되며, 이후 textContent를 통해 순수한 텍스트만 추출할 수 있습니다.

 

3. 빈 문자열로 오는 thumbnail

티스토리 RSS 피드에서 thumbnail 필드가 빈 문자열로 옵니다. 빈 값이 오면 이미지가 표시되지 않기 때문에, 해결 방법을 찾아야 하지만, 아직 적절한 방법을 찾지 못했습니다.