👨‍💻 트러블슈팅

1️⃣ API 접근

참고테마 : https://jamstackthemes.dev/theme/notion-blog-nextjs-coral/

• 노션 SDK 접근

yarn add @notionhq/client

• 노션 API 를 설정하여 다뤄보기 ❓그렇다면, lib 와 pages/api 중 어느 디렉토리를 사용해야할까
  • lib → 클라이언트 측에 도움이 되는 유틸리티 기능용
  • pages/api → 서버 측에 API 엔드포인트 용도
• 기존 테마의 경우, 포스트글의 들여쓰기가 되어있을 경우 데이터를 뽑아내오지 못했다. ❓has_child 속성을 이용하여, 모든 노드를 탐색하게 한다면 가능하지 않을까

  import { Client } from "@notionhq/client";
  
  const notion = new Client({
    auth: process.env.NOTION_TOKEN,
  });
  
  export const getBlocks = async (blockId) => {
    blockId = blockId.replaceAll("-", "");
  	// 새로운 newObj 에 blockId 에 해당하는 블럭을 전부 추가한다.
  	// 너무 많은 데이터로 인해 과부하를 방지하기위해 depth 2 까지만 뽑아낸다.
    async function flattenBlocks(blockId, depth = 0) {
      const blockData = await notion.blocks.children.list({ block_id: blockId });
      const newObj = [];
  
      for (let block of blockData.results) {
        newObj.push({ ...block, depth });
  
        if (depth < 2 && block.has_children) {
          const childBlockData = await notion.blocks.children.list({ block_id: block.id });
  
          for (let childBlock of childBlockData.results) {
            newObj.push({ ...childBlock, depth: depth + 1 });
  
            if (childBlock.has_children) {
  																																	// 들여쓰기를 알기위해 추가
              const grandChildren = await flattenBlocks(childBlock.id, depth + 1);
              newObj.push(...grandChildren);
            }
          }
        }
      }
  
      return newObj;
    }
  
    const flattenedBlocks = await flattenBlocks(blockId);
    return flattenedBlocks;
  }; 

  이후, 각 블럭에 해당하는 형식으로 출력한다.

  const renderBlock = (block) => {
  	// 각 블럭의 요소로 type(type에 따른 return을 위해)
  	// id (유니크한 key값을 적용할때 등등..)
  	// depth (들여쓰기가 될 경우, 띄어쓰기를 해주려고 )
    const { type, id, depth } = block;
    const value = block[type];
  	// 띄어쓰기 스타일을 상단태그에 추가
    const indentStyle = { paddingLeft: `${depth * 10}px` };
    switch (type) {
      case "paragraph":
        return (
          <p style={indentStyle}>
            <Text text={value.rich_text} />
          </p>
        );
      case "heading_1":
        return (
          <h1 style={indentStyle}>
            <Text text={value.rich_text} />
          </h1>
        );
  ...

😢 처음에 했을때, 어려운점

• 처음 다뤄보는 API 다 보니, 전부 코드를 뜯어보았다.
• 각 block 을 하나로 모으는데, 뎁스를 설정하지 않고 계속해서 notion API 를 너무 많이 불러오다보니 오류가 발생하여서 쉽지않았다.