방학기간을 활용해서 자기소개 홈페이지를 react로 재작성 중인데,
잡다한 수상 내역 같은 것들을 노션에다가 저장해두고
하드코딩해서 따로 자기소개 페이지에 옮기는 방법으로 관리했었다.
리액트의 컴포넌트를 좀 써먹을 겸 해서,
노션 API로 수상 내역을 호출한 다음 출력해보는 부분까지 진행할 예정이다.
기존 DB는
이렇게 유지되고 있다.
이 데이터베이스에서 값들을 가져와서 다뤄보도록 하겠다.
API 발급받기
에서 API 발급을 위한 자격증명을 생성해주어야 한다.
[새 API 통합 만들기] 를 선택한다.
워크스페이스를 확인하고, 이름을 정해준다.
시크릿 키를 보관해두어야 한다.
말 그대로 보안키니까 바깥으로 새어나갈 일이 없도록 주의할것.
이러면 API의 발급은 끝난다.
API가 노션 DB를 조회할수 있게 하기
이제 API가 노션 데이터베이스를 읽어볼 수 있게 하기 위해서,
각 데이터베이스 페이지별로 API에 권한을 열어줘야 한다.
API로 호출하고싶은 DB 페이지로 접속해서,
[우측상단 점 세개] > [연결 추가] > [앞서 설정한 API 이름] 순으로 선택한다.
[확인] 으로 권한을 여는것에 대한 동의를 해준다.
API 호출
소스코드 작성에 앞서서, Postman 으로 API가 정상 동작하는지 확인할 것이다.
여기서는 소스코드를 작성해서 API를 호출하는 부분까지는 따로 설명하지는 않을듯 하다
언어별로 구현방법이 다 다르니 도큐멘테이션 참고해서 구현하면 될 듯 하다.
공식 API 문서를 읽어보면 이거 외에도
Retrieve a database
라고 해서 GET 메소드로 호출받는게 있는데, 걔는 데이터베이스의 속성값을 받아오는 API라
데이터베이스 내부 값을 조회하고 싶을때는 [Query a database] 쪽을 참조해야 한다.
앞서 권한을 설정해준 DB 페이지의 [공유] 버튼을 누르고, 우하단 [링크 복사] 를 누른다.
링크창을 크롬 등에다 대충 복붙해 넣으면, 저렇게 / 로 구분된 바로 뒤에
영문과 숫자가 혼용된 문자열이 나온다.
?v= 부터는 Params 이니까 그 앞까지를 잘라서 복사한다.
복사한 문자열이 DB페이지의 아이디가 된다.
API 호출 엔드포인트는 다음과 같다.
https://api.notion.com/v1/databases/[db id]/query
[db id] 란에 바로 위의 DB페이지 id를 붙여넣어 주면 된다.
https://api.notion.com/v1/databases/a22a7421f4ee4ea6aca32be5b142ce08/query
API 통신을 위한 토큰으로 Bearer 토큰을 사용하며,
토큰의 내용물은 API를 발급 받는 과정해서 복사해두어야 했던 시크릿 키이다.
헤더에 노션 API의 버전 정보와, 리턴받을 타입이 JSON임을 명시해주면
API를 호출하여 정보를 받아 볼 수 있다.
Bearer Token, Header, Url 셋다 잘 맞춰서 전송해주면
아래와 같은 결과를 얻을 수 있다.
API의 Request limit은 "대략" 3호출/초 이니,
초당 3회 이상의 호출을 하게되는 일이 없도록 캐싱을 해둔다던지 해야한다.
에 의하면 호출 제한이 걸리면
"rate_limited" 를 반환한다고 하니 참고할것.
