일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 스프링
- 코딩
- RiotAPI
- 유니티
- 게임
- spring
- Python
- react
- bcrypt
- node.js
- 백엔드
- unity
- 깃
- JSON
- springboot
- OAuth2.0
- netlify
- 프로그래밍
- 백준
- MongoDB
- oAuth
- express
- 스프링부트
- c#
- frontend
- 게임개발
- 파이썬
- jwt
- IntelliJ
- AWS
- Today
- Total
Unwound Developer
fullpage.js 직접만들기 (npm 배포) 본문
fullpage.js 직접 만들게 된 이유
첫번째 이유는 유료라는 것 입니다.
그리고 fullpage 라이브러리들이 공통적으로 사용하기 귀찮은 점이 있었는데,
사용하기 위해 지켜야할 컨벤션이라던가 제한되는 부분이 많아서 적용시키는것에 어려움이 있었습니다.
가장 큰 이유는 fullpage 개발시 요구사항이 각 섹션 내에서 스크롤이 되면서, 해당 섹션을 벗어날 때 fullpage가 작동해야 한다는 것이었습니다.
위 영상 처럼요
보통 일반적으로 fullpage를 적용하는 경우를 보면 각 섹션들이 height:100vh 속성을 가지는 경우가 대부분인데, 그러면 구현하기는 간단하지만, 각 섹션내에서 스크롤이 생기게할 수는 없습니다.
이러한 도전 과제들을 해결하기 위해 React와 TypeScript를 사용하여 자체 라이브러리를 개발하게 되었습니다.
개발 과정에서 가장 중요하게 생각했던 점은 다음과 같습니다:
1. 사용자 친화적인 API
- 최소한의 설정으로도 바로 사용 가능
- 필요한 경우 커스터마이징이 용이한 구조
- 직관적인 컴포넌트 구조
2. 성능 최적화
- requestAnimationFrame을 활용한 스크롤 이벤트 최적화
- 불필요한 리렌더링 방지
- 메모리 누수 방지를 위한 이벤트 리스너 관리
3. 확장성
- 다양한 애니메이션 옵션 지원
- 커스텀 훅을 통한 기능 확장 가능
- 타입 안정성 보장
결과적으로 개발된 라이브러리는 다음과 같은 장점을 가지게 되었습니다:
- 섹션 내부 스크롤과 전체 페이지 스크롤의 자연스러운 통합
- 높은 성능과 부드러운 애니메이션
- 직관적인 사용법과 유연한 커스터마이징
- TypeScript로 작성된 타입 안전성
이 라이브러리를 통해 기존 fullpage 라이브러리들의 한계를 극복하고,
더욱 유연하고 사용하기 쉬운 페이지 전환 경험을 제공할 수 있게 되었습니다.
사용법과 소스코드는 해당 깃허브 링크에서 확인해 볼 수 있습니다.
'Web > React' 카테고리의 다른 글
Javascript - 다크모드/라이트모드 (0) | 2024.12.17 |
---|---|
React state 란? (0) | 2024.12.07 |
React Custom Hook (2) | 2024.12.05 |