2024.06.02.
리액트로 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"/>} 제공되는 값에 대해 여러가지 가공과정을 거칠 수 있으므로, 글 목록 갯수를 원하는대로 지정한다거나 내용을 몇글자까지 표출할지 지정하는 등 자신이 원하는대로 출력 형식을 지정할 수 있을 것이다. 일련의 과정을 거친다면 새로운 글을 작성해도 정상적으로 바로바로 잘 가져오는걸 확인할 수 있고, 이런 방법을 통해 정적 페이지에서도 동적으로 값을 가져올 수 있다.
