게시글에 URL이 포함되어 있는 경우, 미리보기를 제공하는 기능이 있는데요. 해당 기능을 구현하기 위해 React에서 open-graph 라이브러리를 사용하였습니다.
우선, URL을 통해 미리보기를 제공하려면 해당 URL에 OGTag가 설정되어 있어야합니다.
OGTag란?
Open Graph Meta Tag 약자로, 웹페이지에 대한 간단한 정보를 html에 입력해두고 이 페이지를 보여주는 앱이나 서비스에서 이를 이용해 위의 스크린 샷과 같이 페이지에 대한 간략한 정보를 보기 쉽게 보여줄 수 있도록 하는 것입니다.
<OGTag 설정 방법>
<head>
......
<meta property="og:title" content="test"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://rootree.net"/>
<meta property="og:description" content="This is a description."/>
<meta property="og:image" content="http://img.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
......
</head>받아온 사이트에 OGTag가 설정되어 있다면, 해당 URL을 통해 HTML 코드를 들고오고 parsing하여 OGTag를 찾아낼 수 있을 것입니다.
위의 과정을 쉽게해주는 라이브러리로는 “open-graph” 라이브러리 가 있습니다.
사용도가 더 높은 라이브러리가 있지만, 다양한 기능을 쓰는 것이 아니라서 비교적 가벼운 open-graph를 선택하였습니다.
( 참고자료 : https://npmtrends.com/open-graph-vs-open-graph-scraper-vs-react-native-link-preview-vs-suq )
설치방법
npm install open-graph
yarn add open-graph
npm install @types/open-graph --dev
yarn add @types/open-graph --dev위의 라이브러리가 node.js 기반이다 보니, 클라이언트에서 api 호출했을 때 Module not found: Can't resolve 'fs'.. 등 에러가 발생할 수 있습니다. ( 이후,, cors 에러도 동반되겠지만요.. ) 위의 에러가 발생했을 시 아래 블로그를 참고하시어 조치해주시면 됩니다.
라이브러리 사용 예시
const url = 'https://bbs.ruliweb.com/hobby/board/300117/read/30653554';
og(url, function (err, meta) {
if(err) {
reject(err);
return;
}
resolve(meta);
});
위의 예시를 그대로 클라이언트 - dev환경에서 실행 시, CORS 에러가 납니다.
브라우저에서 직접 다른 도메인의 api를 호출하였기 때문이죠.
하지만, Next.js 환경에서는 - front 서버에서 html 코드를 전달해줄때 해당 코드가 실행될텐데 그때는 CORS에러가 나지 않고 terminal에 데이터가 찍히게 됩니다. 즉, 데이터를 받아올 수 있게되는 것이죠!
Next.js 환경이라면 terminal에 찍힌 데이터를 getStaticProps를 사용하여 들고올 수 있습니다.
CRA 환경일 경우, 서버환경이 없기 때문에 따로 서버를 만들거나 다른 조치가 필요할 거 같습니다.
import og from 'open-graph';
const getOg = () => new Promise((resolve, reject) => {
const url = 'https://bbs.ruliweb.com/hobby/board/300117/read/30653554';
og(url, function (err, meta) {
if(err) {
reject(err);
return;
}
resolve(meta);
});
});
export async function getStaticProps() {
const test = await getOg();
return { props: {test} }
}
const PreviewUrl = ({test}: any) => {
console.log('test',test);
return (
<>
</>
)
}
...
데이터 받아오는데 성공하였습니다~!
추가정보
- React-Microlink
위의 과정에서 더 나아가 파싱된 데이터를 UI 형태로 반환해서 보여주는 라이브러리
예시
import Microlink from '@microlink/react'
<Microlink url='https://www.google.com' />