Dev log
오늘도 canvas의 반응형을 구현하는데 문제를 만났다. canvas를 append 했떤 div 엘리먼트의 크기에 맞춰서 width, height를 주려고 했지만 그 값을 가져오는데 실패했었다. css가 적용되지 않았다. 그런데 그 이유를 알게 되었다. 알고보니 다른 파일에서도 같은 이름의 id를 사용하고 있었고 전역에서 관리하는 id의 경우 여러 값을 가지게 되기 때문에 제대로 작동하지 않았던 것이다. 그래서 각 컴포넌트마다 id를 다르게 지정하고 다시 값을 해당 엘리먼트의 clientWidth, clientHeight를 받아와서 크기를 설정했다. 그런데 이 값을 받아온 것은 그 크기대로 canvas의 width, height를 조절하기 위해서다. 그 값을 받아서 canvas의 크기를 조절했더니 반응대로 움직이는 모습을 볼 수 있었다. 그런데 그 상태에서 다른 컴포넌트로 이동하려는데 누르면 아무 반응이 없고 모든 버튼이 작동하지 않았다. 그러더니 결국 페이지가 응답없음 상태가 되었다. 문제가 있는 것이다. clientWidth, clientHeight를 받지 않고 해당 엘리먼트의 getBoundingClientRect()값을 받아서 width, height를 받아오려고 했지만 그 것도 작동은 했으나 페이지 이동이 전과 같이 되지 않았다. 엘리먼트의 크기를 받아서 랜더링 해주는 구간에서 문제가 있어보였다. 그래서 setInterval()의 문제인가 싶어서 requestAnimationFrame()을 사용해보기도 했지만 소용이 없었다. 그러다가 windows.innerWidth를 알게 되었고 전역있는 메소드이기 때문에 언제든 사용할 수 있어서 windows.innerWidth를 이용해서 브라우저의 크기를 조건으로 해서 canvas의 크기를 지정해줬다. 그러게 작동시켜보니 구간마다 제대로 반응했고 다른 컴포넌트나 페이지의 연결에도 이상이 없었다. 이 차이가 어떤 차이가 발생해서 이전 방법은 안되는지는 정확히 알수는 없었지만 단지 이미 값을 받아와서 계산하는 짧은 시간의 반복이 병목현상이 생기지 않았을까 싶기도 했다. windows는 전역에서 관리되어서 괜찮은것은 아닐까 싶은 생각이 들긴 했으나 계산을 하는 것은 비슷한것 같아서 의문이 아직 남아있다. 더 찾아봐야겠다. 그래도 구현이 되는 것 같아서 기분이 좋다. 내일 팀원들과 같이 나눠봐야겠다.
