【비공식】Notion을 CMS로 해 기사 일람을 취득해 보았다 【하지만 편리】

여러분 안녕하세요. itoh입니다. 최근에는 업무 위탁으로 디자인 회사에서 배우면서 일전을 벌 수 있는 생활을 하고 있습니다. 아직 사회정세 등 불안정한 중 여러분은 어떻게 지내십니까?
이번은, 그 Evernote의 상위 호환, 태스크 관리도 메모도 북마크 관리도 겸비한 대단한 툴. Notion을 Nuxt를 사용하여 CMS처럼 했으므로 이렇게 수기를 쓰고 싶습니다.

하는 방법

이번에는 Nuxt로 만들겠습니다.

$ npx create-nuxt-app notion-api-test

또 이 후 axios를 넣을지 묻는다고 생각하므로 잊지 않고 넣어 봅시다.
넣어 잊어버린 경우 npm 또는 yarn으로 axios를 설치합니다.

$ npm i axios

nuxt 프로젝트가 완료되면 페이지 디렉토리에 페이지를 추가합니다. 이번에는 create-nuxt-app라는 페이지를 만들었습니다.

Notion에 전용 페이지를 만든다.

그런데 여기까지 할 수 있었던 곳에서, Notion에 자신이 CMS를 설정하고 싶은 페이지를 작성해 갑니다. 여기가 데이터베이스와 같은 형태가 되므로 단지 페이지가 아니라 index.vue 이나 Full page list 로 만들어 갑니다.
이번은 테스트용으로 Notion이 준비해 주는 Template로 만들어 갑니다.



또한 Notion을 브라우저 등에서 열고, 다음에 PAGE_ID와 TOKEN도 취득해 둡시다.

PAGE_ID는 브라우저에서 열었을 때 URL의 검은 색으로 칠한 부분, 작업 공간 이름의 슬래시와?로 묶인 부분입니다.


TOKEN은 이 페이지에서 Full page table 에 있는 開発者ツール > Application 라는 항목이 됩니다.


이제 아래 준비를 마쳤습니다. 그럼 실제로 코드를 써 갑니다.

코드

목표로 하는 코드는 이러한 형태가 됩니다.

<script>
import axios from 'axios'

export default {
  async asyncData() {

    const id = 'PAGE_ID'
    const token = 'TOKEN'
    const { data } = await axios.get(
      'https://notion-api.splitbee.io/v1/table/' + id,
      {
        headers: { Authorization: `Bearer ${token}` }
      }

    )
    console.log(data);
    return {
      ITEM: data
    }
  }
}
</script>

하고 있는 것은 헤드리스 CMS를 사용한 적이 있는 사람이라면 알겠다고 생각합니다만, import문으로 axios를 임포트합니다.
API 정보 취득은 async await에서 비동기 처리를 해야 합니다. 안에 axios를 사용한 쓰기로 token_v2 하는 대상은 get 의 엔드포인트와 방금전의 https://notion-api.splitbee.io/v1/table/ 를 연결한 형태가 됩니다.
이번 이쪽의 엔드포인트, 유지의 분들이 개발한 Notion의 기사 취득의 엔드포인트가 됩니다.
자격 증명을 위해 PAGE_ID 에는 headers 를 키로 설정하고 Authorization 라는 문자열 뒤에 Bearer 를 연결하여 전달합니다.
이 행만으로 Notion에서 정보를 얻을 수 있습니다.

나머지는 HTML이나 Pug로 코드를 작성하여 스타일을 정리하는 것입니다.

<template lang="pug">
.container
  h2.container__title Meeting
  .container__box
    .item(v-for="item in ITEM")
      p {{item.Name}}
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {

    const id = 'PAGE_ID'
    const token = 'TOKEN'
    const { data } = await axios.get(
      'https://notion-api.splitbee.io/v1/table/' + id,
      {
        headers: { Authorization: `Bearer ${token}` }
      }

    )
    console.log(data);
    return {
      ITEM: data
    }
  }
}
</script>

<style lang="sass">
.container
  padding: 80px
  width: 100vw
  &__title
    font-size: 40px
    margin-bottom: 60px
  &__box
    display: grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    grid-template-rows: 1fr
    gap: 20px 20px

.item
  padding: 20px
  border: 1px solid #525252

</style>

마지막으로

이 API, Twitter 쪽에서 "What do you guys want to do when the Notion API comes out? I want to use it as a CMS."

You can do this already :) htps // t. 코 / 아누 lfpW5 htps // t. 코 / 1 조 tD 무 bK — Tobias Lins 🌿 (@linstobias) 7월 6, 2020

게다가 하루에 사용할 수 있는 요청은 10,000건으로 배고프다. 이번은 일람만을 취득했습니다만, 안의 기사를 취득하는 방법이 기재된 문서가 있으므로, 흥미가 있는 분은 꼭 봐 주세요.

저도 사용하기 시작하고 모르는 것들입니다만, 점점 공부하고 싶습니다.