리액트

TL;DR드래그할 수 있는 요소로 변경 — draggable={true}드래그 시작 — onDragStart 이벤트 트리거드래그하고 있는 요소의 인덱스 정보 저장 — state.draggedFrom드래그 상태 true로 변경 — state.isDragging이벤트 트리거 시점의 엘리먼트 리스트 저장 — state.originalOrder마우스 커서가 드롭 가능한 영역에 있을 때 — onDragOver 이벤트 트리거drop 이벤트를 사용할 수 있도록 dragOver 기본 이벤트 방지 — e.preventDefault()마우스 포인터 위치에 있는 요소의 인덱스 저장 — state.draggedTo엘리먼트 순서 변경 — state.updatedOrder 드래그중인 아이템을 마우스 포인터 위치(draggedTo..

자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다.  TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크..

💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다 방법 1 — src 속성에 svg 경로 입력 ; 💡 파일 경로 지정 참고 내용❶ JSX 엘리먼트 속성의 루트 기준은 `public` 폴더만약 `` 태그의 `src` 속성(JSX 태그 속성)에 `src` 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 `src` 속성에 할당하거나,`src` 속성 안에서 `require()` 사용 ex) ``❷ CSS 파일 루트 폴더 기준은 `src` 폴더❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가)  태그 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public..