Object.assign 의 위험성. 다음 object in object 복제는 안된다는.. 일명 shallow Copy 와 Deep Copy Shallow Copy 를 피하려고 Object.assign 을 사용하였으나 이중적인 object in object 구조시 shallow copy 가 되어버린.. 일반적인 방식은 다음과 같다.let obj = { a: 1, b: 2, }; let objCopy = Object.assign({}, obj);console.log(objCopy); // result - { a: 1, b: 2 } objCopy.b = 80; console.log(objCopy); // result - { a: 1, b: 80 } console.log(obj); // result - { ..

SVG를 이용한 Timer 를 간단히 만들어 봄시간은 10초 /// html ------------------------------------------------------------------------------------------------------------------------------------------------ ///css .progress-ring__circle2 { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dashoffset: 0%; stroke-dasharray: 51; animation: dash2 10s linear infinite;} @keyframes dash2 { from { stroke-dashof..

eval({함수명}).bind({파라미터1},{파라미터2}); 형식으로 호출 !! 두둥!!function 함수를 따로 만들어서 안에서 다시 호출 하려고 하니 간단하지 않고 복잡해 보여서 이것저것 해보다!!

setInterval vs requestAnimationFrame 30 Frame으로 제어할 경우 테스트 중에 오류가 있었음을 .. 흠.. 11 위와 같은 코드를 만들고 수행 하였을 경우 setInterval 부분은 속도가 빨라지는 경우가 보여진다. 실제 30frame === 1s 로는 requestAnimationFrame 사용하는게 맞다.. 그러나 두둥.. 문제 점에니메이션을 만드로 두개를 수행 할 경우 Active 된 브라우져에서는 제대로 작동 하지만. Active 아닐 경우는 Setinterval는 안보이는 곳에서도 동작을 하고 requestAnimationFrame 경우는 동작하지 않는 모습을 볼수 있다. 과연 어느것을 사용해야하는 것인가.?

EVENT 관련 조사중 event.dataTransfer.effectAllowed 에 대한 문제점.. 위값이 이 에빈트에 대한 allow 를 제시 drop이벤트시 위 이벤트 값을 체크하여 처리하므로 해당 값에 대한 부분 확인하여 처리해야함 만약 이 이벤트는 move 이면 처리하는 곳 drop에 move 허용이 없으면 drop 이벤트가 활성화 되지 않는다. -> allowed 허용 통과 하였을 경우 마우스에 대한 drop effect 효과를 넣을 수 있다. e.dataTransfer.dropEffect = 'copy'; 이렇게 하는경우 copy 모양의 cursor 가 나오는것을 볼 수 있다.

WINDOW 버전이 올라가면서DISPLAY에 대한 해상도를 조절 할수 있다. 기본이 100% -> 125% 로 해서 사용할경우 기본 브라우져에 대한 mouse Event 처리시 layerXY에 대한 값이 잘못 나오는 경우가 있다.layerXY 값을 offsetXY 로 변경 처리해야한다.