[ 발자국 ] Notion API 활용, 스트리밍 등 (25.06.02~25.06.08)

본 게시글은 Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)를 수강하면서 작성한 내용입니다.

✅ 학습 내용

🔹 Notion API를 활용한 콘텐츠 렌더링

• Notion API를 이용하여 블로그 게시글 데이터를 불러오고, 이를 Next.js에서 MDX 형식으로 렌더링하는 과정을 학습했다.

• notion-to-md, next-mdx-remote 패키지를 활용해 Notion 콘텐츠를 마크다운 → MDX로 변환하고, 클라이언트에 전달되도록 구성했다.

• 마크다운 문법 외에도 코드 하이라이팅, 커스텀 컴포넌트 삽입이 가능한 MDX 포맷의 장점을 이해할 수 있었다.

[보완하고 싶은 점]

• MDX 내에서 복잡한 커스텀 컴포넌트 구성 능력 강화

• Notion API로 다양한 블록 타입 처리해보기

• 제대로 처리되지 않는 표현이 잘 처리되도록 수정하기

🔹 remark & rehype 플러그인

• 마크다운 렌더링 시 remark-gfm, rehype-sanitize, rehype-pretty-code 등의 플러그인을 통해 확장된 문법 지원 및 보안 강화, 코드 하이라이팅 적용 방법을 학습했다.

• 특히 rehype-pretty-code를 통해 코드 블록에 테마, 줄 번호, 복사 버튼 등 시각적 향상을 적용할 수 있었다.

[보완하고 싶은 점]

• rehype 플러그인의 커스터마이징 옵션 더 깊이 이해하기

• 다양한 테마 적용 및 UX 개선 사례 조사

🔹 React Suspense & Loading UI

• loading.tsx 파일을 활용한 페이지 로딩 UI 구현과 React Suspense가 어떻게 작동하는지 실습을 통해 익혔다.

• fallback을 활용해 사용자 경험을 향상시킬 수 있으며, 서버 컴포넌트와의 조합에서 강력한 기능을 발휘함을 이해했다.

[보완하고 싶은 점]

• Suspense를 통한 데이터 의존성 최적화 경험 쌓기

   

🔹 스트리밍 렌더링

• 스트리밍을 이용하여 HTML을 점진적으로 전달하는 방식에 대해 학습했다.

• 대용량 페이지나 블로그 콘텐츠에서 초기 로딩 속도 향상에 유용함을 확인했다.

[보완하고 싶은 점]

• 스트리밍을 적용할 적절한 시점에 대한 전략 세우기

• SEO와 스트리밍의 관계에 대한 심화 학습

🔹 무한 스크롤 with useInfiniteQuery & IntersectionObserver

• @tanstack/react-query의 useInfiniteQuery 훅과 IntersectionObserver를 결합해 무한 스크롤을 구현하는 방법을 익혔다.

• 사용자 스크롤에 따라 자동으로 다음 페이지 데이터를 불러오는 구조를 이해하고, UX 측면의 유용함을 체감할 수 있었다.

[보완하고 싶은 점]

• 캐시, prefetching, error-handling 처리 고도화

• IntersectionObserver의 옵션 세팅 및 성능 최적화