Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI) 강의를 수강하며 작성한 1주차 발자국입니다.

Notion API 연동 & MDX 렌더링

Notion API를 활용해 콘텐츠 데이터를 가져오고, 이를 MDX로 렌더링하는 작업을 진행했습니다. 단순한 마크다운 렌더링이 아니라, MDX의 장점을 살려 리액트 컴포넌트를 함께 사용하는 방식으로 구현했습니다. 이 덕분에 정적인 글이 아니라 인터랙션이 가능한 요소들을 함께 구성할 수 있었고, 콘텐츠의 확장성 면에서도 훨씬 유연하다는 점을 느꼈습니다.

렌더링 과정에서는 remarkPlugins와 rehypePlugins를 적절히 활용해 Notion 콘텐츠가 웹에서도 자연스럽게 표현되도록 조율했습니다. 마크다운 문법 특성상 발생할 수 있는 스타일의 어색함도 plugins와 components props 설정을 통해 상황에 맞게 커스터마이징하며 해결할 수 있었습니다. 실무에서 기술 블로그나 내부 문서 시스템 등을 구축할 때 응용할 수 있겠다는 가능성도 확인했습니다.

Suspense, Loading UI, Streaming

React의 Suspense 개념과 Streaming 렌더링 방식을 함께 학습하며 사용자 경험을 고려한 로딩 처리 방법에 대해 고민해봤습니다. 기존에는 페이지 전체에 로딩 스피너를 띄우는 방식이었다면, 이제는 데이터가 필요한 컴포넌트 단위에서 스켈레톤 UI를 미리 보여주는 방식으로 전환했습니다. 특히, 페이지 전환 없이도 사용자에게 빠른 반응을 제공할 수 있어 실제 사용성 면에서 큰 차이를 느꼈습니다.

Notion API Pagination & useInfiniteQuery

Notion API의 페이지네이션 구조를 기반으로 React Query의 useInfiniteQuery 훅과 react-intersection-observer를 함께 활용해 무한 스크롤 기능을 구현했습니다. 마지막 요소가 뷰포트에 진입할 때 자동으로 다음 데이터를 불러오는 구조로 만들었고, react-intersection-observer의 사용 편의성과 성능 최적화 측면에서 인상 깊었습니다. 단순히 기능 구현을 넘어서 실제 사용자 흐름에 맞춘 경험 설계에 대해 한 단계 더 고민해볼 수 있는 계기가 되었습니다.