[개발자 포트폴리오 > AboutMe] 노션 페이지 내용 조회 함수 구현 | pageToMarkdown

구현 프로세스

포트폴리오 사이트의 index 페이지인 AboutMe 페이지를 구현하는 프로세스는 다음과 같다. 

---

프로젝트 세팅

노션 페이지에 내용을 작성하는 것을 완료한 후 해당 페이지에 노션 API를 연결하고, 페이지ID를 .env에 추가한다. 

노션 페이지에 API를 연결하는 방법은 아래 포스팅에서 확인할 수 있다. 

Notion API 연동 데모 서버 실행해보기 | Notion Integration 생성/등록/연동

 

노션 페이지 아이디는 .env에 추가한다. 노션 API 키도 추가되어 있어야 한다. 

NOTION_TOKEN=<노션API 키>
NOTION_ABOUTME_PAGE_ID=<소개페이지 ID>

 

---

notion.ts 작성

앞으로 노션 API를 호출하는 코드는 프로젝트/lib/notion.ts 파일에 작성할 예정이다. 

해당 파일이 존재하지 않으면 새로 생성한다. 

 

Notion 클라이언트 객체 생성

Notion API를 쉽게 사용할 수 있도록 도와주는 Client 객체를 생성한다. 

import { Client } from '@notionhq/client';

export const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

 

NotionToMarkdown 객체 생성

노션 페이지 내용을 마크다운으로 변환해주는 NotionToMarkdown 객체를 생성한다,

import { NotionToMarkdown } from 'notion-to-md';

const n2m = new NotionToMarkdown({ notionClient: notion });

 

getAboutMeContent 구현

소개 페이지의 내용을 마크다운으로 변환하여 반환하는 getAboutMeContent 함수를 구현한다. 

export const getAboutMeContent = async (): Promise<{
  markdown: string;
}> => {
  const mdBlocks = await n2m.pageToMarkdown(process.env.NOTION_ABOUTME_PAGE_ID || '');
  const { parent } = n2m.toMarkdownString(mdBlocks);

  return {
    markdown: parent,
  };
};

 

---

이제 notion.ts의 getAboutMeContent을 import하여 소개페이지의 마크다운 문자열을 조회할 수 있다.