리액트3 리액트에서 터치 이벤트로 스와이프 구현 서비스에 휠 이벤트를 이용해 데이터를 바꿔주는 로직이 있었다 데스크탑에서는 wheel 이벤트를 사용하고, 모바일에서는 touch 이벤트를 사용했는데, 그중 onTouchMove에 이벤트 핸들러를 등록해 사용했다. 그리고 event객체에서 touches[0].clientY와 changedTouches[0].clientY를 받아 둘을 비교한 결과에 따라 위로 스와이프 했는지, 아래로 스와이프 했는지 판단했다. //터치의 시작이 끝보다 위면 up, 아래면 down if (e.touches[0].clientY e.changedTouches[0].clientY) { setDra.. 2023. 7. 17. 모바일에서 브라우저 주소창을 고려한 css height 설정 - svh 서비스 이용 시 위아래 스크롤이 되지 않도록 하고 싶었다. 하지만 별이 떠다니는 애니메이션이 상당한 height를 차지하고 있었다. 이것들을 정리하기엔 쉽지 않다고 생각하여 레이아웃의 크기를 viewport에 맞추기로 결정했다. height: calc(100vh - 55px); // 55px은 헤더의 높이 위 코드를 적용한 후 데스크탑에서는 더 이상 스크롤이 생기지 않았지만, IOS 사파리에서 동일한 증상이 반복되었다. (네이버 브라우저에서 정상 작동하는 것을 확인하고, 다른 브라우저를 확인해보지는 않았다.) 하단의 주소창 때문에 의도대로 동작하지 않고 있다. 주소창을 고려한 높이 설정을 위해 구글링하다 발견한 아래 방법도 사용해 봤지만 해결되지 않았다. const vh = window.innerHeig.. 2023. 7. 11. Recoil을 알아보자 상태 관리 라이브러리의 등장 배경 다음과 같은 상황을 가정해 보자 // src/App.tsx import React from 'react'; import Top from './Top'; function App() { return ; } export default App; App.tsx에서 Top.tsx를 랜더링 하고 // src/Top.tsx // Middle 컴포넌트를 자식으로 가지고 BottomText를 출력해야하는 컴포넌트 import React from 'react'; import Middle from './Middle'; function Top() { return ( Top : {BottomText} ); } export default Top; Top.tsx에서는 Middle.tsx를 랜더링 한.. 2022. 4. 28. 이전 1 다음
