[ 발자국 ] 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 UIloading.tsx 파일을 활용한 페이지 로딩 UI 구현과 React Suspense가 어떻게 작동하는지 실습을 통해 익혔다.fallback을 활용해 사용자 경험을 향상시킬 수 있으며, 서버 컴포넌트와의 조합에서 강력한 기능을 발휘함을 이해했다.[보완하고 싶은 점]Suspense를 통한 데이터 의존성 최적화 경험 쌓기 🔹 스트리밍 렌더링스트리밍을 이용하여 HTML을 점진적으로 전달하는 방식에 대해 학습했다.대용량 페이지나 블로그 콘텐츠에서 초기 로딩 속도 향상에 유용함을 확인했다.[보완하고 싶은 점]스트리밍을 적용할 적절한 시점에 대한 전략 세우기SEO와 스트리밍의 관계에 대한 심화 학습🔹 무한 스크롤 with useInfiniteQuery & IntersectionObserver@tanstack/react-query의 useInfiniteQuery 훅과 IntersectionObserver를 결합해 무한 스크롤을 구현하는 방법을 익혔다.사용자 스크롤에 따라 자동으로 다음 페이지 데이터를 불러오는 구조를 이해하고, UX 측면의 유용함을 체감할 수 있었다.[보완하고 싶은 점]캐시, prefetching, error-handling 처리 고도화IntersectionObserver의 옵션 세팅 및 성능 최적화

[ 발자국 ] 렌더링 방식, Cursor AI 경험 (25.05.26~25.06.01)

본 게시글은 Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)를 수강하면서 작성한 내용입니다. 학습 내용여러 가지 렌더링 방식(CSR, SSR, SSG, ISR, SPA)의 차이점에 대해 학습하였다.여러 가지 렌더링 방식에 대해 확실하게 알아가는 과정을 거칠 수 있어서 좋았다.웹페이지의 목적에 따라서 적합한 렌더링 방식을 적용해야겠다고 생각했다.[ 보완하고 싶은 점 ]실제 프로젝트를 통해 각 렌더링 방식 직접 구현해보기하이브리드 렌더링 전략에 대한 추가 학습하기Cursor AI를 이용하는 기본적인 방법에 대해 실습하는 시간을 가졌다.Cursor AI의 기본 사용법을 알아볼 수 있었다.Project Rule 설정을 통해 명확한 fit에 따른 AI 이용이 가능하다는 점을 알 수 있었다.[ 보완하고 싶은 점 ]복잡한 프로젝트에 대해 Cursor AI를 효율적으로 사용해보는 경험 쌓기Project Rule에 대해 세밀한 조정 경험해보기Cursor AI 고급 사용법 탐구하기Next.js 프로젝트 세팅법에 대해 학습하였다.Next.js의 기본 세팅법에 대해 알아볼 수 있었다.코드 작성을 도와주는 여러 가지 추가 패키지를 알아볼 수 있었다.[ 보완하고 싶은 점 ]고급 설정 옵션 학습해보기다양한 환경 설정 시나리오 경험 해보기 미션 과정[ 링크 ] 웹 렌더링의 다양한 방식 (CSR, SSR, SSG, ISR, SPA) 각 렌더링 방식의 기본 개념을 이해하는 것에 중점을 두고 미션을 수행하였다.CSR, SSR, SSG, ISR에 대한 기본적인 개념에 대해 더 구체적으로 탐색하는 시간을 가졌고, 각 렌더링 방식에 따라 가지는 장점과 한계점을 통해 어떤 목적의 사용 예시가 있을 수 있을지 생각해보았다.다만, 여러 렌더링 방식에 대한 실제 구현 경험이 더 필요하다고 생각했다.[ 링크 ] 모스 부호 번역기 with Cursor AICursor AI를 이용하는 과정을 실습해 보고자 모스 부호 번역기 웹페이지를 간단하게 만들어 보았고, 그 과정을 글로 작성해보았다.Cursor AI를 더 잘 이용할 수 있는 방법에 대한 연구가 필요하다는 생각을 했고, 더 복잡한 프로젝트에서 AI를 이용하는 경험을 해보면 좋겠다고 생각했다.[ 링크 ] Next.js 프로젝트 세팅해보기실전 사용을 위해서 구체적인 설명은 생략하고 Next.js 프로젝트를 세팅하는 과정을 간단하게 정리해보았다. 다양한 설정 옵션에 대한 이해가 부족하기 때문에 그에 대해서 더 다양하게 알아보는 시간이 필요하다고 생각했다.