포트폴리오

개인 포트폴리오 사이트

2025.03 -

💻 기술 스택

React
Next.js
Typescript
Jotai
Tanstack Query
Supabase

🧩 구현 기능

1. 프로젝트 상세 모달/페이지 개발

  • Next.js의 Intercepting Routes, Parallel Routes 기능을 활용하여 모달이 별도의 URL을 갖는 독립 페이지로 동작할 수 있도록 함

  • 뒤로가기, 새로고침/직접 접근 시에는 프로젝트 상세 페이지로 자연스럽게 전환하여, 기존 흐름을 유지할 수 있도록 함

  • 바닥에서 슬라이드업되는 바텀 시트 형태의 모달 애니메이션 구현

2. 커서 컴포넌트 개발

  • 커서 타입과 표시 텍스트로 구성된 커서 전역 상태에 의해 커서의 형태가 변화하는 기능 구현

  • 커서의 위치 변화를 부드럽게 구현하기 위해, useAnimationFrame을 통해 매 프레임 motionValue로 반영

3. 현재 보고 있는 섹션을 표시하는 내비게이션 개발

  • 각 섹션의 화면 노출 여부를 감지하고, 현재 노출된 섹션이 바뀌면 해당 항목의 -offsetTop만큼 리스트 위치를 이동시켜 자연스럽게 전환

  • 마우스 오버 시 전체 섹션 목록이 펼쳐지고 섹션 클릭시 해당 위치로 스크롤되도록 구현

📌 이슈

모바일 환경에서 커서 컴포넌트가 한 군데에 고정되는 문제

➕ 기타 내용

GitHub Actions와 AWS(EC2, S3, CodeDeploy)를 활용한 자동 배포 파이프라인 구축

  • CI/CD 전체 흐름을 실습하며 배포 구조 이해도를 높임 (블로그 포스트) (이전 레포)

  • 현재는 비용·운영 편의성을 고려해 서버리스 배포 플랫폼 Vercel로 전환한 상태

🌱 배운점

처음부터 직접 기획, 설계, 개발, 배포까지 전 과정을 경험하며 하나의 서비스를 운영하는 관점에서의 개발 프로세스를 익혔습니다. 초기에 프로젝트 데이터를 빈번히 수정하게 되면서, 내부 파일로 관리하는 대신 데이터를 DB로 분리하여 유지보수 효율을 높이는 구조로 개선했습니다. 또한 배포 환경 전환, SEO 개선, UI 수정 등 다양한 시도를 반복하며 지속적인 개선과 실험을 통해 완성도를 높였습니다. 이 프로젝트를 통해 지속적으로 개선하고 운영할 수 있는 구조를 설계하는 것 역시 개발자의 중요한 역할임을 배웠습니다.