[포트폴리오] 프로젝트 섹션 구현: Notion API를 활용한 CMS 연동

SMI·2025년 2월 3일

포트폴리오 사이트 개발 일지

목록 보기

2/7

포트폴리오 사이트의 프로젝트 섹션을 어떻게 구성할지 많은 고민을 했습니다. HTML로 직접 프로젝트 리스트를 작성할지, Markdown 파일을 이용해 작성하고 렌더러를 직접 구현할지, 아니면 외부 라이브러리를 사용할지 여러 가지 방법을 고려했습니다. 결국, 제가 선택한 방법은 Notion API를 활용해 Notion을 CMS(Content Management System)로 사용하는 것입니다.

저는 주로 프로젝트 개발 일지나 개발 관련 정보를 Notion을 통해 정리하기 때문에 Notion을 잘 활용하고 있습니다. Notion에 프로젝트를 정리하고, 이를 CMS로 활용하여 포트폴리오 사이트에 적용하는 방법이 가장 효율적이라고 생각했습니다.

CMS (Content Management System)란

CMS는 웹사이트나 애플리케이션의 콘텐츠를 쉽게 관리하고 업데이트할 수 있도록 도와주는 시스템입니다. CMS를 이용하면 HTML, CSS, JavaScript 같은 기술을 모른다고 해도 직관적인 UI/UX를 통해 콘텐츠를 쉽게 관리할 수 있습니다.

Notion API

Notion은 API를 통해 외부 애플리케이션과 통합할 수 있습니다. Notion API 문서를 통해 API를 학습하고 사용할 수 있습니다. 저는 Notion의 데이터베이스(DB)를 사용해 프로젝트들을 정리하고, 이를 CMS로 활용했습니다.

Notion API와 통합할 때 고려할 수 있는 방법은 Retrieve Database와 Query Database 두 가지입니다. 저는 Query Database 방식을 사용하기로 결정했습니다. 그 이유는 Retrieve Database를 사용하면 DB의 전체 데이터를 가져올 수 있지만, 확장성과 네트워크 부하, 속도 등을 고려했을 때 Query Database로 필요한 데이터만 필터링하여 얻는 것이 더 효율적이라고 판단했기 때문입니다.

Notion API 연동하기

Notion의 API통합 페이지에서 API 통합을 설정할 수 있습니다.

1. 새 API 통합 생성

notion api 홈 화면

2. 관련 설정 완료 후 저장

3. 컨텐츠나 댓글 기능을 설정하고 시크릿 키를 기억

4. Notion DB 작성 및 연결

Notion에서 사용할 프로젝트 데이터베이스를 작성한 후, 해당 데이터베이스와 앞에서 생성한 API 통합을 연결합니다. 페이지 우측 상단의 ... 아이콘을 클릭한 뒤 API 통합을 연결합니다.

5. notion.ts파일을 작성

이제 Notion API를 사용하여 데이터를 가져오는 기능을 구현합니다. 아래는 예시 코드입니다.

// notion.ts
export async function fetchNotionDb() {
  try {
    const notionApiUrl = `https://api.notion.com/v1/databases/${process.env.NOTION_DATABASE_ID}/query`;
    const response = await fetch(notionApiUrl, {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.NOTION_TOKEN}`,
        "Notion-Version": "2022-06-28",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        sorts: [
          {
            property: "ID",
            direction: "ascending",
          },
        ],
      }),
    });
    const data = await response.json();
    return data.results; 
  } catch (error) {
    console.error("Error fetching Notion data:", error);
    throw error;
  }
}