RSS을 활용해 Velog 글을 웹 페이지에 자동으로 업로드해보기
RSS이란?
Really Simple Syndication, Rich Site Summary
블로그처럼 컨텐츠 업데이트가 자주 일어나는 웹사이트에서, 업데이트된 정보를 쉽게 사용자에게 제공하기 위해 XML로 만들어진 데이터 형식입니다.
게시물과 같은 콘텐츠를 이용하는데 해당 게시물에 직접 접근하지 않고도 정보를 얻을 수 있습니다.
뉴스와 같은 정보를 받기 위해 하나하나 페이지들을 방문하게 된다면 필요 이상의 데이터를 처리하게 됩니다. 사용자들을 위해 적용된 디자인과 기능들이 포함되어 있기 때문입니다.
RSS을 이용하면 필요한 정보만 효율적으로 가져와 처리할 수 있습니다.
Velog 게시글 xml로 변환하기
https://v2.velog.io/rss/벨로그아이디
위 url은 벨로그 게시글에 대해 xml을 반환하는 방법입니다.
v2.velog.io/rss/id 를 입력하면 위의 사진처럼 벨로그에 대한 기본 정보와 링크 등 다영한 데이터들을 볼 수 있습니다.
각 게시글에 대한 정보는 <item> 태그에 들어가 있습니다.
이 데이터를 받아오도록 하겠습니다.
1. XMLHttpRequest
XMLHttpRequest는 javascript를 사용하여 HTTP 요청을 전송하는 객체입니다.
// xhr라는 요청 변수 생성
const xhr = new XMLHttpRequest();
// xhr에 요청에 대한 메서드와 대상 주소값을 의미
xhr.open(메소드,대상url);
// xhr의 요청이 완료된 경우에 기능을 작성
xhr.onload = () => {
처리 기능
};
// 기능 실행
xhr.send();XMLHttpRequest으로 요청을 생성한 이후에는 상태가 계속 변하게 됩니다.
xhr.UNSENT: 최초 생성시xhr.OPENED: open 실행시xhr.HEADERS_RECEIVED: setRequestHeader 실행시xhr.LOADING: send후 결과값이 돌아오기 전까지xhr.DONE: 결과값이 도착했을 경우
값은 xhr.readyState로 확인할 수 있습니다.
때문에 DONE의 상태에서 성공, 실패의 기능을 처리하고 싶다면 onload나 onerror와 같은 기능을 사용할 수 있습니다.
코드
export const list = window.onload = () => {
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://api.velog.io/rss/wow";
xhr.open(method, url, true);
xhr.withCredentials = true;
xhr.onload = () => {
let data = xhr.response;
let xmlDocs = new DOMParser().parseFromString(data, "text/xml");
const items:any = xmlDocs.getElementsByTagName("item");
for(let item of items) {
for (let childrenNode of item.children) {
console.log(childrenNode.tagName);
console.log(childrenNode.textContent);
}
}
}
xhr.send();
}하지만 이 경우 CORS 에러가 발생하게 됩니다.
CORS는 Cross-Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유 **라고 하는데, 서로 다른 출처이기 때문에 발생하는 에러**라고 생각하면 됩니다.
[TODO] CORS는 다음번에 자세히 정리하도록 하겠습니다.
저는 프로젝트에 바로 사용해야하기 때문에 프론트엔드에서 CORS 에러를 빠르게 해결 가능한 방법을 찾아보다가 아래 방법을 선택하기로 했습니다.
참고로 해결 방법에는 프록시 서버 만들기, http-proxy-middleware 라이브러리 활용하기 등의 방법이 있었습니다.
2. RSS to Json converter 사용 및 프로젝트 적용
https://rss2json.com/#rss_url=https://www.theguardian.com/international/rss
위 사이트를 클릭해보면 예시가 나옵니다.
rss_url 이 부분에 https://v2.velog.io/rss/벨로그아이디 를 넣어주면 됩니다.
예시
https://api.rss2json.com/v1/api.json?rss_url=https://api.velog.io/rss/wwowww
axios, useQuery를 사용해 적용한 코드
// fetchBlogPostData
import axios from "axios";
export const fetchBlogPostData = async () => {
const response = await axios.get("https://api.rss2json.com/v1/api.json?rss_url=https://api.velog.io/rss/wwowww")
return response.data
}// ussQuery 사용 코드
import { useQuery } from "@tanstack/react-query";
import { fetchBlogPostData } from "../index";
const useBlogPost = () => {
const { isLoading, error, data } = useQuery({
queryKey: ["blog"],
queryFn: fetchBlogPostData
})
return { isLoading, error, data }
}
export { useBlogPost }출력 화면
적용 후, 데이터를 확인해보면 잘 출력되는 것을 확인할 수 있습니다.
