토이 프로젝트 만들다 생긴 오늘의 이슈

지금 html, css, 순수 js를 이용해서 인터렉션 효과를 가진 컬러피커 작품을 만지고 있는데 작품을 반 정도 만든 상태에서 문제가 하나 발생했다.

캔버스 누구냐 넌.

캔버스. 누구냐 넌.

캔버스는 처음 사용해보는 거라 어디에 쓰는지 당최 알 수 없었다. ( 나 정말 프론트 개발자 목표로 삼고있는건 맞냐;; )

캔버스는 어디에 사용되는 걸까?

검색을 해보니 웹 그림판, 차트, 비디오 삽입 등등 많은 곳에서 사용되고있다.
내가 구현하려는 색깔 코드를 집어주는 기능 또한 캔버스를 이용해야 가능하다. 그래서 캔버스를 이용해서 구현하려고 사용했지만,
캔버스 객체 내부의 자바스크립트를 잘 이해하지 못하고 무작정 시도한 탓에 삽질을 오랫동안했다.

지금은 해결해서 다행이긴하지만, 해결 한 뒤의 코드를 보면 엄청 적다. 결국 사용법을 제대로 인지하지 못한 채 사용한 이유 때문에 진입한 벽이 너무 높아 보였던거같다.

이슈는 다음과 같다. 캔버스 내부의 색깔을 클릭하면 해당 rgb 코드를 읽어 와야하는데 못 읽어 왔던 것이다.
분명히 캔버스는 눈에 보이고, width와 height값도 css에서 설정했지만 어쩐지 읽지 못하는 것이다!

그래서 천천히 mdn을 다시 읽기 시작했고, 다른 사람들의 코드를 보며 어떻게 사용했는지도 코드 해석도했다.

결과로 이슈가 난 이유는 다음과 같다.
캔버스를 생성할 때 css로 width 100%이런 식으로 설정이 아닌 html내부에서 canvas 태그 내부 속성으로 넣어줘야하는데 그것을 모른채 색을 뽑아내려하니 캔버스자체에서 거부했던 것이다.

이렇게 적어놓으니 캔버스는 당연히 자신의 캔버스 크기가 명시되어있지 않으니 색 값을 안 준것이다.

이 후 자바스크립트 단에서 캔버스의 width값을 조정하여 잘 해결하였다.
프론트엔드 개발자를 목표를 삼으며 현재까지 공부했지만 이번 일로 인해 이때까지 공부했던것이 모두 애매하게만 끝낸 거 같아 내 자신이 안타깝다.
이참에 js공부하면서 모르는 태그들에 대해서 한번 공부해보는 시간을 절실히 느낀다.

css는 덤으로 js를 구현 하지않고도, 자체적으로 구현 가능한 기능들에 대해서 알아보아야겠다.