개인 포트폴리오 웹사이트 v1 (Legacy)
개발자로서의 첫 시작이자, CMS 도입의 필요성을 일깨워준 하드코딩 기반의 초기 포트폴리오
[프로젝트 개요]
웹 개발을 처음 배우며 제작한 개인 포트폴리오 사이트입니다. 백엔드나 데이터베이스 없이 React 기반 프론트엔드만으로 구현했으며, 프로젝트 정보와 기술 스택 데이터는 코드 내부의 배열 형태로 직접 관리했습니다. 이후 프로젝트가 늘어나면서 콘텐츠 수정과 관리가 번거로워졌고, 이를 계기로 CMS 기반 구조로 개선된 v2 포트폴리오를 만들게 되었습니다. 웹 서비스 구조를 이해하는 출발점이 된 프로젝트입니다.
[담당 역할] Frontend Developer
- React 컴포넌트 구조 설계 및 UI 구현
- CSS 스타일링 및 레이아웃 구성
- JSON/객체 배열 기반 정적 데이터 관리 및 화면 렌더링 구현
[핵심 구현 기능]
정적 데이터 렌더링
프로젝트 정보를 로컬 데이터 파일에서 배열 형태로 관리하고, map()을 활용해 카드 UI로 렌더링했습니다. 서버 없이도 데이터를 구조화해 화면에 표시하는 기본적인 React 데이터 바인딩 방식을 구현했습니다.
단일 페이지 구조(SPA)
라우팅 라이브러리 없이 스크롤 기반 섹션 이동 방식으로 About, Projects, Contact 영역을 구성해 단순하고 직관적인 포트폴리오 구조를 만들었습니다.
[한계점 및 개선 경험]
프로젝트 정보를 코드에 직접 작성하는 방식은 수정이나 추가 작업 때마다 재배포가 필요해 비효율적이었습니다. 프로젝트 수가 늘어날수록 데이터 관리와 이미지 정리가 어려워졌고, 콘텐츠 관리와 화면 로직을 분리할 필요성을 느끼게 되었습니다.
이 경험을 바탕으로 Headless CMS(Sanity)를 도입한 v2 포트폴리오를 제작하게 되었고, 데이터와 UI를 분리하는 구조의 필요성을 실제로 이해하게 되었습니다.