2023-10-14

Notion2Component

노션에서 제공하는 @notionhq/client를 사용하여 React 또는 NextJS에서 노션 페이지를 렌더링 할 수 있게 만들어주는 라이브러리이다.
노션 객체를 이용하여 쉽게 사용할 수 있도록 개발하였다.

개발 이유

이미 노션 페이지를 쉽고 빠르게 React 컴포넌트로 만들어주고 웹 페이지로 배포까지 해주는 서비스가 참 많지만, 그래도 한번 경험 삼아 라이브러리의 개발부터 실제 사용까지 경험해 보고 싶어서 만들어 보게 되었다.

개발 내용

노션 API를 사용하게 되니 구현이 힘든 블록이 존재한다.
현재 버전의 라이브러리는 Notion API의 서버가 느리면 페이지 로딩도 같이 느려지는 문제가 있기 때문에 이를 해결하기 위해 조금 더 연구할 예정이다.

모듈 사용하기

@hibernationit/notion2component

You can render the contents of the Notion Page in react using the @notionhq/client. Latest version: 1.1.0, last published: a year ago. Start using @hibernationit/notion2component in your project by running `npm i @hibernationit/notion2component`. There are no other projects in the npm registry using @hibernationit/notion2component.

https://www.npmjs.com/package/@hibernationit/notion2component

GitHub - HibernationIT/notion2component: You can render the contents of the Notion Page in react using the @notionhq/client

You can render the contents of the Notion Page in react using the @notionhq/client - HibernationIT/notion2component

https://github.com/HibernationIT/notion2component

컴포넌트 렌더링

Notion API

Connect Notion pages and databases to the tools you use every day, creating powerful workflows.

https://developers.notion.com/
테스트

네이버

네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요

https://www.naver.com/
  • bulleted1
    • Test
      • Test
        • test
  • bulleted2
    테스트
💡
test 테스트
test
icon Test
function test() {
  console.log("test"); // 테스트 테스트 테스틑 테스트 테스트 테스트테스트 테스트 테스틑 테스트 테스트 테스트테스트 테스트 테스틑 테스트 테스트 테스트
} test
#include <stdio.h>

int main() {
	
}
import test;

def test():
	print("test")
@SpringBootApplication
public class Test() {
	static void main() {
		System.out.print("test")
	}
}
column
column
column
column
column
100MB.bin
test.csv

Header1

Header2

Header3

HeaderToggle

Header2 Toggle

Header3 Toggle

  1. numbered1
    1. 테스트
      1. 테스트
    1. test
  1. numbered2
    1. test
  1. 테스트
    • test
  1. 테스트
bold italic underline strike code
bold italic underline strike
red pink purple blue green yellow orange brown gray
red pink purple blue green yellow orange brown gray
quote
quote
quote 테스트
header1
header2
type1
test1
type2
test2
header1
header2
header3
checkbox1
checkbox2
테스트
todo color
toggle
toggle2

마치며..

생각보다 블럭이 너무 많아서 만들다가도 그냥 이미 만들어져있는걸 사용할까 많이 고민했지만, 그래도 결국 다 만들었다.
물론 Notion API 자체에서 블럭 타입이나 제목만 알려주기 때문에 구현하지 못한 블럭이 꽤 있지만, 블로그나 간단한 페이지 렌더링에는 큰 문제가 없어서 나름 가치 있는 경험이었다고 생각한다.