react18 [오픈소스]CustomSwipe 개발 후기. 프런트엔드 swipe 기능의 경우 이미 swiper 같은 좋은 오픈소스가 많이 존재한다. 다만 swiper 같은 오래 관리되고 여러 기능을 지원해 주는 오픈소스의 특징상 커스터마이징에 적합하고 경량화되었다고 보기 힘든데 인터넷 환경이 좋지 않은 사용자들을 대상으로 지원할 swipe 기능에 대한 관심에서부터 시작한 react-custom-swipe라는 토이 오픈소스에서부터 개선점 및 아이디어를 추가해서 개발을 하다가 최종적으로 custom-swipe라는 오픈소스를 개발하게 되었다. swipe라는 기능을 커스터마이징 가능하게 Headless Components라는 개념으로 제공하는 오픈소스이며 가벼움과 간단함, 커스터마이징이라는 3가지 특징에 중점을 두고 만들었다. 사실 가볍게 Toy느낌으로 시작해서 Toy.. 2024. 2. 12. [오픈소스][React] react-custom-swipe 모바일 앱을 그대로 웹으로 옮기면서 좌우 스와이프를 통한 인피니티 스크롤을 구현해야했다. 관련해서 여러 제약 조건들을 충족 시켜주는 오픈소스 라이브러리를 찾을 수 없어서 스와이프 기능을 분석하고 하드코딩으로 개발을 하였는데 해당 기능에 흥미를 느껴서 오픈소스로 개발해서 정리를 해보고 싶은 생각으로 개발 해보았다. 개인적으로 찾아본 결과로는 기존 웹사이트나 관련 오픈소스의 경우 스와이프에서 레이지로딩이나 페이지네이션을 지원하는 케이스를 발견하지 못했다.(핀터레스트 등) 보통 스와이프 기능이라고 부르는 스와이프 모션과 플립 모션을 감지하여서 데스크탑과 모바일에서 스와이프 기능을 제공해준다. 또 내부 아이템들이 페이지네이션처럼 비동기적으로 추가되어도 index 쿼리스트링을 통해서 데이터(item)의 index.. 2022. 8. 3. [React]React-dom 과 render 리액트 18기준 레거시가 된 render 함수의 구조를 간단히 들여다 보자 render함수는 react-dom 패키지의 ReactDomLegacy로 분류 되어 있다. export function render( element: React$Element, container: Container, callback: ?Function, ) { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + 'instead. Until you switch to the new API, your app will behave as ' + "if it's running React 17. Learn " + .. 2022. 7. 17. [React] React-dom에서의 innerHTML 리액트의 경우 리액트(jsx,정의 등)와 렌더러(웹의 경우 보통 react-dom)를 사용해서 어플리케이션의 UI를 렌더링한다. 렌더러의 경우 그 내용이나 구조등이 복잡한 편이라 정리해서 쪼개서 글을 쓰자니 너무 양이 많아지는 문제점이 있다. 그래서 소스코드 일부를 작게작게 쪼개서 정리하는 포스팅을 추가적으로 하기로 했다. 리액트의 경우 v-dom을 만들어서 DOM 자체를 리액트에서 관리하다보니 XSS 공격등 상대적으로 프론트엔드 영역에서의 보안이 안정적이다. 내부 dom을 직접 모두 관리하고 innerHTML등의 기존 js API를 최대한 사용하지 않아서 그런데 문제는 개발을 하다보면 innerHTML등의 API가 필요한 상황이 존재한다는 것이다. HTML 태그가 포함된 문자열을 DOM으로 추가하는 경.. 2022. 5. 31. 이전 1 2 3 4 5 다음
