프로젝트 배경
노션이나프레젠테이션등의플랫폼을이용해서포트폴리오를정리하는사람들이많습니다.
하지만저는프론트엔드개발자로서언젠가는저만의포트폴리오사이트는꼭만들고싶다고생각했습니다.
또한평소에애니메이션을직접구현하는것을좋아하기에다양한사용자인터렉션을추가하여포트폴리오를만들어보고싶었습니다.
이러한점들때문에지금의포트폴리오사이트를제작하게되었습니다.
구현 내용
custom hook을 활용한 중복 로직 최소화
cursor follow 효과, magnetic 효과 등을 custom hook로 처리하여 중복 로직 최소화
gsap, framer-motion 라이브러리를 사용한 사용자 인터렉션 구현
parallax scroll, magnetic 등의 사용자 인터렉션 구현
벡터 이미지와 AnimatePresence 컴포넌트를 활용하여 페이지 전환 애니메이션 구현
성과 및 배운 점
Next.js의 렌더링 과정에 대해 이해할 수 있었습니다.
framer-motion을 활용하여 페이지 전환 애니메이션을 처리하는 과정에서 app router에서 페이지 전환 애니메이션이 동작하지 않는 문제를 마주했습니다.
LayoutRouterContext를 통해 router 갱신을 강제로 막는 frozen router를 통해 문제를 해결하는 과정에서 page router와 app router의 렌더링 과정 차이를 이해할 수 있었습니다.