노션에서 브런치 최신 포스트 가져오기
Get Latest Brunch Post from Notion
나는 포스트 작성은 브런치에서 하고, 일정 관리나 기타 자잘한 내용은 Notion에서 관리를 하려고 한다.
하지만 이렇게 두 플랫폼을 아예 별도로 운영하는 것은 굉장히 아까운 일이다.
(현재는 노션을 무료버전을 쓰고 있지만, 유료 플랜을 사용할 경우) 노션의 콘텐츠를 통해 유입되는 사람도 있을 수 있는데, 노션과 브런치가 잘 연동되어 있으면 두 플랫폼을 통해 SEO에서 이득을 볼 수 있다고 생각했다.
그래서 메인을 브런치를 두고 브런치의 데이터를 기반으로 Notion에 콘텐츠를 추가하는 코드를 작성해볼 예정이다.
브런치 포스트 데이터 추출
Get Brunch Post Data
브런치에 내가 작성한 포스트를 추출해야 했다. 처음에는 무작정 크롤링을 하려고 했었다. 실제로 크롤링으로 포스트와 서브타이틀 정도를 가져오는 코드까지 작성을 했다.
하지만 이게 웬걸, 의도했는지는 모르겠지만 우리의 짱짱 브런치님들께서 포스트를 가져오는 API가 있으셨다.
게다가 단순 크롤링에서 추출하기 힘든 각 포스트별 상세 정보들이 모두 들어있었다.
(이게 무작정 내가 사용해도 되는 API인지는 몰라서 주소는 공개하지 않겠지만, 원하신다면 따로 알려드리겠습니다.)
아무튼 나는 일단 당장에는 최근 포스트를 기반으로 데이터를 가져가지만, 나중에는 많이 본 포스트라거나 좋아요를 많이 받은 포스트 등의 콘텐츠도 작성하면 좋아 보인다.
노션 API 학습하기
Study Notion API
노션 API를 등록하는 방법은 관련된 포스트가 많으니까 따로 적진 않겠습니다.
저는 노션 API를 등록한 후 notion api의 공식 문서를 보고 작성하였습니다.
API 문서를 보면 @notionhq/client 라이브러리를 이용해 진행되는걸 베이스로 설명을 하긴 하지만, 중간중간 일부 기능들은 axios를 이용하게 설명이 되어 있어서 그냥 axios로 통합해서 관리하였습니다.
생각보다 API 문서가 마냥 친절하지는 않고, 실제 노션에서 동작하는 것처럼 디테일하게 동작하는 건 API만으로는 무리라고 본인들도 설명하고 있으므로, 간단하게 등록 및 삭제, 수정 정도만 한다고 생각하시고 이용하시는 게 마음 편할 것 같습니다.
(심지어 등록은 위치도 마음대로 못 정함.. 하려면 할 수 있겠는데 매번 전부 복사하여 백업해 두고, 원하는 곳에 끼워 넣은 후에 전체적으로 새로 업데이트하는 느낌으로 진행하거나, 아예 노션에서 비어있는 Paragraph를 미리 만들어 두고, 거기에 update 하는 방식으로 진행해야 합니다.)
타입스크립트
저는 이번 기능을 개발하면서 타입스크립트를 이용해 개발하였습니다.
보다 깔끔한 타입스크립트 이용을 위해 이용하려는 콘텐츠의 종류에 맞춰 타입을 명시해줘야 했는데, 처음에는 doc를 보고 작업을 하다가, api통신을 하면서 매번 doc에 맞춰 Request와 Response의 타입을 작성하는 것은 비효율적이라는 생각이 들었고, @notionhq/client를 뒤져본 결과
@notionhq/client/build/src/api-endpoints
에 타입이 정의되어 있는 것을 확인하였습니다.
노션 API를 통해 브런치의 최근 포스트 전달하기
Send Latest Post from Brunch to Notion with Notion API
여기서 정말 많이 헤맸습니다. 처음에는 그냥 아무 생각 없이 빠르게 완성하고자 Append block children 기능을 이용해서 제목과 링크만 연결해서 작성하려고 했습니다.
위에서 서술했다시피 원하는 위치에다 내용을 넣고 싶으면 비어있는 paragraph를 미리 만들어 놓고, 그 block id를 기반으로 내용을 update 하여야 합니다.
처음에는 한 개의 empty paragraph만 만들어 놓고, 최신 포스트를 4개보다 많으면 4개만 가져오고, 그보다 적으면 개수만큼 가져오게끔 하여 한번에 children block의 형태로 집어넣으려 했습니다.
하지만 두둥! Children Block으로 등록하면, 해당 block의 child block로 작성하는 거다 보니까, empty paragraph의 child block으로 등록이 되었고, 왼쪽에 의도치 않은 tab이 생겼습니다. 게다가 이는 움직일 방법도 없습니다.
이게 마음에 들지 않아, 그냥 어차피 내 브런치 포스트 가져오는 거고 이미 4개는 작성해 놨으니까, 4개의 empty paragraph를 만들고, 이 4개를 최신 포스트 순으로 업데이트를 하는 방식으로 방향을 바꾸었습니다.
이는 잘 적용이 되긴 했지만, 무언가 마음에 안 듭니다. 예쁘지가 않아요. 진짜 그냥 제목에 링크만 달랑 달려 있는데, 저는 제 브런치 포스트의 meta data도 같이 보여주고 싶다는 생각이 들었습니다.
이를 위해 노션에는 Bookmark라는 기능이 있습니다.
주소를 링크시키면 해당 링크의 metadata를 보여주며 링크를 만드는 기능인데, 이 기능을 활용하고자 마음먹었습니다.
마침 API에도 bookmark block을 등록할 수 있게 기능이 구현되어 있었습니다.
저는 이에 맞추어 4개의 empty bookmark를 원하는 위치에 미리 작성을 해두고, url을 update 하게끔 코드를 작성하였으나...
하.. 스트레스... metadata를 전혀 가져오질 못하는 겁니다.
그냥 Notion Client에서 작성하면 잘만 가져옵니다. 제가 원한 건 아래의 형태인데, 위에 처럼 밋밋 그 자체예요. 이럴 거면 Bookmark를 쓸 이유가 없죠.
몇 시간 동안 원인이 뭐고, 두 데이터 간의 차이가 무엇인지 별의별 짓을 다 해보았습니다.
그리고 찾아낸 차이점은 API를 통해 생성된 Bookmark는 updated user가 bot이고, Client Bookmark는 제 노션 계정이었죠.
나머지 데이터는 디테일하게 들어가면 모르겠지만 일단 api에서 retrieve block api를 통해 받은 데이터를 기준으로 다를 게 없었습니다.
이럴 거면 api는 왜 존재하는가.. 바로 Notion에 문의를 넣었고 현재 답변을 기다리는 중에 있습니다.
Notion API는 잘만 쓰면 편리한 기능은 맞다고 생각합니다만, 들이는 시간에 비해 리턴이 예쁘지가 않습니다. 진짜 간단한 기능들 밖에 이용을 못해요.
그리고 document의 내용도 부실하고, 애초에 Notion의 이용자에 비해 API의 이용자 자체가 적은 느낌입니다. 업데이트 자체도 잘 안된다고 느꼈어요.
그럼에도 사용하실 분들은 이런 점을 염두에 두고 사용하시면 좋을 것 같습니다.
일단 이에 관련한 내용은 Notion Team이 holiday break를 가진다고 답변이 와서 그 이후에 추가적으로 작성하도록 하겠습니다.
Notion에서 정식적인 답변을 받았습니다.
답변을 받은건 며칠 전이긴 하지만 새해부터 일에 치이다 이제서 작성을 하네요.
정리하자면, 클라이언트에서 북마크를 생성할 경우 메타데이터를 가져오는 서비스가 백그라운드에서 호출이 됩니다.
하지만, API를 통해 만든다면 request timeout을 방지하기 위해서 북마크에 URL만 입력하게 구현되어 있습니다. 만약 메타데이터를 넣고 싶다면, Notion Client를 통해 만들어야 합니다.
이럴거면 무슨 의미가 있는지 모르겠습니다 ㅎㅎ..
어떤 식으로 사용할지는 좀 더 고민을 해봐야 할 듯 합니다.
처음의 생각대로 그냥 Paragraph형태에 링크만 거는 방식도 생각해봐야겠네요.
