목록 보기
Notion API와 함께 정적 페이지로의 여정
프론트엔드

Notion API와 함께 정적 페이지로의 여정

화해
화해
2023년 1월 12일

두줄요약

Notion API로 정적 페이지를 관리하기 위한 Block 조회와 콘텐츠 변환 방식을 검토했습니다. 공식 API 기반 Markdown 변환과 remark·rehype 활용 방향을 선택했습니다.

문제 상황

  • 약관 등 정적 페이지 증가와 코드 중심 관리로 인한 수정·운영 부담
  • 비개발 요청자의 직접 관리 수단과 통일된 관리 방식 부재

구조와 흐름

  • Notion Database·Page·Block API를 통한 페이지 속성 및 계층형 콘텐츠 조회
  • has_children과 cursor 기반 페이지네이션을 활용한 중첩 Block 순회
  • Notion Block 데이터 → Markdown → remark·rehype 기반 HTML 변환 흐름

트레이드오프

  • 공식 API의 JSON Block 보존성 대비 Markdown export API 부재
  • 내부 API의 단일 요청 Markdown export 편의성 대비 변경 가능성과 token_v2 관리 위험
  • Markdown의 이식성 대비 고급 Block·heading 수준·linked database·요청 제한 제약

해결 방법

  • 공식 Notion API로 Block 데이터를 조회하고 notion-to-md로 Markdown 변환
  • remark·rehype를 이용한 Markdown AST 처리와 최종 HTML 생성 POC
  • Notion을 정적 페이지 저장소로 활용하면서 향후 CMS·문서 도구 이관 가능성 확보

다음 읽기

#React 주제를 이어서 읽기

React Query와 함께하는 API 에러 처리 설계하기

React Query의 onError와 useApiError Hook으로 API 에러 처리 흐름을 중앙화했습니다. HTTP 상태·서비스 코드별 우선순위로 전역 규칙과 컴포넌트 예외를 함께 관리합니다.

화해
화해
프론트엔드

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...