피드로 돌아가기
Dev.toFrontend
원문 읽기
TanStack Start 기반 Content-UI 분리 구조의 포트폴리오 설계
How I built my developer portfolio with React and TanStack Start — my project at Evolve
AI 요약
Context
단순 정적 웹사이트를 넘어 다국어 지원 및 프로젝트 확장성을 갖춘 전문 포트폴리오 구축 필요성 대두. UI 코드 내 데이터 하드코딩으로 인한 유지보수 효율 저하 및 콘텐츠 업데이트 시 발생하는 코드 수정 병목 지점 해결 요구.
Technical Solution
- Markdown 기반 Typed Frontmatter 도입을 통한 Content와 Presentation의 완전한 분리 설계
- TanStack Start 및 React 19 채택으로 SSR 기반의 최적화된 Routing 및 상태 관리 구조 확보
- /resume, /projects 등 독립 Route 설계를 통한 내비게이션 효율성 및 SEO 확장 가능성 제고
- Server-side API Route와 Resend 연동을 통한 정적 페이지 내 동적 Contact Form 기능 구현
- Interactive Card Deck UI 패턴 적용으로 단순 Grid 구조를 탈피한 사용자 경험 최적화
- Tailwind CSS 4 및 다국어 지원 로직 적용을 통한 반응형 디자인과 글로벌 접근성 확보
실천 포인트
1. 콘텐츠 변경 빈도가 높은 페이지는 Markdown/JSON 기반의 Content Collection으로 분리했는가?
2. UI 컴포넌트 내에 비즈니스 데이터가 하드코딩되어 유지보수 비용을 증가시키고 있지 않은가?
3. 단순 메일 링크 대신 Serverless Function 기반의 API Route를 통해 사용자 인터랙션을 처리했는가?
4. 다국어 지원 및 테마 변경 시 상태 관리와 Route 구조가 일관되게 유지되는가?