Swipe3 [오픈소스]CustomSwipe 개발 후기. 프런트엔드 swipe 기능의 경우 이미 swiper 같은 좋은 오픈소스가 많이 존재한다. 다만 swiper 같은 오래 관리되고 여러 기능을 지원해 주는 오픈소스의 특징상 커스터마이징에 적합하고 경량화되었다고 보기 힘든데 인터넷 환경이 좋지 않은 사용자들을 대상으로 지원할 swipe 기능에 대한 관심에서부터 시작한 react-custom-swipe라는 토이 오픈소스에서부터 개선점 및 아이디어를 추가해서 개발을 하다가 최종적으로 custom-swipe라는 오픈소스를 개발하게 되었다. swipe라는 기능을 커스터마이징 가능하게 Headless Components라는 개념으로 제공하는 오픈소스이며 가벼움과 간단함, 커스터마이징이라는 3가지 특징에 중점을 두고 만들었다. 사실 가볍게 Toy느낌으로 시작해서 Toy.. 2024. 2. 12. [React] react-custom-swipe 1.2 버전업 후기 최근에 흥미를 위해서 간략하게 개발하고 방치해둔 패키지인 react-custom-swipe의 버그들을 수정한 후 리팩토링 및 기능추가를 진행했다. 개인적인 흥미로 개발을 진행했던 패키지이다보니 패키지 개발 진행중 흥미를 상실하여서 기획만 해두고 방치해둔 기능들 그리고 알고 있으나 역시 귀찮아서 미뤄두었던 부분들을 해당 패키지를 지속적으로 관리하기로 결정하고 약 하루 정도 시간을 들여서 리팩토링을 진행후 기획했던 기능들을 개발완료했다. 이 글은 그 과정에서 소소하게 느낀부분이나 변경점들에 대한 간략한 기록이다. 이미 기존에 개발된 swipe나 slide 관련한 플러그인이나 라이브러리는 상당히 많은 편이다. 슬라이드나 스와이프 기능 자체가 dom 조작을 통해서 구현하는 요소다 보니 기존의 slide나 swi.. 2023. 9. 27. [오픈소스][React] react-custom-swipe 모바일 앱을 그대로 웹으로 옮기면서 좌우 스와이프를 통한 인피니티 스크롤을 구현해야했다. 관련해서 여러 제약 조건들을 충족 시켜주는 오픈소스 라이브러리를 찾을 수 없어서 스와이프 기능을 분석하고 하드코딩으로 개발을 하였는데 해당 기능에 흥미를 느껴서 오픈소스로 개발해서 정리를 해보고 싶은 생각으로 개발 해보았다. 개인적으로 찾아본 결과로는 기존 웹사이트나 관련 오픈소스의 경우 스와이프에서 레이지로딩이나 페이지네이션을 지원하는 케이스를 발견하지 못했다.(핀터레스트 등) 보통 스와이프 기능이라고 부르는 스와이프 모션과 플립 모션을 감지하여서 데스크탑과 모바일에서 스와이프 기능을 제공해준다. 또 내부 아이템들이 페이지네이션처럼 비동기적으로 추가되어도 index 쿼리스트링을 통해서 데이터(item)의 index.. 2022. 8. 3. 이전 1 다음