[TIL] 2023-1208 노션 API 활용하기... 근데 그냥 삽질 푸념...

노션 페이지를 불러와서 렌더해주고 있다...

Facts & Feelings & Findings...

- 개인 작업은 완전히 삽질 데이... 반년전에 멈춰두었던 블로그 프로젝트를 다시 진행중인데, db 겸 에디터로 활용하려고 했던 노션 api 가 말썽이다. 그냥 깔끔하게 html 로 데이터를 받아올 수 있으면 참 좋을텐데, notion api 는 자체적인 dto 로 데이터를 내보내주고 있다... 근데 이 block 단위가 무진장 헷갈린다... 

 

- react-notion-x 에서 제공하는 NotionRenderer 를 활용하면 이를 html 로 변환해주지만, 이를 스타일링 하기가 쉽지 않음... 최근 사내에서도 QR Scanner 라던지 date-picker 같은 외부 라이브러리를 불러와 디자인에 맞게 CSS 커스터마이징을 많이 해봤는데, 현재 프로젝트에서 생산성을 위해 도입했던 tailwind css 가 오히려 생산성을 저해하는 결과를 초래했다. 이 부분 때문에라도 외부 라이브러리를 사용해 UI 작업을 해야한다면 tailwind 는 비추 비추.. 그리고 오랜만에 쓰니까 문법도 너무 헷갈리고 여러모로... 더 규모있는 프로젝트에서도 사용하지 않는게 좋아보인다. 재사용하기가 너무 귀찮아짐. 

 

- tailwind css 는 유틸리티 퍼스트라서 미리 정의된 클래스 이름을 바탕으로 하는데, 이게 다른 css 모듈이나 styled component 처럼 기존에 정의된 css 를 클래스명으로 덮는게 되지 않는다. 차선책으로 renderer 에서 반환하는 html 에 정의된 css 파일 전체를 긁어와서 커스터마이징 하려고 했는데, 너무 방대해서 어떤 코드에 의해 내가 적용하려고 하는 스타일이 적용되지 않는건지 파악하기가 너무 힘들다... 

 

- 그래서 TOC 연동하는 작업을 멈추고 다른 작업을 하려고 했는데... 노션에서 데이터를 불러오는거 자체가 생각보다 복잡해서 흠... 이걸 계속 공부하면서 적용하는게 맞나... 확실히 react-notion-x 내부 코드는 많이 뜯어봤는데... 도대체 어떤 블록을 유틸함수의 인자로 전달해야 내가 원하는 데이터를 받아올 수 있을까.. 며칠째 그것만 디깅하느라.. 다른걸 하려다가도 아 좀만 하면 될거같은데 라는 생각때문에 다음 스텝으로 넘어가질 못하고 있다... ㅋㅋㅋㅋㅋㅋ

 

- 그냥 노션 db 는 다음에 연동하고... 나도 md 파일로 관리해서 올릴걸 그랬나... 차라리 그게 더 빨랐겠다... 그냥 지금이라도 노션을 버리는게 속편하겠다는 생각... 그냥 생짜로 구현하면 될걸 괜히 노션 api의 dto 에 맞추느라 시간을 소모하는 느낌... 그냥 md 그리고 ssg 방식으로 렌더링 하도록 만드는게 더 빠를 것 같다. 

 

Feedback

- 노션 api 버려