개인 기술 블로그 프로젝트

이 프로젝트는 개인 기술 블로그를 위한 Next.js 14 기반의 웹사이트입니다. 주요 기능과 구현 내용은 다음과 같습니다.

주요 기능

MDX 기반 콘텐츠: 마크다운과 JSX를 결합한 MDX를 사용하여 풍부한 블로그 콘텐츠 작성
반응형 디자인: 모든 디바이스에서 최적화된 사용자 경험 제공
다크 모드: 사용자 시스템 설정에 따른 자동 테마 변경 및 수동 전환 지원
SEO 최적화: 메타 태그 및 오픈 그래프 이미지 자동 생성
정적 사이트 생성: Next.js의 generateStaticParams를 활용한 빌드 타임 정적 페이지 생성

사용 기술

Next.js 14: React 기반의 프레임워크로 App Router 아키텍처 적용
TypeScript: 타입 안정성을 확보한 개발 환경
Tailwind CSS: 유틸리티 우선 CSS 프레임워크
MDX: 마크다운 내 JSX 컴포넌트 사용 가능
GitHub Actions: CI/CD 파이프라인 자동화
Cloudflare: DNS 관리 및 프록시 설정을 통한 보안 및 성능 향상

개발 과정

콘텐츠 관리: 파일 시스템 기반 콘텐츠 관리 구현
디자인 시스템: 일관된 UI 컴포넌트 설계
배포 자동화: GitHub Actions를 활용한 CI/CD 파이프라인 구축

배포 및 인프라

GitHub Pages: GitHub Actions 워크플로우를 통해 자동 빌드 및 배포
커스텀 도메인: 개인 도메인 구매 및 GitHub Pages와 연결
Cloudflare 통합: DNS 관리, CDN 적용 및 프록시 설정으로 보안 강화 및 접속 속도 개선

배운 점

이 프로젝트를 통해 Next.js 14의 새로운 App Router 구조와 React Server Components의 활용법을 배울 수 있었습니다. 또한 MDX를 활용한 콘텐츠 관리 시스템 구축과 GitHub Actions를 이용한 자동화된 배포 프로세스 구현에 대한 경험을 쌓을 수 있었습니다. 특히 generateStaticParams를 활용한 정적 사이트 생성 방식은 블로그의 성능 향상에 큰 도움이 되었습니다.