드래그를 끝내고 드랍하는 순간 드랍 위치에 따라서 고스트 이미지가 원 위치로 돌아가는 현상이 나타난다. 이는 드랍 위치가 드랍 가능한 위치인지 아닌지를 사용자에게 시각적으로 제공하기 위한 브라우저의 기본 처리 방식이다. 드랍 가능한 위치라는 것을 나타내기 위해서는 ondragover 리스너에서 retrun false 혹은 event.preventDefault() 해줘야 한다. 또한 엘리먼트의 드래그를 통한 위치 수정을 하기 위해서는 top, left, right, bottom 속성을 사용해야 drop 위치를 인식하게 할 수 있다. transform 속성의 translate 값을 수정하여 위치를 변경하면 ondragover 이벤트 리스너가 실행되지 않는다. MDN 데모

link 요소의 rel 속성을 사용한 성능 최적화 preload 최우선 순위로 다운로드하도록 지시한다. 현재 탐색중인 페이지에 필요한 자원들에 적용할 때 사용한다. 그러므로 javascript, css, image, font 같은 자원에 사용한다. dns-prefetch dns 조회 수행을 미리 하도록 지시한다. 예를 들어 image 만을 위한 별도의 서브 도메인으로 사용중이라면 와 같이 미리 dns 확인 요청을 통해 실제로 이미지를 요청하는 시점보다 미리 dns 요청을 하게되어 보다 빠른 응답을 받을 수 있다. preconnect dns-prefetch가 dns 확인을 끝냈다면 preconnect는 TCP 핸드쉐이크(HTTPS의 경우 협상까지)를 마치도록 만든다. dns-prefetch 보다 한단계 더..

애니메이션 작업을 하고 있었다. react-spring 라이브러리를 사용했다. transition 사용시 주의해야 할 점은 map을 통해서 render 할때 transtion에서 준 속성을 통해서 그려야 한다는 점이다. 다른 속성을 넘겨줘서 그리면 의도치 않은 애니메이션 효과가 발생하게 된다. 최근에 react 개발도구에서 re-render시 화면에 깜빡이는 라인이 제거되어 릴리즈되었다. 리액트 개발자는 re-render에 너무 연연하지 말고 구축하는게 좋다는 의미에서 제거했다고 한다. 하지만 github에서 토론되는 모습을 보면 많은 개발자들이 아쉬워하고 해당 기능을 다시 포함시키길 원하는 모습이다. 프로젝트를 진행하면서 나도 개발툴에서 깜빡이는 모습을 줄이기 위해서 최적화를 많이 시도했다. 자체 컴포..

서비스 워커와 웹워커, 그리고 자바스크립트 비동기 타이머 api 의 차이를 알아보다가 다시 보게된 영상 비동기 타이머 api(setTimeout, setInterval)는 별도의 쓰레드 없이 동작한다. 하지만 메인 쓰레드에서 잠시 벗어나 멀티 쓰레드 처럼 보일 뿐 콜백 함수는 결국 메인쓰레드에서 실행된다. 자바스크립트 엔진에는 콜백 큐가 있는데 모든 web api의 콜백 함수가 실행되기 기다리는 장소이다. 다시 말해 콜백 큐는 setTimeout이나 ajax나 DOM 이벤트 같은 api들의 콜백들이 처리되기 위해서 대기하는 곳. 콜백 큐의 특징은 자바스크립트 콜 스택이 비워졌을 때 콜 스택으로 진입하다는 점이다. 콜 스택은 자바스크립트의 메인쓰레드가 처리하는 작업들을 대기시키는 장소이다. 만약 콜 스택이..

이미지 용량https://webspeedtest.cloudinary.com/ 웹 페이지 성능 테스트https://webpagetest.org/ 모바일 친화적 테스트https://search.google.com/test/mobile-friendly

리액트 개발시 문제가 없는데 product로 빌드 후 발생하는 문제 product로 빌드 했다는건 코드가 압축되고 변형되었다는 건데 컴파일된 코드 때문에 발생한 문제일 확률이 높다. 컴파일 후 발생하는 문제는 사실 디버깅하기 매우 힘들기 때문에 난감하다. 문제로 예상되는 코드들을 하나씩 제거해가며 범위를 좁히거나 다른식으로 변형에서 사용하는 방식으로 찾아내곤 하는데.. 어쨌든 나의 상황은 export const ChartRoutes = props => ( ... ) export 해준 위의 ChartRoutes 함수가 사용하는 곳에서 정의되어 있지 않은 상태로 인식하고 있었다. 변수가 아닌 function 으로 정의해주니 문제가 간단히 해결되었다. 아마 hoisting과 관련된 문제로 생각된다. 문제는 해..