노션 페이지를 React로 웹에 띄워보자 (react-notion)

코로나로 인해 언택트 바람이 부는 이 시기...

의도치않게 여러 기업들이 최신기술을 도입하는 경우가 생기고 있다.

화상회의 도구 Zoom을 포함해 여러 회사의 협업도구들이 사용되고 있다.

 

사실 노션 그 자체는 협업을 위한 도구라고 한정짓기보다는 그들이 소개하고 있는대로

'올인원 워크스페이스'라고 설명할 수 있는데...

기업이나 개인이나 자신들의 정보를 다양하게 정리할 수 있는 좋은 수단으로 각광받고 있다.

 

아무튼, 오늘 포스팅해볼 내용은 이러한 노션들을 웹 상에 공개하는 방법에 대한 이야기이다.

 

+ 다 쓰고 나니까 글이 길어졌는데 사실 사진이 많아서 긴거지 내용은 별로 없다.

아 쉽다쉬워

 

첫번째 방법

노션을 웹으로 가져오는 첫번째 방법은 '노션 공개페이지 사용' 이다.

 

노션에서 글을 하나 작성하고 오른쪽 위에 있는 share 버튼을 누르면 

 

이런 창이 하나 뜨는데, 저기서 Share to web을 누르면 페이지만의 고유한 주소가 부여되고 이를 웹상에 공개할 수 있다.

 

이런 식으로.

 

그럼 웹으로 공개하기 끝~

 

...근데 이런거 설명하려고 굳이 포스팅을 할거였으면 숨쉬는 법부터 포스팅했겠지...

 

두번째 방법

 

우리가 개발을 하면서 궁금한건, 이 노션 페이지를 내 컨트롤 하에 둘 수 있냐는 것이다.

예를 들면 해당 페이지에 들어왔을 때 팝업을 띄운다던지...

게시글이 얼마나 남았는지를 알려주기 위해 스크롤을 읽어온다던지...

 

사실 나도 윤선이의 업무적인 궁금증을 함께하다가 '이게 가능할까?' 하고 찾아보게 된 것인데...

역시 인터넷엔 읎는게 읎다.

 

https://github.com/splitbee/react-notion

splitbee/react-notion

그 이름도 아주 직관적인 리액트-노션 (react-notion) 을 찾아냈다.

아싸 ㅋㅋ

 

그래서 찾아보니까 저 깃에도 그렇고, 국내 웹에도 그렇고 마땅한 자료가 없는 것 같았다.

그래서 내가 쓴다 1빠임 수고 (아님말고 ㅋㅋ;;)

 

우선은 VS Code등을 켜서 간단한 리액트 프로젝트를 만들자.

npx create-react-app [경로]

그래서 간단하게 만들었다...

그리고 나서 npm이나 yarn등을 통해서  react-notion을 추가해주면 된다.

 

오늘의 꿀팁 (시험에 나옴)

Done은 됐다는 뜻

 

애초에 깃허브 페이지를 둘러봤다면 알겠지만, 우리가 해야할 일은 아주 간단하다.

 

1. 공개할 노션의 페이지ID 얻기

2. 해당 페이지의 정보 얻기

3. 코드 작성

 

자, 그럼 노션의 페이지ID부터 얻어보자.

근데 사실 우린 이미 얻었다 맨

 

 

아까 우리가 노션에서 Share를 누르고 Share to web을 활성화 시켰을 때 하나의 링크를 받았다.

나의 경우

 

www.notion.so/yslovems/eb1a447eda324c8da702597f7fb82ab1

 

이것이였는데, 이 뒤를 보면 

 

eb1a447eda324c8da702597f7fb82ab1

 

이런 부분이 있다. 이게 우리가 공개할 페이지의 페이지ID이다.

야 쉽다쉬워

 

 

그 다음 우리가 할 일은 해당 페이지의 정보를 얻어야한다.

페이지의 정보라는 말이 애매한데...애매하니까 애매하게 설명할거다

 

react-notion 제작자의 깃을 보면 

중간에 이런 말을 볼 수가 있고, 저 notion-api-worker라는데에 들어가보면 

https://github.com/splitbee/notion-api-worker

splitbee/notion-api-worker

영어가 있다.

왜냐면 영문 페이지이기 때문이다.

 

 

아무튼 이런 부분이 있는데, 우리는 일단 제작자분의 api를 쌔벼써보도록 하겠다. 쏘리맨

(개발자의 자존심이 허락치않는 분들은 직접 구현하여 사용해도 좋다.

We provide a hosted version of this project on https://notion-api.splitbee.io. You can also host it yourself. Cloudflare offers a generous free plan with up to 100,000 request per day.)

API의 구조는 다음과 같다.

https://notion-api.splitbee.io/v1/page/<NOTION_PAGE_ID>

우리의 경우는 

https://notion-api.splitbee.io/v1/page/eb1a447eda324c8da702597f7fb82ab1

이렇게 되시겠다.

 

저 주소를 브라우저에서 한번 날려보면

 

이렇게 페이지 주소를 얻을 수 있다.

 

저 글자 아무데나 오른쪽 클릭해서, 다른이름으로 저장을 누르고

아까 만든 리액트 프로젝트 어딘가에 넣어두도록 하자.

 

자, 이제 페이지 정보도 얻었으니 마지막으로 코드만 작성하면 되겠다.

 

나는 App.js에다가 그냥 바로 써재껴보겠다루

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

위와 같은 코드를 추가해주고 (두번째 라인의 css는 주석에 써있는대로 코드 하이라이팅을 안쓸거면 필요없다.)

 

이런 식으로 코드를 입력해보자.

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

// 첫번째 방법 JSON을 직접 import
import staticResponse from './data/eb1a447eda324c8da702597f7fb82ab1.json';

function App() {
  return (
    <div className="App">
        <NotionRenderer // 웹페이지에 노션을 렌더링
          blockMap={staticResponse} // 페이지정보 넣기
          fullPage={true}
        />
    </div>
  );
}

export default App;

주석으로 써둔 대로 우리가 아까 내려받았던 json을 첨부하고

react-notion (NotionRenderer)를 이용해서 렌더링해보자.

우리가 할 일은 blockMap이라는 property에 우리의 페이지 정보가 담긴 json파일을 넘겨주는 것 뿐이다.

 

주소를 보면 알겠지만 우리의 리액트 프로젝트에서 노션 페이지를 뿌릴 수 있다.

와! 성공! 

 

근데 json 파일을 이렇게 이용하면 문제가 있다.

우리가 노션 페이지를 수정할때마다 새로 json을 내려받아서 넣어줘야한다.

물론 내 페이지가 영영 수정될 일 없다면 이렇게 해도 된다만...

 

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

// 첫번째 방법 JSON을 직접 import
import staticResponse from './data/eb1a447eda324c8da702597f7fb82ab1.json';

import React, { useState, useEffect } from 'react';

function App() {
  const [response, setResponse] = useState({});
  
  useEffect(() => {
    // 두번째 방법
    const NOTION_PAGE_ID = 'eb1a447eda324c8da702597f7fb82ab1';
    fetch(`https://notion-api.splitbee.io/v1/page/${NOTION_PAGE_ID}`)
      .then(res => res.json())
      .then((resJson) => {
        setResponse(resJson);
      });
  }, [])
  
  return (
    <div className="App">
        <NotionRenderer
          // blockMap={staticResponse}
          blockMap={response}
          fullPage={true}
        />
    </div>
  );
}

export default App;

이런 식으로 코드를 한번 짜보자.

설명할 것도 없지만, 페이지 진입시마다 notion-api-worker api를 통해서 페이지 정보를 얻어오고

같은 방식으로 렌더링 해주는 것이다.

 

테스트를 위해 노션에서 글을 수정해보도록 하겠다.

진짜 많이 수정했다 대박

그리고 다시 웹 페이지를 보면

 

내가 수정한게 곧바로 반영됨을 알 수가 있다.

 

이렇게 구현하면 리액트를 통해서 여러 기능들을 추가구현할 수 있는 장점이 있다.

 

---

 

윤선이 덕분에 다양한 것들을 사용해볼 수 있어서 좋다.

 

아무튼 react-notion을 미리 만들어준 분이 있어서 이렇게 손쉽게 구현해낼 수가 있었다.

 

참고로 이런 시스템을 직접 구현해 사용하기 힘들다면

https://www.oopy.io/

당신의 노션 페이지가, 웹사이트가 됩니다

국내에 이런 서비스가 있으니 이를 사용해봐도 좋겠다.

 

현재 react-notion에서는

대부분의 기능은 지원하고 있으나, 아래 세 항목은 아직 지원하고 있지않다.

 

그래서 react-notion을 fork하여 더 develop한 react-notion-x가 있다.

https://github.com/NotionX/react-notion-x

NotionX/react-notion-x

관심있다면 쓰셈