Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- npm-check-updates
- package.json
- naver api
- s3
- fly.io
- Next.js
- GitHub
- qoddi
- Web Storage
- heroku
- aws-sdk
- .eslintrc
- php
- react
- dependencies
- bucket
- dependabot
- 반응형
- Github Pages
- node.js
- createRoot
- touch event
- CSS
- gh-pages
- react18
- 배포
- AWS
- multer-s3
- 클린코드
- hooks
Archives
- Today
- Total
목록touch event (1)
Ann's log

이전에 만든 리액트 프로젝트의 모바일 화면을 수정하기 위해 touch 이벤트를 다루는 방법을 찾아 보게 되었다. 명칭이 touch carousel이 맞는지는 정확히 모르겠지만,,😅 내가 만들고자 한 화면은 넷플릭스 모바일 앱 화면과 비슷하다. 화면 터치가 되고 있는 슬라이드만 움직이고, 슬라이드의 양 끝에 도달하면 더이상 슬라이드 되지 않는다. touch 이벤트 사용하기 // 모바일 화면일때 touchX 값 관리 const [ touchX, setTouchX ] = useState(0); // 화면 터치가 시작되면 X값을 설정함 function onTouchStart(e) { setTouchX(e.changedTouches[0].pageX); } // 화면 터치가 완료되면 해당 ul의 left값만 변경..
React
2022. 6. 27. 14:22