728x90 React2 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. 이전 1 다음 728x90
