노션 API 연동 데모 코드 분석하기 | Express.js, Notion API

 

지난 포스팅에서는 Notion 공식문서에서 제공하는 Notion API 연동 데모 서버를 실행시켜보았다. 

Notion API web-form-with-express 데모 실행해보기 | Notion Page에 API 연동

 

이번에는 소스코드를 분석해보려 한다. 

지난 포스팅과 마찬가지로 web-form-with-express 데모를 살펴볼 것이다. 

---

Express.js

나는 Express.js가 처음이라 지피티에게 Express.js에 대해 설명해달라고 부탁했다. 

 

지피티의 답변을 요약하자면 다음과 같다. 

1. Express.js란 node.js 환경에서 웹서버를 만드는데 사용하는 프레임워크이다.

2. 빠르게 구축할 수 있고 가볍고 유연하다. 

3. 동적 HTML 생성을 지원한다. 

 

나는 Express.js를 JavaScript로 작성하는 가볍고 빠른 SpringBoot로 이해했다. 

 

파일구조

Express의 파일구조는 다음과 같다. 

정적 파일이 담기는 public 폴더

html 파일이 담기는 views 폴더

서버와 관련된 소스코드가 담긴 server.js 파일, 환경변수 값들이 담긴 .env 파일, 이런 저런 정보가 담긴 pachkage.json

 

이중 우리가 살펴볼 파일들은 총 3가지이다. 

1. server.js
2. views/index.html
3. public/client.js

---

server.js

server.js에는 우리가 만들고자 하는 서버와 관련된 핵심 코드가 들어간다. 

서버에 필요한 설정들을 하고, 서버를 실행시키는 엔트리 포인트 역할을 한다. 

 

우리가 분석중인 데모 프로젝트는 api가 5개밖에 없는 굉장히 간단한 서버이므로

server.js에 api 요청을 처리하는 코드도 포함되어 있다. 

 

그래서 결론적으로 server.js는 다음과 같은 역할을 한다. 

1. 서버 세팅
2. api 요청 처리
3. 서버 실행

---

서버 세팅

우선 서버를 세팅하는 코드부터 살펴보자. 

서버 세팅 부분은 크게 3가지로 나뉜다. 

express  애플리케이션 생성, 노션 클라이언트 생성, express 애플리케이션 설정

// express 관련
require("dotenv").config()	// 환경변수 파일 로드
const express = require("express")	// express 모듈 import
const app = express()	// Express 애플리케이션 인스턴스 생성

// notion 관련
const { Client } = require("@notionhq/client")	// 노션 api 클라이언트 import
const notion = new Client({ auth: process.env.NOTION_KEY })		// 노션 api 클라이언트 생성

// express 애플리케이션 설정
app.use(express.static("public"))	// public 폴더 내 정적 파일에 접속할 수 있도록 설정
app.use(express.json()) // for parsing application/json		// request body가 json인 경우 자동으로 파싱하도록 설정

---

api 요청 처리

위와 같이 애플리케이션 설정을 마친 후 api 요청을 처리하는 라우터 핸들러 함수를 선언한다. 

 

"/" 경로로 GET요청하는 경우 /views/index.html 파일을 응답한다. 

app.get("/", function (request, response) {
  response.sendFile(__dirname + "/views/index.html")
})

 

"/databases" 경로로 POST요청하는 경우 노션 페이지에 database를 생성한다.

database는 노션 클라이언트를 통해 생성할 수 있다. 

// "/databases" 경로로 POST요청하는 경우 노션 페이지에 database를 생성한다.
app.post("/databases", async function (request, response) {
  const pageId = process.env.NOTION_PAGE_ID
  const title = request.body.dbName

  try {
    const newDb = await notion.databases.create({
      parent: {
        type: "page_id",
        page_id: pageId,
      },
      title: [
        {
          type: "text",
          text: {
            content: title,
          },
        },
      ],
      properties: {
        Name: {
          title: {},
        },
      },
    })
    response.json({ message: "success!", data: newDb })
  } catch (error) {
    response.json({ message: "error", error })
  }
})

 

이외에도 페이지 생성, block 생성, 댓글 생성 api에 대한 처리 코드가 있지만 너무 길어질것 같아 생략한다. 

server.js 전체 코드는 아래 링크에서 확인할 수 있다. 

https://github.com/makenotion/notion-sdk-js/blob/main/examples/web-form-with-express/server.js

notion-sdk-js/examples/web-form-with-express/server.js at main · makenotion/notion-sdk-js

---

서버 실행

아래 코드로 서버를 실행시킨다. 

서버가 실행된 후 콘솔에 애플리케이션의 port번호가 찍힌다. 

const listener = app.listen(process.env.PORT, function () {
  console.log("Your app is listening on port " + listener.address().port)
})

 

---

index.html

index.html은 우리가 서버를 실행한 후 웹브라우저를 통해 접속하면 조회되는 화면이다. 

client.js를 import하며 

데이터베이스 생성, 페이지 생성, 블록 생성, 댓글 생성을 위한 4개의 form과 response를 보여줄 element들이 있다. 

<form id="databaseForm">
  <label for="dbName">Database name</label>
  <input type="text" id="dbName" />
  <input type="submit" />
</form>

<form id="pageForm">
  <label for="newPageDB">Parent DB ID</label>
  <input type="text" id="newPageDB" />
  <label for="newPageName">New page name</label>
  <input type="text" id="newPageName" />
  <label for="header">Header 1</label>
  <input type="text" id="header" />
  <input type="submit" />
</form>

<form id="blocksForm">
  <label for="pageID">Page ID</label>
  <input type="text" id="pageID" />
  <label for="content">Content</label>
  <input type="text" id="content" />
  <input type="submit" />
</form>

<form id="commentForm">
  <label for="pageIDComment">Page ID</label>
  <input type="text" id="pageIDComment" />
  <label for="comment">Comment</label>
  <input type="text" id="comment" />
  <input type="submit" />
</form>

 

 

전체코드는 아래 링크에서 확인할 수 있다. 

https://github.com/makenotion/notion-sdk-js/blob/main/examples/web-form-with-express/views/index.html

notion-sdk-js/examples/web-form-with-express/views/index.html at main · makenotion/notion-sdk-js

 

---

content.js

content.js에는 index.html에서 발생한 이벤트를 처리하는 코드들이 있다. 

 

onsubmit

index.html에 있는 dbForm, pageForm, blocksForm, commentForm에서 submit이 발생하면

해당 form에서 입력받은 데이터에 대하여 POST 요청을 전송한다. 

 

dbForm.onsubmit = async function (event) {
  event.preventDefault()

  const dbName = event.target.dbName.value
  const body = JSON.stringify({ dbName })

  const newDBResponse = await fetch("/databases", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body,
  })
  const newDBData = await newDBResponse.json()

  appendApiResponse(newDBData, dbResponseEl)
}

dbForm에서 submit이 발생하면(제출 버튼을 누르면)

사용자가 입력한 db명을 조회하고

해당 데이터와 함께 POST "/databases" 요청을 보낸다. 

 

만약 성공적으로 응답을 받으면 appendApiResponse함수를 호출하여 반환받은 정보를 화면에 뿌린다. 

나머지 onsubmit 함수와 appendApiResponse함수 내용은 아래 링크에서 확인할 수 있다. 

https://github.com/makenotion/notion-sdk-js/blob/main/examples/web-form-with-express/public/client.js

notion-sdk-js/examples/web-form-with-express/public/client.js at main · makenotion/notion-sdk-js

---

정리해보자면 web-form-with-express 데모 프로그램의 구조는 다음과 같다. 

 

그리고 웹브라우저에서 제출 버튼을 누르면 아래와 같은 흐름으로 노션 데이터베이스가 생성되게 된다. 

---

 

앞으로 Notion Client 객체 사용법만 잘 알면 노션API는 잘 사용할 수 있을 것 같다.