Notion API 를 연동해 블로그를 만들어보자 -2

주의! 정보성 글 보다는 삽질 기록에 가깝습니다.

 

API를 연동한 뒤에 데이터를 불러오고, 화면에 표현하는 작업을 했다.

내용 자체는 간단한데 Next13 공식문서도 읽으면서 찾아보고, 또 여러가지 적용 방법을 고민하다보니 생각보다 시간이 오래걸렸다. 

 

우선 글 목록을 불러오는데에는 성공했기 때문에, 이 블로그 아이템을 클릭했을 때 상세 페이지로 이동할 수 있도록 Link 컴포넌트를 적용해주었다. 

원래 하고 싶었던 것은 예전에 Next12에 있는 getStaticPaths 처럼 미리 static paths 를 slug 로 만들어 둔 뒤 이를 통해 각 상세 페이지를 만드는 것이었는데, 나는 글 상세 페이지에서 데이터 요청을 위해 id 값이 필요했기 때문에 Notion DB 상에 설정해두었던 slug 문자열과 해당 페이지의 id 값을 모두 URI를 통해 전송하고 싶었다. 그런데 일단 여기서 너무 시간이 오래걸려서 slug를 활용한 문자열 주소는 나중에 설정하기로 하고 우선 id 값을 전달해 페이지 데이터를 요청하기로 했다. 

 

뭔가 Link 태그에 추가 옵션을 넣어서 URI 상세는 slug 가 보여지고, id 값을 추가로 전달하는 방법이 있을 것 같은데 이상하게 찾지 못하고 있다. 이 부분은 찾아서 꼭 수정해야지.

 

아무튼 이 문제를 해결하기 위해 여러 방법을 찾아봤는데, Next 13 에서는 getStaticPaths 대신에 generateStaticParams 라는 함수를 제공하고 있다고 한다. 빌드 타임에 생성되는 SSG 방식에 다이나믹 라우팅이 적용되어야 하는 경우 이 함수를 사용해 paths 를 동적으로 생성할 수 있다고 하는데, 무슨 이유에선지 내 코드에서는 적용이 되지 않았다. (응?) 이 부분은 조금 더 공부가 필요할 것 같다. 

 

대신 새롭게 알게된 사실은 Page 컴포넌트에서 params 라는 객체로 현재 컨텍스트를 읽어올 수 있다는 것이고, 이를 이용해 useRouter 없이 서버 컴포넌트에서도 Link 태그로 전달하고 있던 id 값을 조회해 올 수 있었다. 

각 페이지에 대한 상세 정보 조회도 api routes를 통해 서버쪽에서 처리하도록 핸들러를 만들어주었다.

Notion API의 특성상 글 하나에 properties 와 content(blocks) 가 나뉘어 있기 때문에 api 문서를 참고해 요청을 보내는 코드를 만들었고, 이 응답값을 클라이언트에 보내주도록 작성했다. 그런데 지금 이 코드를 보면 요청 실패에 대한 처리가 하나도 안되어있어서 보완이 필요할 것 같다. 

 

데이터를 화면에 표시하기 위해서 화해 블로그에서 봤던 것처럼 마크다운으로 변환한 뒤에 html 로 변환을 할지 아니면 바로 html로 변환을 해주는 라이브러리를 사용할지 고민을 했다. 화해 기술블로그에서는 추후 다른 cms 를 사용할 때에도 유연하게 대처할 수 있게끔 하기 위해 마크다운을 사용했다고 하는데 나는 그럴 필요성을 느끼지 못해서 blocks-html-parser 라는 라이브러리를 사용하기로 했다. 

 

나는 노션에서 제공하고 있는 클라이언트 대신에 직접 데이터를 요청해서 콘텐츠 blocks 를 받아오고 있기 때문에, 코드를 아래와 같이 작성해서 적용 수 있었다. 

근데 지금 이 라이브러리를 사용하는 것의 문제점은 아래와 같이 deprecated 된 기능을 사용하고 있기 때문에 warning이 뜬다는 것임. 

marked 라는 것에 대해서 아직 잘 모르기 때문에 다음 기록은 이 문제를 해결하고 html 을 커스터마이징 할 수 있는 옵션을 설정해 예쁘게 꾸며주는 것에 대한 내용이 되지 않을까 싶다.

 

아래는 paragraph 와 callout 으로 이루어진 노션으로 작성된 글을 화면에 표시하고 있는 모습이다..