Notion API에 한 대 맞은 후기

pingu·2023년 11월 22일

약 2년전 노션에서 API를 공개했다.
노션에 데이터를 넣고 API를 통해 데이터를 주고 받을 수 있는 방식이다.
프로젝트나 포폴에 사용할 백엔드가 반드시 필요한 프론트엔드 개발자에겐 좋은 선택지가 더 생긴 셈이다.
NotionAPI를 활용한 포트폴리오 관련 영상도 많이 나오고 있어서 흥미가 생겼다.

일단 노션은 협업에서도 사용되고 개인 필기용으로도 많이 사용되는 서비스인데, NotionAPI는 DB 필요없이 노션 자체가 DB 역할을 하며 그 DB를 공개할 수 있다는 점에 있어서 굉장한 이점이 있다.

뭘 만들까?

그럼 이론상 엄청난 서비스이니 안써볼 수 없겠다.

노마드 코더 notionAPI 사용방법
개발하는 정대리 포폴 만들기
노션 API docs

위 자료를 참고하여 학습했다.

개인 블로그에 프로젝트 관련 탭을 하나 만들고 싶었는데, MD 파일을 로컬에 넣고 보여주는 방식을 이미 블로그로 쓰고 있는 상황이라 다른 방식으로 구현을 해보고 싶었는데 마침 잘 됐다.

포트폴리오 탭을 만들자

블로그 옆에 포트폴리오 탭을 하나 만들고 탭 안에 데이터는 모두 Notion API를 통해 데이터를 가져올 생각이다.

구현

데이터 추가

우선 노션에 데이터를 추가해줘야 한다.

노션에 카드를 만들고 하나씩 데이터를 넣어준다

데이터로 갖고 오고 싶은 부분은 프로퍼티를 추가해서 데이터를 넣어줄 수 있다.
난 커버 이미지, 스택, 프로젝트 소개, 이미지 등을 넣었다.

Notion API 연결 등록

데이터를 데이터베이스에 추가했으니 이제 API로 사용할 수 있도록 등록을 해야한다.
https://www.notion.so/ 에서 'View documentation'을 클릭해서 integration을 하나 만들자

Name 작명을 하고 넘어가면

Secret 키가 발급이 된다. 요건 나중에 잘 쓸거니 보관해두고 다음 내용은 기본값으로 만들어도 크게 상관없다.

다음 단계는 데이터를 읽기, 업데이트 등 어떻게 쓸지 기능 관련 탭과 public으로 할지 private 으로 할지 정하는 단계이다.

다 만들었으니 연결하러 가자

노션과 연결은 했지만 데이터베이스에 접근 하려면 ID가 또 필요하다.

아까 만든 데이터베이스를 새탭에서 열기를 클릭하면 새 탭이 열리는데,
이 탭의 query가 곧 database ID 이다

URL에서

https://www.notion.so/???

www.notion.so/ 뒤에 ???가 DatabaseID 이다.

데이터 불러오기

노션 공식문서 API Reference에 예시가 다 나와있으니 참고할 것.

일단 postman 에서 테스트를 해보자면

??? 는 아까 URL에서 찾은 데이터베이스 키이고 아래 토큰은 integration만들때 발급한 시크릿 키이다.

그리고 공식문서처럼 Notion-Version 을 꼭 넣어줘야 한다. ~~안하면 에러남~~

데이터 잘 나오는 것 확인.

코드에 적용하기

그대로 내 블로그 코드에 적용해보자

export async function getProjectData() {
  try {
    const response = await axios.post(
      `https://api.notion.com/v1/databases/${DATABASE_ID}/query`,
      {
        sorts: [
          {
            property: "Name",
            direction: "ascending",
          },
        ],
        page_size: 100,
      },
      {
        headers: {
          Accept: "application/json",
          "Notion-Version": "2022-06-28",
          "Content-Type": "application/json",
          Authorization: `Bearer ${TOKEN}`,
        },
      }
    );
    console.log(response);
    return { props: { data: response.data } };
  } catch (error) {
    console.error(error);
  }
}

export default async function Projects() {
  const data = await getProjectData();

  return (
    <MainContainer>
      <Title>Projects</Title>
      <ProjectContainer>
        {data && data.props.data.results.map((projectdata: any, index: number) => (
          <ProjectCard key={index} projectdata={projectdata} />
        ))}
      </ProjectContainer>
    </MainContainer>
  );
}

const ProjectCard = (projectdata: ProjectCardProps) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  console.log(projectdata.projectdata.properties.CoverImg.rich_text[0].href)

  return (
    <CardContainer>
      <CardImg
        src={projectdata.projectdata.properties.CoverImg.rich_text[0].href}
        alt="cover image"
        width={1000}
        height={1000}
        draggable={false}
      />
      <CardContents modalstate={`${isModalOpen}`}>
        <CardTitle>
          {projectdata.projectdata.properties.Name.title[0].plain_text}
        </CardTitle>
        <ProjectStack>
          {projectdata.projectdata.properties.Stack.multi_select.map((tag, index: number) => (
            <StackTag key={index}>{tag.name}</StackTag>
          ))}
        </ProjectStack>
        <ButtonContainer>
          <MoreButton onClick={() => setIsModalOpen(true)}>LEARN MORE</MoreButton>
          <Modal
            isModalOpen={isModalOpen}
            onClickCloseModal={() => {
              setIsModalOpen(false);
            }}
          >
            <ModalCardContents projectdata={projectdata.projectdata}></ModalCardContents>
          </Modal>
        </ButtonContainer>
      </CardContents>
    </CardContainer>
  )
}
export default ProjectCard;