2024년 6월 2일
velog에서는 rss 피드형식으로 된 api를 제공하고 있다.
@ 부분에 자신의 아이디를 가져다 놓으면 자신이 작성한 글의 title, pubData(작성일), description(글 내용) 등을 가져올 수 있다.
이를 정적 React 페이지에서 XML을 파싱하여 필요한 정보를 추출하고 렌더링 시킬 수 있다. 본인은 github-pages로 포트폴리오 사이트를 운영하고 있기에 동적으로는 불가능하여 이런 방법을 찾아보았다.
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://api.velog.io/rss/@계정명')
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const xml = parser.parseFromString(data, 'application/xml');
const items = xml.querySelectorAll('item');
const postsArray = Array.from(items).map(item => ({
title: item.querySelector('title').textContent,
link: item.querySelector('link').textContent,
description: item.querySelector('description').textContent,
}));
setPosts(postsArray);
})
.catch(error => console.error('Error fetching the RSS feed:', error));
}, []);
return (
Velog Posts
{posts.map((post, index) => (
{post.title}
{post.description.substring(0, 100)}...
))}
);
}fetch를 사용해 api를 가져올 수 있는데 이렇게 바로 가져오면 CORS 정책 오류가 발생한다. 이를 해결하기 위해선 프록시 서버를 사용해야하는데 단순하게 무료로 사용할 수 있는 프록시가 있다.
이런식으로 fetch 값에 넣어주면 되는데, 무료인만큼 호출횟수 제한이 존재한다. 다른 CORSProxy 서버를 알고있다면 사용해도 무방하다.
위와 같이 XML을 파싱해오고 CSS를 건드려주면 아래와 같이 가져올 수 있다.
이미지는 썸네일을 가져오는건 지원하지 않아 각 글의 첫번째 이미지를 가져오도록 했다.
썸네일을 올릴 때 파일업로드가 아닌, 이미지 파일을 Ctrl + V로 넣어주면 썸네일 이미지를 첫번째 이미지로 받아들여 표시해준다.
.then(data => {
const imageUrl = firstImage ? firstImage.getAttribute('src') : null;
...
{post.imageUrl && <img src={post.imageUrl} alt="Post thumbnail"/>}제공되는 값에 대해 여러가지 가공과정을 거칠 수 있으므로, 글 목록 갯수를 원하는대로 지정한다거나 내용을 몇글자까지 표출할지 지정하는 등 자신이 원하는대로 출력 형식을 지정할 수 있을 것이다.
일련의 과정을 거친다면 새로운 글을 작성해도 정상적으로 바로바로 잘 가져오는걸 확인할 수 있고, 이런 방법을 통해 정적 페이지에서도 동적으로 값을 가져올 수 있다.