[토이프로젝트] 개인 포폴 사이트 - (1) 개발 중

환경: yarn, vite, react, typescript

 

노션으로 작성한 포폴을 개인 github.io에서 임베딩을 시도하는 중이다. React에서는 react-notion과 react-notion-x라는 라이브러리를 사용해 노션을 임베딩할 수 있다. 이렇게 1시간 만에 완성하겠거니 싶었는데..

react-notion

출처

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

export default function ReactNotion() {
  const [response, setResponse] = useState({});

  useEffect(() => {
    const NOTION_PAGE_ID = '노션 페이지 ID';
    axios
      .get(`https://notion-api.splitbee.io/v1/page/${NOTION_PAGE_ID}`)
      .then(({ data }) => {
        setResponse(data);
      });
  }, []);

  return (
    <Suspense fallback={<p>로딩 중..</p>} >
      <NotionRenderer blockMap={response} fullPage={true} />
    </ Suspense>
  );
}

• 그냥 NotionRenderder 컴포넌트를 렌더링하면 된다.
• 그런데 데이터베이스는 못 가져온다.

데이터베이스는 임베딩되지 않는다.

• react-notion은 데이터베이스 임베딩을 지원하지 않는다고 한다.
• 결국 데이터베이스를 임베딩하기 위해서는 react-notion-x를 사용해야 한다.

 

react-notion-x

import { Suspense, useState, useEffect } from 'react';
import 'react-notion-x/src/styles.css';
import 'prismjs/themes/prism-tomorrow.css';
import { NotionRenderer } from 'react-notion-x';
import { NotionAPI } from 'notion-client';
import { ExtendedRecordMap } from 'notion-types/build/maps';

function Portfolio() {
  const [response, setResponse] = useState<ExtendedRecordMap | null>(null);

  useEffect(() => {
    const fetch = async () => {
      const NOTION_PAGE_ID = 'Portfolio-b30f8a5319d64d1e933130d680703abd';
      const notion = new NotionAPI();
      const recordMap = await notion.getPage(NOTION_PAGE_ID);
      setResponse(recordMap);
    };
    fetch();
  }, []);

  return (
    <Suspense fallback={<CustomFallback />}>
      {response !== null && <NotionRenderer recordMap={response} fullPage />}
    </Suspense>
  );
}

export default Portfolio;

Uncaught ReferenceError: process is not defined
at node_modules/@szmarczak/http-timer/dist/source/index.js

• react-notion-x 공식 레포의 방식대로 수행한다.
• 그런데 위 에러가 발생했다.
• @szmarczak/http-timer 라이브러리에서 process.versions.node를 찾지 못하는 에러이다.
• Vite 환경에서는 환경 변수로 process를 인식하지 못해 발생했다.
• react-notion 이슈

솔루션

1. Vite에서 process를 등록하기

• 솔루션

import react from '@vitejs/plugin-react-swc';
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.versions.node': JSON.stringify('18.17.1'),
    },
    plugins: [react()],
  };
});

• 솔루션을 따라 vite.config.ts를 위와 같이 고치면 vite가 process.versions.node를 인식한다.
• 그러나 이번에는 dns 라이브러리의 Resolver에서 에러가 발생했다.

Uncaught TypeError: Cannot read properties of undefined (reading 'Resolver')
at node_modules/cacheable-lookup/source/index.js (index.js:7:13)

• 추측컨대 Vite 환경은 react-notion-x와 호환이 되지 않는다고 판단된다.
• 구글링 결과 vite 환경에서 react-notion-x을 사용한 사례는 찾을 수 없었다.
• 그래서 "Vite에서 process를 등록하기"는 포기했다.

 

2. Vite에서 CRA로 migration하기

사실 이게 가장 확실한 방법이다. 많은 사람들이 사용해서 검증된 방식이기도 하고, github.io를 개발해둔 것도 많이 없어서 옮기는 편이 쉬울 수 있다. migration하는 과정은 다음 시간에..