canvas에 mouse drawing 작업을 완성하기 위해 걸린 삽질 정리

5일간의 삽질여정

-> vue boostrap modal의 canvas에 마우스로 drawing 을 하려함. (초기)
-> 잘 안됨, canvas에 mouse drawing이 전혀 안그려졌음(이걸로 이틀정도 삽질함)
-> 방법을 계속 찾다가 vue로 simple하게 mouse로 drawing 해주는 플젝과 참고했던 프로젝트를 비교하면서 canvas의 width, height 지정해주는 부분이 문제가 있다는 것을 발견
(parentElement.clientWidth/Height 로 canvas의 값을 동적으로 잡아주는 건데 modal 에서 하려니 계속 0으로 뜸)
https://codepen.io/getflourish/pen/EyqxYE

-> 이를 hard하게 값을 넣어주니 잘 됬음
-> 당연히 화면크기나 해상도에 따라서 그려지기도 하고(초점과 동떨어진 곳에) 안그려지기도 하는 문제가 발생
-> 여러 검색을 통해 canvas의 크기를 hard하게 잡아도 여러 해상도에는 동적으로 맞춰진다는 한 answer을 봤지만 수많은 검색결과 중 하나라서 크게 신뢰안하기로 함.
-> 효범이형한테 물어보게 됬고 화면 크기가 바뀔 때 마다 되기도 하고 안되기도 한다고 하니 resize 이벤트에 매번 canvas 사이즈를 잡아주면 될 거라고 조언해줌
-> 조언대로 resize 이벤트에 크기를 잡아주었고 그 결과 잘 됨!
다만 resize 이벤트가 윈도우 사이즈가 매번 바뀔때마다 호출이 되는게 컴퓨터에 과부하를 줄 수 있으므로
이를 끊어주는 방법이 동시에 요구된다는 것을 알게됨

-> debounce, throttle 등의 방법이 있고 debounce를 적용해봤지만 clearTimeOut 에서 't.close() is not a function' 란 오류에 계속 직면하여 해결을 못함
http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

-> 그 와중에 resize 이벤트를 v-on:resize 같이 등록해줄 수 있냐는 issue를 검색하면서 발견하게 되고
그 안에서 resize 이벤트를 window.removeEventLisner로 지워주는 방법을 알게 됨, 이를 적용함 (최근)
https://github.com/vuejs/vue/issues/1915#issuecomment-280014651

-> side effect 가 생길지 장담은 안되지만 적어도 resize event가 필요한 시점과 필요하지 않은 시점에 각각 등록/해제는 해주기때문에
동작 상의 문제는 없어보이고 성능 상의 문제가 염려가 된다.