728x90 React3 React 드래그 앤 드롭으로 puzzle-game 만들기 준비물 1, 9등분한 이미지 2. 사전학습 React 드래그 앤 드롭 구현 핵심키워드 onDragStart, onDragEnter, onDragOver, onDragEnd useRef로 index 위치값 참조 draggable 속성 넣기 > ## DragEvents 우선 4가지 이벤트의 차이를 알아야 합니다. onDragStart velog.io 코드를 보기 전에 구조 설명 1. typescript를 사용하고 있습니다. 2. css는 styled-components를 사용하고 있습니다. 3. 컴포넌트를 UI,로직을 나눠서 구현하였습니다. Style.Puzzle.ts import styled from 'styled-components'; const Container = styled.section` posi.. 2022. 12. 19. React 무한스크롤 Intersection Observer API CRA에서 간단하게 Intersction Observer API를 사용한 무한스크롤 방법을 기록 하였습니다. 우선 공식문서에 나온 Intersection Observer API 사용방법 입니다. options는 어떻게 설정하면 되는지 설명해 드리겠습니다. const options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } const observer = new IntersectionObserver(callback, options); root는 viewport를 지정해주면 됩니다. Intersection Observer API 공식문서 첫 문장을 보면 나오는 설명입니다. Intersection Obs.. 2022. 12. 18. react-catbow-scrollview 해당 포스터는 react-catbow-scrollview 사용법을 알리기 위해 작성 되었습니다. (version: 1.1.4 기준) 1. JSDoc으로 설명하는 친절한 코드 설명 ScrollView 코드에디터에서 옵션 설정 방법을 알 수 있게 지원 해줍니다. 컴포넌트에 마우스를 올려두기만 하면 됩니다.!! 하지만 그래도 잘 모르겠다면 react-catbow-scrollview 레파지토리에서 README.md의 option을 참고하세요.! GitHub - catbow/react-catbow-scrollview Contribute to catbow/react-catbow-scrollview development by creating an account on GitHub. github.com const opt.. 2022. 12. 17. 이전 1 다음 728x90
