안녕하세요

선요약 문제 => 드래그 중 자식 요소를 지나갈 때 onDragOver onDragLeave 이벤트가 반복 발생하는 문제 해결방법 => 자식 요소의 마우스 이벤트를 막기 { pointer-events: none; } Icon과 Span 영역을 지나갈 때 드래그가 일순 Leave되었다가 다시 Over 되는 문제가 발생 자식 요소를 마우스 인식하지 못하도록 하면 해결되지 않을까? 라는 생각으로 css에 마우스 이벤트를 막아 본 결과 해결 되었음 { pointer-events: none; }

const GlobalStyle = createGlobalStyle` @font-face { font-family: "Pretendard"; src: local('PretendardRegular'), local('PretendardRegular'), url(${PretendardRegular}) format('woff2'); font-weight:400; } 위와 같이 font-face를 적용할 경우에는 리렌더링 되는 동안 폰트가 깜빡이는 현상이 발생한다. styled-component를 이용할 때 리렌더링되는 컴포넌트가 style을 함께 같이 읽어 들여서 새로 적용시키기 때문이다. 따라서, styled-component를 이용하지 않고 일바적으로 폰트를 적용할 때처럼 CDN으로 스타일을 적용시키면 된다..

{screenWidth > 769 && dragging && ( Drop Files Here )} React 컴포넌트에서 드래그 이벤트를 처리 dragging은 드래그 동작이 현재 진행 중인지를 나타내는 state 드래그가 아닐 때에는 false, 드래그 중일때는 true가 되어 드롭 영역이 나타나도록 한다. const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setDragging(true); }; => 드래그 이벤트는 e.preventDefault(); 로 기본 동작을 막아주도록 한다. handleDragOver 페이지에서 드래그 중일 때 드롭영역이 나타나게 함 handleDragEnd 드래그 동작을 끝냈을 때 드롭영역이 사라지게 ..

스프레드 연산자 (...)를 이용해서 배열이나 객체를 깊은복사 하고는 한다. const originArray = [1,2,3] const copiedArray = [...originArray] 이렇게 스프레드 연산자를 이용하면 copiedArray는 originArray와 똑같이 생겼지만 originArray를 참조하지 않는다. 하지만 2차원 이상의 경우에는 내용을 얕은복사하게 된다. const totalTimezoneData = [...graph[0]]; for (let i = 1; i