목표

• 노션으로 작성한 페이지를 표시해주는 블로그를 플랫폼 없이 직접 만들기
• tailwindcss 등 최신 라이브러리 경험하기

---

환경

• 2022/01/22 ~ 2022/02/02
• 혼자 작업

---

과정

Notion API

• ref
  • https://developers.notion.com/reference/intro
  • https://github.com/NotionX/react-notion-x
• notion 공식 api 는 notion 페이지의 (데이터베이스에 있을 때) 칼럼 데이터만 잘 보내준다.
  • 흔히 우리가 페이지 안에서 작성하는 글을 받으려면 공식 notion 으로는 매우 불편하다
  • 나는 첫 홈페이지에서 특정 데이터베이스에 속한 페이지들을 불러올 때 공식 api 를 사용했다
• 내 목적인 페이지의 컨텐츠를 받고 그걸 화면에 렌더링 하기 위해서는 react-notion-x 라이브러리가 필요하다 (ref 참고)
  • 이걸로 렌더링하고 클래스명에 대해서 css 로 스타일 수정했다

Next.js 렌더링

• ref
  • https://nextjs.org/docs/basic-features/data-fetching/overview
  • https://velog.io/@devstone/Next.js-100-활용하기-feat.-initialProps-webpack-storybook
• 빌드 시에 getStaticPaths 에서 데이터베이스에 속한 페이지 id 값들을 가져오고, getStaticProps에서 각각의 페이지에 대한 데이터를 불러오는 것에 대해서 공부해 보았다
  • 빌드를 한번 하면 빌드 시점으로 블로그 컨텐츠가 고정된다고 착각하고 있었는데, getStaticProps 에서 revalidate 속성을 이용하면 해결된다는 것을 이번에 배웠다

tailwindcss

• ref
  • https://tailwindcss.com/docs/installation
  • https://github.com/dcastil/tailwind-merge
• 클래스명 (혹은 styled-component 이름) 을 짓는 것을 매우 싫어하기 때문에 이번에 tailwindcss 를 제대로 적용했다
  • 1년 전쯤에도 시도 한적이 있는데, 새로운 버전이 나오고 최근에 npm trend 에서도 좋은 상승세가 있어서 다시 시도했다
  • 기본적인 사용법은 쉽지만, 프로젝트 전반에서 완전하게 이용하려면 여러가지 신경써야 할 부분이 있었다
    • 클래스의 스타일 충돌 (tailwind-merge 로 해결)
    • css/scss 파일에서 이용하기 등

XState

• ref
  • https://xstate.js.org/docs/
• ‘상태’라는 단어에 어울리는, 직관적이면서, 더 완고한 방식이라고 생각되어서 공부해 보았다
• 하지만 익히기가 너무 어려워서 끝내 적용하지는 못했다

---

결과 및 고찰

• code
  • https://github.com/ghtea/nest-of-wiz/tree/32ba0d0133211bcbbe6dc95adb9030bac581e006
• 어려울 거라고 생각은 했지만, 해결할 과제가 예상을 뛰어넘어서 중단하기로 했다
  • 특히 최적화, 이미지 관리 등이 까다로워보였다
• 노션에서 글을 작성하고 이후 velog 등 블로그 플랫폼에 붙여넣기해서 공개하는 식으로 진행할 거 같다