플러스프로젝트 배경
1) 문제점 기존 블로그 플랫폼은 코드 하이라이팅·커스텀 컴포넌트 삽입 방식에 제약이 있어 원하는 형태로 포스트 작성 불가 콘텐츠 수정 시 전체 사이트를 재배포해야 하는 비효율 발생 포스트 수가 늘어나도 원하는 글을 빠르게 찾기 어려운 검색 UX 문제 2) 프로젝트 목표 커스텀 렌더링: MDX 기반으로 Callout·코드 블록 등 커스텀 컴포넌트를 자유롭게 삽입 배포 없는 업데이트: ISR 태그
프로젝트 성과
배포 없는 콘텐츠 갱신
모든 포스트 SSG 정적 생성 + ISR 태그 재검증으로 어드민 수정 즉시 자동 갱신
커스텀 MDX 환경 구축
Callout·Highlight·MdxImage 등 6개 커스텀 컴포넌트로 풍부한 포스트 작성 환경 구현
실시간 검색
Zustand + 디바운싱 + AbortController 기반 Cmd+K 검색 모달 구현
핵심 기능
MDX 렌더링 파이프라인
next-mdx-remote/rsc 서버 사이드 렌더링 + rehype-pretty-code + shiki 코드 하이라이팅
진행 단계
설계
2025.12.
MDX 렌더링 파이프라인 및 커스텀 컴포넌트 구조 설계
프로젝트 상세
1) 포트폴리오 소개 프론트엔드 개발 경험과 기술 아티클을 공유하는 개인 기술 블로그. 개발자를 메인 타깃으로, Next.js 16 + MDX 기반 SSG 정적 생성과 ISR 재검증을 활용해 빠른 로딩 속도와 실시간 콘텐츠 업데이트를 동시에 달성한 퍼블리싱 플랫폼. 2) 작업 범위 Front-end 개발 반응형 웹 (다크/라이트 테마) 3) 주요 업무 next-mdx-remote/rsc 기반
