며칠째 canvas를 보고 있다. 새롭게 구성해보려고 하다보니 알아야할 것들이 많았고 html, css, javascript 모두 잘 사용할 줄 알아야 더 자유롭게 사용할 수 있었다. 오늘은 requestAnimationFrame(콜백함수); 를 알아보았다. 이전에는 setInterval(콜백함수, 시간); 이렇게 사용했었다. 지금도 사용하고 있지만 requestAnimationFrame은 조금더 setInterval 보다 최적화가 된 부분이 있다. 이전에는 무조건 계속 함수를 호출했지만 requestAnimationFrame은 준비가 되었을때 함수를 호출하기 때문에 기존보다 에러 발생이 더 적어지게 된다. 하지만 지금 사용하려는 프로젝트에는 request를 사용할 수는 없을 것 같다. 아직 잘 적용시키지 못한 부분이 있는지 더 알아봐야겠지만 상호작용이 되는 부분이 request는 작동하지 않는 모습을 보였다. setInterval은 실행이 되어서 조금 더 테스트 해봐야겠다. canvas는 사각형을 하나 그려도 중심으로부터 그려지는 것이 아니라 왼쪽 위의 자표로부터 그려지게 된다. 가운데로 그리고 싶다면 transfrom을 사용해서 위치를 이동해서 조정을 해야한다. 이런 부분이 css 보다 불편한 점이 많았다. 하나하나 세밀하게 조정해야 하는 단점이 있지만 그로인해 canvas에서만 가능한 작업들이 있어서 그 점이 장점이 되기도 한다. 픽셀을 javascript로 조정할 수 있기 때문에 화려한 움직임을 구현해낼 수 있다. 새로운 공부는 항상 어려운것 같다. 포기하지 말고 못하더라도 도움이 못된다고 생각이 들어도 그래도 공부해야 하고 뭐라도 해야 한다. 할 수 있는것을 하자.