Dev log
canvas의 크기를 반응형으로 만들기 위해서 선택자를 찾았다. 우리는 지금 next.js로 페이지를 만들고 있고 sass를 사용하고 있다. next.js를 사용하면서 페이지에 대한 속도를 기대하고 만들었으나 생각보다 빠른 구현을 만들기 어려웠다. canvas Element를 만들어서 div에 append를 하여 만들어서 canvas에 그리고 있다. canvas의 크기를 반응형으로 만들기 위해서는 canvas의 width, height를 특정 엘리먼트의 크기에 맞추면 그 크기에 맞게 canvas의 크기가 변하게 될 것이다. 여기까지는 알게 되었다. 우리의 프로젝트가 sass로 css를 구현을 하다보니 class는 sass의 설정으로 고유화되어서 다른 페이지에서 같은 class 이름을 사용해도 전역에 설정하지 않은 이상은 속성이 중복부여가 되지 않는 장점이 있다. 그런데 그 class 선택자를 script에서 가져오려고 할때는 querySelector로 가져오려고 할때는 sass의 고유설정으로 인해 가져올 수가 없었다. 그래서 개발자 도구로 확인하여 해당 고유번호가 부여된 class를 querySelector로 가져오니 효과가 적용되는 것을 볼 수 있었다. 그런데 이렇게 고유의 이름을 부여하는 sass의 이름을 가져다가 사용하는 것은 생각해보면 이상한 과정이 된다. 그럴거면 sass의 장점을 거스르는 일을 하는 것이기 때문이다.
sass에서의 id 선택자를 전역으로 위치해서 사용하는 방법을 찾아보거나, 해당 canvas의 부모 엘리먼트를 찾는 방법을 더 찾아보기로 했다.
회의를 하면서 내가 어려움을 겪는 문제를 팀원들과 함께 나눴다. 프로젝트에 관한 무슨 고민을 하고 있는지 그리고 어떤 상태에 있는지를 팀원들과 공유하는게 필요해보였다. 도움을 구하고 싶기도 했다. 프로젝트에서 어려운점을 나누고 말을 듣다보니 좀 한결 나아졌다. 내일은 조금 재충전의 시간을 가지고 더 열심히 할 수 있게 준비해야겠다.
