새 블로그 개발일지 - 2: Notion Database

노션을 데이터베이스로 사용하기

앞서 작성한 포스트에서 노션을 컨텐츠 매니저로 활용한다고 언급했었다. 한번도 사용해본적이 없기에 일단 도큐먼트를 천천히 읽어본다.

Step1. intergration 만들기

이 링크로 이동하여 intergration 을 생성해준다.

Step2. intergration 과 데이터베이스 연동하기

intergration을 생성했으므로 데이터베이스와 연동해야한다.

노션의 우측상단에 ... 메뉴를 눌러 하단에 표시되는 연결 추가 를 선택하여 방금 생성한 intergration 과 연결한다.

방금 생성한 intergration이 보이고 연결했을때 어떠한 권한이 있는지 표시된다. 이제 intergration과 노션 스페이스가 연동되었다~

Step3. 데이터베이스 ID 복사하기

데이터베이스 ID를 확인하기 위해서는 데이터베이스가 있는 URL을 먼저 알아야한다. 나는 이전 글에서 설정해둔 POSTS 페이지의 생성한 데이터베이스가 된다.

이렇게 표시된 데이터베이스 아이디를 복사해두고 다음단계로 가자.

첫번째 서버코드 작성하기

노션에서 Javascript SDK를 제공한다. 게다가 코드의 99.6%가 타입스크립트로 작성되어 타입스크립트 환경에서도 찰떡이다. 믿고쓰는 노션ㅋ


yarn add @notionhq/client


// /pages/api/posts

import { Client } from '@notionhq/client';
import { DEFINED_FILTER } from './constant';

import type { NextApiRequest, NextApiResponse } from 'next';
import type { IAPIError, Response } from '../../interfaces';
import type {
  PageObjectResponse,
  QueryDatabaseParameters
} from '@notionhq/client/build/src/api-endpoints';

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Response<PageObjectResponse[]> | IAPIError>
) {
  const database_id = process.env.NOTION_DATABASE_ID;
  const auth = process.env.NOTION_API_KEY;
  const isProduction = process.env.APP_ENV === 'production';

  if (!database_id) {
    res.status(400).json({
      message: 'NOTION_DATABASE_ID 가 존재하지 않습니다.'
    });
    return;
  }

  if (!auth) {
    res.status(401).json({
      message: 'NOTION_API_KEY 가 존재하지 않습니다.'
    });
    return;
  }

  const notion = new Client({
    auth
  });

  (async () => {
    try {
      if (req.method === 'GET') {
        const { query } = req;
        const filter: QueryDatabaseParameters['filter'] = {
          and: []
        };

        if (isProduction) {
          filter.and.push(DEFINED_FILTER.STATUS_PUBLISHED);
        }

        const response = await notion.databases.query({
          database_id,
          filter
        });

        const data = response.results as PageObjectResponse[];

        res.status(200).json({
          data,
          status: 'ok',
          error: null
        });
      } else {
        res.status(405).json({});
        return;
      }
    } catch (e) {
      const error = e as any;
      const { status, body } = error;
      res.status(status).json(JSON.parse(body));
    }
  })();
}

일단은 아주 러프하게 작동하는지 테스트해보았다.

서버코드는 처음 작성해보지만 다행이도 성공하였다. 클라이언트와 서버 코드를 한 레포에서 작성하는것은 하나의 인터페이스로 작성할수 있기에 조금 편할지도…?

추후에 request body를 받으면 필터링도 가능할 것 같다. 이런식으로 API를 만들면 된다.

마무리

이번 포스트는 유난히 짧은 느낌이지만 기분탓이다.