리액트 심화 프로젝트

프로젝트 계획상 게시글 작성시 내가 적은 TIL 주소를 넣으면 opengraph를 활용하여 미리보기를 보여줘야 한다.

open graph

오픈 그래프는 웹페이지의 메타데이터를 정의하는 프로토콜로 정의된 메타데이터를 활용하여 미리보기가 가능한 링크를 생성하게 해준다.
우리도 라이브러리를 사용하여 사이트의 메타데이터를 분석하여 필요한 정보를 가져와 미리보기를 생성할 수 있다.

open-graph 라이브러리

처음에는 open-graph라는 라이브러리를 사용했다.
업데이트가 2년전이라 망설여졌지만 사용방법이 간단해 보여서 선택했다.
Readme를 따라 코드를 작성하니 url을 통해 쉽게 데이터를 추출했다.

근데 지금은 서버 컴포넌트였다.
사용자로부터 TIL url을 제공받기 위해서는 클라이언트 컴포넌트에서 동작해야 한다고 생각을 했다.

클라이언트 컴포넌트로 지정하니

바로 에러가 발생했다.
열심히 검색해도 이 에러의 정확한 원인은 모르겠지만 라이브러리를 서버 컴포넌트에서 사용하지 않아서 생긴 거 같았다.
그래서 다른 라이브러리를 찾아보기로 했다.

open-graph-scraper 라이브러리

이번에는 다운로드수가 가장 많은 open-graph-scraper 라이브러리를 가져왔다.
하지만 open-graph와 같은 구간에서 에러가 났다.
여기서 open-graph를 추출하기위해 서버통신이 이루어짐으로 서버클라이언트에서 작동하는게 맞다고 생각했다.
그래서 서버클라이언트에서 움직이게 해줬다.

클라이언트 컴포넌트에서 url값을 보내고

서버 컴포넌트에서 받았다.

그리고 에러가 떴다.
클라이언트 컴포넌트에 서버 컴포넌트를 잘못 임포트하면 서버 컴포넌트가 클라이언트 컴포넌트로 변한다고 강의에서 들은 기억이 났고 formData로 넘겨주는 방법이 떠올랐다.

후 드디어 url을 가져가서 필요한 내용을 추출해온다!
이제 서버 컴포넌트에서 클라이언트 컴포넌트로 가져오기만 하면 된다.
이건 내일!