fullpage.js 직접만들기 (npm 배포)

fullpage.js 직접 만들게 된 이유

첫번째 이유는 유료라는 것 입니다.

 

그리고 fullpage 라이브러리들이 공통적으로 사용하기 귀찮은 점이 있었는데,

사용하기 위해 지켜야할 컨벤션이라던가 제한되는 부분이 많아서 적용시키는것에 어려움이 있었습니다.

 

가장 큰 이유는 fullpage 개발시 요구사항이 각 섹션 내에서 스크롤이 되면서, 해당 섹션을 벗어날 때 fullpage가 작동해야 한다는 것이었습니다.

 

위 영상 처럼요

 

보통 일반적으로 fullpage를 적용하는 경우를 보면 각 섹션들이 height:100vh 속성을 가지는 경우가 대부분인데, 그러면 구현하기는 간단하지만, 각 섹션내에서 스크롤이 생기게할 수는 없습니다. 

 

이러한 도전 과제들을 해결하기 위해 React와 TypeScript를 사용하여 자체 라이브러리를 개발하게 되었습니다.

개발 과정에서 가장 중요하게 생각했던 점은 다음과 같습니다:

1. 사용자 친화적인 API
   - 최소한의 설정으로도 바로 사용 가능
   - 필요한 경우 커스터마이징이 용이한 구조
   - 직관적인 컴포넌트 구조

2. 성능 최적화
   - requestAnimationFrame을 활용한 스크롤 이벤트 최적화
   - 불필요한 리렌더링 방지
   - 메모리 누수 방지를 위한 이벤트 리스너 관리

3. 확장성
   - 다양한 애니메이션 옵션 지원
   - 커스텀 훅을 통한 기능 확장 가능
   - 타입 안정성 보장

결과적으로 개발된 라이브러리는 다음과 같은 장점을 가지게 되었습니다:

- 섹션 내부 스크롤과 전체 페이지 스크롤의 자연스러운 통합
- 높은 성능과 부드러운 애니메이션
- 직관적인 사용법과 유연한 커스터마이징
- TypeScript로 작성된 타입 안전성

이 라이브러리를 통해 기존 fullpage 라이브러리들의 한계를 극복하고, 
더욱 유연하고 사용하기 쉬운 페이지 전환 경험을 제공할 수 있게 되었습니다.

 

사용법과 소스코드는 해당 깃허브 링크에서 확인해 볼 수 있습니다.

 

https://github.com/ysh038/fullpage-nestedscroll-react