React로 Notion 정적 블로그 만들기

date

Feb 22, 2023

thumbnail

gsc

Done

public

public

slug

create-notion-blog

author

tags

React

summary

Notion 블로그를 Vercel로 배포하자

type

Post

updatedAt

Oct 20, 2023 01:42 AM

Introdution

Notion API 키 발급

React 웹 프로젝트 생성

React 앱을 실행하기 위해서는 Node.js와 npm이 설치되어 있어야 한다. Node.js와 npm이 설치되어 있지 않은 경우, 공식 홈페이지에서 Node.js를 다운로드하여 설치한다.

각 폴더/파일 설명

src
├── components                  # 재사용 가능한 컴포넌트들을 저장하는 폴더
├── pages                       # React로 작성된 화면의 페이지들을 저장하는 폴더
│   └── index.js                # Notion에서 가져온 데이터를 이용하여 페이지를 렌더링하는 파일
├── config.js                   # Notion API와 관련된 정보들을 저장하는 파일
├── postcss.config.js           # CSS 전처리기를 설정하는 파일
└── tailwind.config.js          # Tailwind를 설정하는 파일

• create-react-app을 이용하여 React 앱을 생성한다.

npx create-react-app {프로젝트 이름}

• 생성된 프로젝트 폴더로 이동한다.

cd {프로젝트 이름}

• 생성된 프로젝트 폴더에서 다음 명령어를 입력하여 React 앱을 실행한다.

npm start

• 브라우저에서 localhost:3000으로 접속하면 React 앱이 실행된다.

Tailwind 설치

Tailwind는 CSS 프레임워크로, CSS를 작성하기 위한 클래스를 제공한다. 이를 이용하면 CSS를 손쉽게 작성할 수 있다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind 설정

• tailwind.config.js 파일을 생성한다.

npx tailwindcss init

• tailwind.config.js 파일 수정

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

• postcss.config.js 파일 생성

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind 사용 방법 CSS를 작성할 때, HTML 태그에 Tailwind 클래스를 지정하여 스타일을 적용한다. 예를 들어, bg-blue-500 클래스를 지정하면 배경색이 파란색인 요소를 만들 수 있다.

다음은 간단한 예제이다.

<div class="bg-blue-500 text-white p-4">안녕하세요!</div>

Notion 데이터 가져오기

• react-notion과 react-notion-x 패키지를 설치한다.

npm install react-notion react-notion-x

• src 폴더 안에 pages 폴더와 components 폴더를 생성한다.

• pages 폴더 안에 index.js 파일을 생성한다.

import React, { useEffect, useState } from 'react';
import { NotionRenderer } from 'react-notion';
import { notion } from '../config';

const Blog = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await fetch(
        `https://api.notion.com/v1/databases/${notion.databaseId}/query`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Notion-Version': '2021-08-16',
            Authorization: `Bearer ${notion.secret}`,
          },
        }
      );
      const { results } = await response.json();

      setPosts(results);
    };
    fetchPosts();
  }, []);

  return (
    <>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.properties.Name.title[0].text.content}</h2>
          <NotionRenderer blockMap={post.properties.Content.rich_text} />
        </div>
      ))}
    </>
  );
};

export default Blog;

• config.js 파일을 생성한다.

export const notion = {
  secret: process.env.REACT_APP_NOTION_API_SECRET,
  databaseId: process.env.REACT_APP_NOTION_BLOG_ID
};

Github 저장소에 배포하기

• github.com에 로그인한다.

• 새로운 저장소를 생성한다.

• 터미널에서 다음 명령어를 입력하여 저장소를 클론한다.

git clone <https://github.com/>{사용자 이름}/{저장소 이름}.git

• 생성된 프로젝트 폴더로 이동한다.

cd {저장소 이름}

• 다음 명령어를 입력하여 프로젝트를 초기화한다.

npm install

• 프로젝트를 빌드한다.

npm run build

• package.json 파일을 열어 homepage 속성을 설정한다.

{
  "name": "{프로젝트 이름}",
  "version": "0.1.0",
  "homepage": "https://{사용자 이름}.github.io/{저장소 이름}/",
  // ...
}

• 다음 명령어를 입력하여 gh-pages 패키지를 설치한다.

npm install gh-pages --save-dev

• package.json 파일에 다음 스크립트를 추가한다.

{
  "name": "{프로젝트 이름}",
  "version": "0.1.0",
  "homepage": "https://{사용자 이름}.github.io/{저장소 이름}/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  // ...
}

• 다음 명령어를 입력하여 앱을 배포한다.

npm run deploy

• 브라우저에서 https://{사용자 이름}.github.io/{저장소 이름}/으로 접속하면 React 앱이 실행된다.

Vercel로 배포하기

참고자료

• React 공식 문서

• Tailwind CSS 공식 문서

• Notion API 공식 문서

• Vercel

• Github Pages