코딩 기록 8_약 3일간의 코딩 기록 몰아적기 1

일단 … 매일 매일 공부하고 포스팅 하기로 나 자신과 약속 했었는데,,, 이렇게나 밀려버린 것에 대해 반성합니다. 왜 이렇게 되었느냐면, (변명중입니다.) 일단 수요일에 야근을 했는데, 퇴근이 9시였고, 불쌍한 이 중생은 대학을 왕복 3시간 통학한 것도 모자라 회사는 학교보다 더 멀어서 집에서 회사까지 평균적으로 왕복 약 4시간 정도가 걸린다. 여하간에 파워 통근러가 집에 오면 11시이고 씻고 정리하고 하다보면 12시가 너무 쉽게 넘어버린다는 말씀… 수요일도 코드를 아예 안 본 건 아니고, jsbin으로 살짝 연습하면서 MDN 공식 자료를 읽긴 했는데, 그걸로 포스팅을 할 수는 없었고, 그래서 그냥 포스팅을 포기하고 내 건강을 택해 잠을 잤습니다…

목요일부터는 다시 코드를 열심히 짜긴 했는데, 요즘 canvas에 푹 빠져 재밌는 것들을 만들고 있는데, 이 날도 역시 유튜브에서 작은 원을 여러 개 생성한 뒤 마우스 포인터를 가져가면 원이 커졌다 다시 포인터를 옮기면 원이 작아지는 영상을 보고 클론 코딩을 해야겠다고 생각해서 11월 2일에 만든 js 파일에 이어서 코드를 작성했다.

이제부터 약 3일간의 클론 코딩을 하면서 여러 난관에 부딪히면서 배웠던 점을 하나하나 복습 차원에서 적어보도록 하겠다.
첫 번째 난관 - 캔버스 사이즈 무슨 일이야... 일단 난 요즘 여러 canvas 관련 영상을 보는데, 그 디자이너 김종민 씨의 유튜브도 재밌게 보고 있다. 그 분은 canvas에 width/height를 고정값으로 주지 않으시고 css 파일에서 html,body,canvas에 100% 가변 값을 주고 js 파일에서 resize? resizeby 함수를 호출해 화면 크기를 조정하셨던 걸로 기억한다. 그래서 따라했는데, 일단 css 파일로 가변 크기를 주니까 도형 크기가 엄청 커지면서 화면 비율이 다 꺠지는 것이 아닌가....! 정말 당황해서 좀 찾아보니까 canvas는 css 파일에서 가변 너비와 높이를 주면 안된다고 함.. 만약 그렇게 가변 크기를 줄거면 무조건 resize를 해야 하는 것 같은데, 이 점을 완벽하게 이해하지는 못해서 일단 그 방법은 버리고 px 고정값을 html 파일에서 줬다. 그렇게 하니까 일단 다시 도형들이 제 크기로 맞는 마우스 포인터에 출력되는 것을 확인할 수 있었다.
두 번째 난관 - canvas 안으로 모든 도형이 출력되게 하고 싶은데 왜 저렇게 다 밖으로 나가서 그려지는 건지 알려주세요... 는 일단 내가 계산을 잘못한 거였다. Math.random() * innerWidth + radius 이렇게 초기에 값을 줬었는데, innerWidth를 random 함수 범위에 넣었던 것이 가장 큰 패인이었다. 나는 너무나 (뇌가) 순수하게 window.innerWidth가 canvas의 크기와 같을 거라고 생각했는데, 초기에 canvas.width = window.innerwidth(height도 마찬가지)를 해주지 않으면 canvas.width와 window.innerWidth와 innerWidth가 다 다른 값으로 콘솔에 출력되는 것을 확인할 수 있었다. 해당 코드를 추가해주니 window.canvas와 canvas의 너비와 높이가 드디어 동일해지면서 내가 원하는 대로 세팅되었다..! 그리고 초기 x,y 좌표를 Math.floor(Math.random() * (windowd.innerWidth - 3 * radius))+radius로 수정해서 초기 원의 위치를 캔버스 범위 안으로 드디어 안착시켰다. 그리고 뻗었다.

이 다음 마우스 포인터를 올리면 원이 커져야 하는데 여기서도 또 난관에 부딪혔지만 모든 걸 극복했다….. 일단 class function 안에 addeventListener 쓰면 안되고, get 함수 호출할 때는 ()없이 그냥 함수 이름만 적는다던가… 이번에 코드 짜면서 진짜 오류도 많이 내고 그만큼 또 많이 배운 것 같다… 드디어 완성은 했는데, 세세한 코드 리뷰와 gif는 다음 기록에서 보는 것으로…아듀.