1. Notion API 연동 & MDX 렌더링

    

Notion API를 활용해 데이터를 가져오고, 이를 MDX 형식으로 렌더링하는 작업을 진행했습니다. Notion에서 작성된 콘텐츠를 웹에서 자연스럽게 보여주기 위해 MDX와 통합하는 과정이 있었는데, MDX를 이용하는 방법이 단순 마크다운을 다루는 게 아니라, 컴포넌트를 함께 다룰 수 있다는 점에서 유연함을 체감했습니다.

실무에서도 기술 블로그나 문서 페이지 제작 등에 응용할 수 있을 것 같다는 생각이 들었습니다. 또한 MDX 문서를 렌더링하는 과정에서 기존 콘텐츠와 렌더링 방식이나 스타일이 달라질 수 있는 부분들을 발견했고, 이를 조율하기 위해 remarkPlugins와 rehypePlugins를 옵션들을 활용했습니다. 덕분에 마크다운 문법에서 어색하게 렌더링될 수 있는 스타일들을 더욱 자연스럽게 나타낼 수 있게 되었고, components props를 통해 상황에 따라 다양한 커스터마이징을 처리할 수 있게 되었습니다.

2. Suspense & Loading UI & Streaming

    

React의 Suspense와 스트리밍 개념을 학습하며, 사용자 경험을 고려한 로딩 처리 방식에 대해 고민해볼 수 있었습니다. 기존에는 단순히 페이지 전체에 대한 로딩 상태를 스피너를 통해 표현했다면, 이제는 컴포넌트 단위 혹은 특정 영역에 대해 스켈레톤 UI 방식을 이용해 어떤 데이터가 렌더링될 지 미리 나타낼 수 있게 되었습니다.

3. Notin API Pagination & useInfiniteQuery

React Query의 useInfiniteQuery 훅과 react-intersection-observer를 함께 활용하여 무한 스크롤 기능을 구현하였는데, react-intersection-observer 라이브러리의 강력함을 체감할 수 있었습니다.