이번 프로젝트를 시작하게 된 이유.
사실 개인이 별도의 서버를 구성하고 배포까지 하기에는 많은 어려움이 있다고 생각한다.
외부 공격에 의한 요금 폭탄도 두렵고, 백엔드를 express로 구현을 하더라도 어떻게 배포해야 하는지… 쉽지않다.
Vercel은 자신들이 만든 Next를 일정 사용량 만큼 무료로 호스팅을 해준다. 또한 Next의 api 라우트 기능은 외부 Api를 사용하기 위해 토큰을 숨겨 놓을 수 있는 좋은 기능으로 활용이 가능하기에 남에게 보여줄 수 있는 나만의 프로젝트를 진행할 수 있을 것 같았다.
프로젝트 : Notion API 기반 블로그 만들기
이 프로젝트는 Next.js와 Next에서의 TanStack Query를 학습하고, 실전에서 사용할 수 있는 개인 기술 블로그를 만드는 것을 목표로 합니다.
Notion DB를 Headless CMS처럼 활용하며, SSR과 CSR을 적절히 혼합한 구조로 구현됩니다.
아키텍처는 FSD(Feature-Sliced Design) 패턴을 따르며,
클라이언트 전역 상태 관리는 Zustand를 사용합니다.
vercel 배포 링크
⚙️ 목표 사용 기술
- Next.js (App Router)
- TailwindCSS
- TanStack Query(SSR 하이드레이션)
- zustand
- (예정) Chart.js or Recharts 활용 대시보드
- FSD 디자인 본격 적용
📌주요 기능
🧭 페이지별 기능
주요 레이아웃 구성
Header
- 로고 (홈 링크), About Me, GitHub 링크, 다크모드 토글 버튼 + 통계 페이지(구현 예정)
Side Navigation
- 소개 문구 박스
- 검색창 (URL 쿼리로 검색어 전달) + fuse.js로 검색결과 필터링
- 태그별 포스트 수 리스트(클릭 시 해당 태그로 검색)
라우팅별 기능
/ 메인 페이지
- 기술 블로깅:
PostCard형태로 최신 6개 출력
- 교육/학습&회고: 각 블록의
PostTableRow형태로 제목만 노출
- 각 섹션은 '더보기' 버튼 → 해당 카테고리로 이동 (
/posting/[category])
/posting/[category] 포스팅 리스트
- 카테고리별 무한스크롤
- TanStack Query + Intersection Observer(감지div) 기반 CSR 렌더링
/posting/search/[keyword] 검색 결과 리스트
- 네비게이션의 검색 기능 또는 취합된 태그 클릭시 keyword 검색 진행
- 검색은 영어와 한글을 양방향 검색이 가능하게 구현
- 모든 카테고리에서 결과를 fuse.js를 통해서 찾아냄(NotionApi에서는 검색 쿼리를 지원x)
/post/[id] 포스팅 상세 페이지
- SSR로 메타데이터 구성 (SEO 최적화)
- CSR로
notion-render-x렌더링
- 댓글 컴포넌트도 CSR 렌더링
/state 통계 페이지(구현 예정)
- 태그별 빈도수, 카테고리별 글 개수, 날짜별 작성 추이 등을 시각화.
- GitHub-style heatmap 추가
🚦 렌더링 전략 요약
페이지 | SSR | CSR | 비고 |
/ | ✅ | ❌ | 메인 포스팅, 태그 목록은 SSR |
/posting/[category] | ❌ | ✅ | 무한스크롤 적용 |
/posting/search/[keyword] | ❌ | ✅ | 무한스크롤 적용 |
/post/[id] | ✅ | ✅ | SEO 위해 메타데이터 SSR, 본문 및 댓글은 CSR |
/stats | 선택 | 선택 | 라이브러리에 따라 결정 |
🧱 폴더 구조 (FSD)
/app
├── (page)
│ ├──posting/[category]/page.tsx
│ ├──post/[id]/page.tsx
│ └──stats/page.tsx
├── api/
│ └post/[id]/page.tsx
├── layout.tsx
└── page.tsx
/src
├── entities/
├── features/
├── widgets/
├── shared/
