Notion을 통해 Blog 글 불러오는 겸 블로그 다시 만들기
왜?
최근 블로그를 배포해 놨던 gatsby cloud가 완전히 서비스가 종료되어 netflify로 옮기는 작업을 진행하게 되었습니다…ㅠ 이럴줄 알았으면 도메인을 구매해 놓을걸 그랬습니다.
어찌됬든 그 과정에서 블로그를 점검해보니 사용하고 있는 gatsby 버전이 v3으로 최신 버전이 v5 으로 버전 업그레이드를 하는것이 쉽지 않겠다는 생각이 들었습니다. 차라리 다시 만드는게 더 빠르겠다 라는 생각도 들었습니다. 물론 다시 gatsby를 사용해서 만들 수 도 있지만 이번에는 사용 법도 익히고 익숙해질 겸 nextjs13을 활용하여 다시 만들고 그 동안 불편하다고 생각했던 글을 좀 더 쉽게 관리할 수 있도록 개선하는 것을 우선 목표로 잡았습니다.
기존 글 작성시 문제점
저의 경우 blog에 올리는 글 들은 모두
notion에 작성하고 정리를 진행한 뒤 블로그에 옮기는 방식으로 진행하고 있습니다. 글을 작성하면서 매번 드는 생각인데 작성한 글을 mdx 파일에 옮기고 반영하는 번거로운 과정을 거치는것은 개인적으로는 귀찮은 일이라고 생각합니다.그래서 좀 더 편하게 관리 할 수 있는 방법이 뭐가 있을지 고민을 하다 보니
notion을 CMS(Content Management System)로 활용해서 작성한 글들을 불러오고 관리하면 해결할 수 있지 않을까? 라는 생각이 들었습니다.그래서 검색을 해보니? 오호!
notion 에서 이미 자체 api를 통해 데이터를 불러올수 있는 방법을 제공해주고 있으며 react-notion-x , notion-client, notion-types, notion-utils같은 라이브러리 를 통해 쉽게 컨텐츠를 불러와 페이지 내에 렌더링 할 수 있다는 것을 알게 되었습니다.Notion 데이터 활용
우선
notion api에 대해서 알아보겠습니다.notion api는 notion이 다른 서비스 간 데이터를 주고받을 수 있게 해줍니다. 이를 통해 다른 서비스에서 notion 의 데이터를 읽거나 쓸 수 있습니다.notion api 를 사용하기 위해서는 notion 개발자 문서에서 설명하고 있는것 처럼 notion integration을 생성하여 문서와 연결해줘야 합니다. (자세한 설명은 문서에 잘 작성되어 있으니 읽어보시면 좋을거 같습니다)
이후 생성된 token을
@notionhq/client 에서 제공하는 Client의 auth 값으로 전달하여 notion api의 데이터를 받아올 준비를 합니다.notion api 에서는 databases , pages , blocks , comments , users 그리고 search 관련 데이터를 받아올 수 있는 endpoint를 제공하는데 저의 경우 notion에 작성한 blog 글들의 정보가 필요하기 때문에 databases , pages 그리고 blocks 에 대해 어떤 방식으로 제공이 되고 사용해야 되는지 확인을 해봤습니다.databases
notion에서
database 는 정보를 구조화하고 저장하는 기본적인 단위입니다. 속성 스키마 정보를 얻어올 수 있는 retrieve 와 포함되어 있는 page 목록을 불러올 수 있는 query api 가 제공됩니다. 이 api들을 사용하기 위해서는
databaseId 가 필요하며 database가 생성되어 있는 url(https://www.notion.so/<database_id>?v=<view_id>) 을 통해 확인 할 수 있습니다. 
pages
page 역시 database 와 동일하게 retrieve api가 제공되고 있습니다. 해당 api로 page object를 조회하여 page properties 정보를 확인 할 수 있습니다.page_id의 경우
database.query api에 각 page에 대한 id와 title 등 정보가 포함되어 있으니 활용하거나 혹은 page url (https://www.notion.so/<page_id>?v=<view_id>) 을 통해 확인 할 수 있습니다.blocks
block은
notion 에서 가장 기본적인 구성 요소 입니다. 모든 구성 요소들은 block object로 표현 될 수 있습니다. 그렇기에 page, database 정보 역시 block object로 받아올수 있습니다.출력되는 데이터를 확인해보면 내부에
has_children 이라는 값이 보입니다. 해당 값의 경우 특정 block 아래에 다른 컨텐츠가 있는지 확인해주는 용도로 사용하며 blocks.children.list 를 통해 children 정보를 다음과 같은 형식으로 받아오게 됩니다.react-notion-x
notion api에 대해 알아보니 생각보다 구조가 복잡합니다. 구조를 원하는 데로 사용 할 수 있도록 커스텀 작업이 필요할거 같습니다. 제가 원하는 것은 노션에 작성한 글을 가공 없이 원본 그대로 가져와 페이지에 렌더링 해주는 것 입니다. react-notion-x 는 notion 컨텐츠를 react 프로젝트 내에 랜더링 할 수 있도록 도와줍니다. 사용방법도 어렵지 않으며 그저 몇 가지 셋팅만 해주면 아주 쉽게 사용 할 수 있습니다.예제에서 알려주는것 처럼 기본적으로
notion-client 를 설치한 뒤 아래와 같은 코드를 작성한 뒤 pageId 값을 getPage함수에 전달, 반환 받은 page 컨텐츠 정보를 포함하고 있는 recordMap 을 react-notion-x 에서 제공하는 NotionRenderer 컴포넌트에 전달해주면 기본적으로 끝이며 아래 이미지와 같이 notion에 작성된 글이 그대로 노출이 되는것을 확인 할 수 있습니다. 정말 간단하죠?!
만약 추가적인 옵션을 적용하고자 한다면 사용자 선호에 따라 적용하면 됩니다.
글 내용을 가져오는건 OK 그럼 글 목록은?
간단합니다! 위에 언급했었던
notion.database.query 를 이용하면 됩니다. 물론 데이터를 그대로 사용하는 것이 아닌 필요한 데이터만 포함되도록 해서 말이죠ㅎ저의 경우 아래 같이 코드를 통해 데이터를 정제하는 과정을 거쳐 리스트가 반환되도록 하였습니다.
참고: