리액트로 velog 포스트 가져오기(파싱)

velog에서는 rss 피드형식으로 된 api를 제공하고 있다.

https://api.velog.io/rss/@계정명

@ 부분에 자신의 아이디를 가져다 놓으면 자신이 작성한 글의 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 정책 오류가 발생한다. 이를 해결하기 위해선 프록시 서버를 사용해야하는데 단순하게 무료로 사용할 수 있는 프록시가 있다.

https://proxy.cors.sh/https://api.velog.io/rss/@계정명

이런식으로 fetch 값에 넣어주면 되는데, 무료인만큼 호출횟수 제한이 존재한다. 다른 CORSProxy 서버를 알고있다면 사용해도 무방하다.

위와 같이 XML을 파싱해오고 CSS를 건드려주면 아래와 같이 가져올 수 있다.

이미지는 썸네일을 가져오는건 지원하지 않아 각 글의 첫번째 이미지를 가져오도록 했다.

썸네일을 올릴 때 파일업로드가 아닌, 이미지 파일을 Ctrl + V로 넣어주면 썸네일 이미지를 첫번째 이미지로 받아들여 표시해준다.

.then(data => {
const imageUrl = firstImage ? firstImage.getAttribute('src') : null;

...

{post.imageUrl && <img src={post.imageUrl} alt="Post thumbnail"/>}

제공되는 값에 대해 여러가지 가공과정을 거칠 수 있으므로, 글 목록 갯수를 원하는대로 지정한다거나 내용을 몇글자까지 표출할지 지정하는 등 자신이 원하는대로 출력 형식을 지정할 수 있을 것이다.

일련의 과정을 거친다면 새로운 글을 작성해도 정상적으로 바로바로 잘 가져오는걸 확인할 수 있고, 이런 방법을 통해 정적 페이지에서도 동적으로 값을 가져올 수 있다.