#5 Notion API

사용할 워크페이스에 포트폴리오 데이터베이스 페이지를 만들어줍니다.

처음에 빈 페이지이지만 /database를 입력해 표를 만들어 주고 프로젝트의 대한 정보들을 입력해 줍니다.

그리고 위 사진처럼 보여주기 위해서 레이아웃은 갤러리로 설정하고 속성을 눌러 프로젝트의 정보들을 보여줄 수 있게끔 표시를 해둡니다.

그리고 이미지가 안 보일 수 있는데 레이아웃에 들어가 카드 미리 보기를 커버로 해줍니다.

notion API를 검색해 우측 상단에 View my integrations를 들어가시면 위 사진처럼 들어가지고 새 API통합 만들기를 클릭하면 됩니다.

클릭하면 위 사진처럼 나올 텐데 이름은 작성해 주고 연결할 워크스페이스를 선택해 주면 됩니다.(워크스페이스는 아까 만든 데이터베이스 페이지가 있는 워크스페이스를 선택!)

콘텐츠 기능은 읽기, 업데이트, 입력이 있는데 자유롭게 선택하시면 됩니다.(저는 일단 읽기만 할 거라 콘텐츠 읽기만 선택)

댓글 기능도 자유지만 (저는 아무것도 선택하지 않았습니다.)

사용자 기능 또한 자유지만 (저는 사용자 정보 없음 선택했습니다.)

그리고 제출을 누르면 됩니다.

제출하면 시크릿 키를 주게 됩니다.

그리고 API 통합 유형이 있는데 프라이빗으로 선택했음.

우리가 만들었던 데이터베이스를 읽어오기 위해서 notion API 페이지에 API Reference를 눌러 Databases 안에 Retrieve a database를 클릭하면 위 사진처럼 사용방법이 뜹니다.

제대로 받아오는 확인 해보기 위해서는 엔드포인트⇒ https://api.notion.com/v1/databases/{database_id}를 입력해야 한다.

노션 데이터베이스 주소는 https://www.notion.so/3bad12973f864cd58ed7b7caad5e2a41?v=b9cba6444dd44889a034a0684a1a029d

노션 데이터베이스 주소 ⇒ 3bad12973f864cd58ed7b7caad5e2a41? 여기까지가 내가 만든 데이터베이스 주소이다.

그리고 Authorization을 등록해줘야 하는데 포스트맨에 Authorization 클릭해 Type은 Bearer Token으로 하여 아까 노션 API 등록했던 시크릿 키를 넣어준다.

그리고 Headers에 Notion-Version을 넣어준다.(사이트에 있는 그대로 넣어준다.)

그리고 Send 하기 전에 데이터베이스 페이지 만들었던걸 API와 연결을 시켜줘야 한다.

다른 사람들을 보면 공유를 눌러서 뜨는데 난 안 떠서 연결로 해줬다.(이것 때문에 한참 시간을 날렸다ㅠ.ㅠ)

그리고 주의해야 할 점은 데이터베이스 페이지를 만들 때 전체페이지로 해놓고 그 URL을 넣어줘야 값이 뜬다.

이러면 일단 get 요청 읽어오는 방법은 끝!

Post 코드에서 불러오는 방법

post로 받아오는 방법은 Query a database를 이용한다.

옆에 JavaScript를 입력해 뭐로 받아올지 선택할 수 있는데 AXIOS로 받아오기 위해 AXIOS 선택하였다.

get 요청하고 똑같다. Authorization, Headers를 똑같이 등록한 뒤

엔드포인트 ⇒ https://api.notion.com/v1/databases/{database_id}/query database_id를 넣어주면 된다.

(3bad12973f864cd58ed7b7caad5e2a41)

body 에다가 post 할 수 있는데 위 사진처럼 filter, sorts 등 있다.

sorts를 사용해 볼 것이다.

오름차순 내림차순 정렬해 주는 기준이다.

저런 식으로 넣어 오름차순 내림차순을 설정할 수 있다.

지금 위에 거는 property가 Name으로 되어있는데 바꿀 수 있다.(내가 설정한 경우 Name이 아니라 프로젝트 이름으로 해놓았기 때문에 Name → 프로젝트 이름으로 바꿔줘야 한다.)

ascending ⇒ 오름차순 예를 들어 박현석 프로젝트 1 ~ 5까지 있다 해보면 1~5 로 정렬

descending ⇒ 내림차순 예를 들어 박현석 프로젝트1 ~ 5 까지 있다 해보면 5~1로 정렬