🚀 Next.js 블로그에 "개발일지(Dev Log)" 섹션 분리 및 멀티 DB 연동기

안녕하세요! MANBALBOY 입니다. 오늘은 제 기술 블로그(Next.js + Notion API)에 "개발일지" 섹션을 별도로 분리하고, 이를 위해 Notion Database를 2개로 확장하면서 겪었던 기술적 고민과 트러블 슈팅 과정을 공유하려 합니다.

블로그를 운영하다 보니, "각 잡고 쓰는 정보성 글"과 "가볍게 남기는 개발 삽질 기록"을 분리하고 싶은 니즈가 생기더군요. 그래서 메인 피드는 깔끔하게 유지하되, 개발자스러운 갬성을 담은 Terminal Style의 개발일지 공간을 새로 팠습니다!

1. 기획: 개발자라면 역시 터미널 감성이지 💻

Before

• 모든 글이 메인 피드에 카드 형태로 섞여 있음.
• "오늘 삽질한 내용"을 올리기엔 메인 피드가 너무 무거워 보임.

After

• 메인 페이지: 양질의 리뷰/정보성 글만 큐레이션.
• 헤더(Navigation): 💻 개발일지 버튼 추가 (반응형 대응).
• 개발일지 페이지 (/dev-logs):

2. 기술적 도전: Notion DB가 두 개라면? (Multi-Database)

가장 큰 기술적 챌린지는 "기존 블로그 DB와 개발일지 DB를 분리"하는 것이었습니다. 글 성격이 다르니 스키마(속성)도 다르게 가져가고 싶었거든요.

• Main DB: Title, Slug, Summary, Tags, Category, Thumbnail 등 (복잡함)
• Dev Log DB: 이름 (Title), 날짜 (Date) (심플함)

🚨 문제 발생 (Trouble)

기존 lib/notion.tsx 라이브러리는 단일 DATABASE_ID만 바라보도록 설계되어 있었습니다. 단순히 ID만 바꾼다고 해결될 게 아니라, 서로 다른 스키마(속성)를 매핑하는 로직이 필요했습니다.

🛠 해결 과정 (Shooting)

1. 환경 변수 추가

NOTION_DATABASE_ID="기존_블로그_ID"
NOTION_DEV_LOG_DATABASE_ID="새로운_개발일지_ID"

1. Fetching 함수 분리 및 매퍼(Mapper) 작성 기존 pageToPost 함수는 메인 DB의 복잡한 스키마를 따르기 때문에, 개발일지용 간소화된 매퍼 devLogPageToPost를 새로 만들었습니다.

// Main DB용 매퍼 (기존)
function pageToPost(page) {
  return {
    slug: page.properties.Slug.rich_text[0].plain_text, // 커스텀 Slug 사용
    category: page.properties.Category.select.name,
    // ...
  };
}

// Dev Log DB용 매퍼 (신규)
function devLogPageToPost(page) {
  return {
    slug: page.id, // 별도 Slug 속성 없이 Page ID를 URL로 사용 (UUID)
    category: "개발일지", // 고정값
    title: page.properties["이름"].title[0].plain_text, // 한글 속성명 대응
    // ...
  };
}

1. Fall-back 라우팅 로직 구현 (getPostBySlug) 이게 이번 작업의 핵심이었습니다. /blog/[slug] 경로로 들어왔을 때, 이 slug가 메인 DB의 글인지 개발일지 DB의 글인지 어떻게 알까요?

[알고리즘 흐름]

1. 먼저 메인 DB에서 Slug 속성으로 검색을 시도합니다. (기존 로직)
2. 만약 결과가 없다면(null)? -> 개발일지 DB 탐색 시도.
3. 이때, 무작정 검색하지 않고 slug 형식이 UUID(32/36자)인지 체크합니다. (개발일지는 Page ID를 Slug로 쓰니까요!)
4. UUID 포맷이 맞다면 Notion API의 retrieve page를 호출하고, 해당 페이지가 NOTION_DEV_LOG_DATABASE_ID에 속하는지 검증합니다.

// lib/notion.tsx (Simplified)
async function getPostBySlugUncached(slug) {
  // 1. Try Main DB
  const mainPost = await queryMainDB(slug);
  if (mainPost) return mainPost;

  // 2. Try Dev Log DB (Fallback)
  // Slug가 UUID 포맷(Notion ID)과 일치하는지 확인 (Optimizing)
  if (isUUID(slug)) {
    const page = await getPage(slug); // Page ID로 직접 조회
    // 부모 DB ID가 개발일지 DB와 일치하는지 보안 검증
    if (page.parent.database_id === process.env.NOTION_DEV_LOG_DATABASE_ID) {
      return devLogPageToPost(page);
    }
  }
  
  return null; // 404
}

3. 결과물 (Result)

이제 "개발일지"는 메인 피드를 어지럽히지 않고, 별도의 멋진 터미널 공간(dev-logs)에 쌓이게 되었습니다. Notion에서 글을 쓰고 카테고리 설정할 필요도 없이, 그냥 개발일지 DB에 툭 던져넣으면 알아서 배포됩니다.

• UI: 깔끔한 Separation (Main vs Dev)
• DX (Developer Experience): 글 성격에 따른 DB 분리로 관리 용이성 증대
• Performance: 필요한 DB만 쿼리하거나, ID 기반 조회로 성능 최적화 앞으로 올라올 개발 삽질기들도 기대해 주세요! 🔥