Notion DB & Notion API 사용하기_2. Notion API

1. Notion API 아키텍쳐

이전 포스트에서 Notion 테이블을 만들고 API Token도 만들었으니
이제 바로 Notion API를 호출하면
Notion DB로 서버 없이 웹페이지 만들 수 있겠지라는 생각에 Notion API를 사용한 것이었는데...
웹브라우저에서 바로 Notion API를 호출 할 수 없습니다.

Notion API를 사용하기 위한 아키텍처는 아래와 같습니다.

Notion API Architecture Ⓒr-0o0-j.tistory.com

클라이언트인 웹브라우저에서 Notion API를 직접 호출하여 Notion Table에 접근하는 것이 아니라
서버에서 Notion API를 호출하여 Notion Table에 접근 해야합니다.

서버 없이 간단한 프로젝트를 하려다가 서버까지 만들어야하는 상황이 되었습니다.

본인이 편한 언어로 서버로 만들면 됩니다. 
저는 Javascript가 가장 편하기 때문에 자바스크립트 기반의 서버를 만들고
Notion API를 호출 하였습니다.

로컬에서 뿐만 아니라 웹페이지가 운영 되어야 했던 상황이라 Cloud Flare Wrangler로
서버를 만들어서 Notion API를 사용 했고
Cloud Flare Wrangler는 다음에 소개해보도록 할께요 >_<

---

2.  Notion Developers

https://developers.notion.com/reference/post-database-query

Query a database

Notion CRUD API는 Notion Developers 레퍼런스에서 보고 사용하면 됩니다.
그리고 Notion API는 자바스크립트 뿐만 아니라 C, C#, Java, python 등 다양한 언어에서
사용할 수 있도록 example code를 제공하고 있습니다.

Notion API 지원 언어 종류

---

3. Query a database

Query a database 는 쉽게 생각하면 GET 메소드입니다.
하지만 페이지에 보면 POST라고 쓰여있습니다. 노션 테이블의 리스트를 조회하기 위해서는
서버에서 GET 메소드를 호출하는 것이 아니라 POST메소드 호출을 해야합니다.

Authentication은 my-integrations에서 생성한 API Token입니다.

토큰 발행 방법은 

2022.10.20 - [[YERIEL] 개발일기/DataBase] - Notion DB & Notion API 사용하기 _ 1. Table & API Token 생성

Notion DB & Notion API 사용하기 _ 1. Table & API Token 생성

이전 게시물에서 자세히 확인 할 수 있습니다.

 

Language를 선택하면 해당 언어 문법에 맞게 사용하는 코드를 제공하고 있고
자바스크립트는 라이브러리에 따라서도 예시 코드를 제공하고 있습니다.

자바스크립트 api 라이브러리 종류

params 종류

페이지 하단에 보면 path params와 body params를 사용하는 법에 대해서도 설명이 있습니다.
path params인 database_id는 필수 값이고 database_id는 노션 url에서 확인할 수 있습니다.

database_id 확인하기

database_id 예시

database_id에 노션 테이블이 있는 페이지의 database_id를 추가하고 Notion API Token까지
입력하면 100개의 리스트를 가져오는 GET 메소드 호출을 하는 코드가 EXAMPLES 칸에 친절하게
나타납니다. 그대로 복사해서 서버에서 사용하면 됩니다.

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    'Notion-Version': '2022-06-28',
    'content-type': 'application/json',
    authorization: 'Bearer secret_notion_api_token'
  },
  body: JSON.stringify({page_size: 100})
};

fetch('https://api.notion.com/v1/databases/f59d47dfb3e148bc89079c3e079d36ea/query', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

서버에서 POST로 CoffeeLog 테이블의 API를 호출하니 테이블에
저장된 3개의 리스트가 잘 불러와지는 것을 확인할 수 있습니다.

---

4. Filter & Sort

Sort는 Option의 body에서 property에는 컬럼명, direction에서는 정렬방법을
가진 sorts를 추가하면 됩니다. Filter는 Option의 body에서 Property에는 컬럼명, 검색 조건,
검색어를 filter에 추가하면 됩니다.

body: JSON.stringify({page_size: 100, sorts: [{property:"Date", direction: 'ascending'}]})

body: JSON.stringify({page_size: 100, filter: {property: "CofeName" ,title: {"equals": "어반라운지"}}})

 더 자세한 내용은 레퍼런스를 참조하면 됩니다.

https://developers.notion.com/reference/post-database-query-sort

https://developers.notion.com/reference/post-database-query-filter