개인 포트폴리오 웹사이트 v2 (Next.js 15 + Sanity)

프로젝트 개요
기존 포트폴리오(v1)를 운영하면서 프로젝트를 추가하거나 내용을 수정할 때마다 코드를 수정하고 다시 배포해야 하는 번거로움을 겪었다. 이 문제를 해결하기 위해 Next.js와 Sanity Headless CMS를 활용해 포트폴리오를 새로 구축했다. 콘텐츠는 CMS에서 관리하고 화면에서는 데이터를 불러와 렌더링하도록 구조를 변경하여, 코드 수정 없이도 포트폴리오를 업데이트할 수 있도록 만들었다.

담당 역할 및 기여 — Full Stack Developer

• Next.js App Router 기반 포트폴리오 구조 리팩토링
• Sanity CMS 스키마 설계 및 데이터 연동 구현
• 방문자 수 카운팅 API 구현
• Vercel 배포 및 운영 환경 구성

핵심 구현 기능

1. CMS 기반 콘텐츠 관리 구조 전환
   기존에는 프로젝트 정보를 코드 내부 배열로 관리했지만, Sanity CMS를 도입해 프로젝트·경력·방문자 수 데이터를 CMS에서 관리하도록 변경했다. Next.js에서 GROQ 쿼리를 통해 데이터를 조회하고 화면에 렌더링하는 구조로 개선했다.
2. 방문자 트래킹 기능 구현
   Next.js API Route와 Sanity Write Client를 활용해 전체 방문자 수와 오늘 방문자 수를 기록하는 기능을 구현했다. 캐싱으로 인해 방문자 수가 중복 증가하는 문제를 방지하기 위해 요청 단위 기준으로 카운팅하도록 처리했다.

문제 해결 경험

React 19 호환성 문제
Next.js 15(React 19 RC) 환경에서 일부 UI 라이브러리가 정상적으로 동작하지 않는 문제가 있었다. 의존성 버전을 확인하고 라이브러리를 교체하거나 버전을 조정해 빌드 오류를 해결했다.

CMS 데이터 안정성 처리
CMS에서 전달되는 데이터가 항상 동일한 구조를 보장하지 않아 렌더링 과정에서 오류가 발생할 수 있었다. GROQ 쿼리에서 필요한 필드만 조회하고, 컴포넌트에서는 optional chaining과 기본값 처리를 적용해 안정적으로 동작하도록 수정했다.

배운 점
단순히 화면을 구현하는 것을 넘어 콘텐츠 관리 구조와 데이터 흐름을 함께 설계하는 것이 중요하다는 것을 배웠다. 특히 데이터와 UI를 분리하는 구조가 유지보수와 확장성에 큰 영향을 준다는 점을 직접 경험할 수 있었다.