TIL 21/11/09 canvas란...

 

❓오늘의 질문

오늘은 특별히 의문을 가지고 진행한것은 없다. 단순한 코딩의 무한 반복...
생각해보니 하나있긴하다.
canvas 조작에 심취해 react를 학습할 경우는 없었는데 이래도 되는걸까?
이에 대한 대답은 어디에 검색해서 알 수 있는게 아니겠지. 앞으로 어차피 react로 웹 앱을 구현해야하기에 그때자연스래 배울 거라고 기대한다.

---

💻개발

🍎프론트엔드

오늘은 canvas에 아주 미쳐버렸다. canvas를 통한 animation 구현으로 간단한 연필돌리기 게임을 만들기 위해서였는데 게임 로직은 아직 없지만 단순한 애니메이션은 내가 원하는 목적에 도달했다.

아주 간단한 결과물이지만 정말 생각보다 오래걸렸다. 처음이니까 봐주세요...
지금은 캡쳐라 멈춰있지만 열심히 빙글빙글 돌고 있다.
연필돌리기 복불복의 본질이라 할 수 있는 애니메이션은 완성했다는 것이다.

겪었던 문제가 되는 과정은 아래와 같다
1. renderanimation인가? 하는 함수를 통해 애니메이션을 구현해야하는데 이가 포함돨경우 잘 로딩된 이미지가 갑자기 사라졌다. 이 부분을 해결하기위해 온갖 자료를 찾다가 stack overflow에서 이미지는 한번만 로딩하면 된다는 이야기를 듣고, 실제로 내가 계속해서 onload라는 함수를 통해 로딩을 기다리게끔 구현한 부분이 상충되었다고 판단한다. 이를 삭제한 후부터 아무 문제 없이 잘 진행되었다.
2. 이미지 파일을 참조하는데 있어서 react 에 대한 이해가 부족해 시간을 많이 뺐겼다. 결국 react는 이쁜 html 을 js로 짜 index html에 쑤셔 박는거다. 그렇기에 당연히 index.html파일 위치를 기준으로 경로를 설정해야했는데 .js파일 위치를 기준으로했기에 문제가 있었고 결국 해결했다.

내일의 목표는 아래와 같다.
1. onclick을 통한 연필 돌기 시작
2. 가속도 통제 및 결과적으로 어떤 지점에 멈추기
3. 코드 정리 (객체화)

---

😃삶 + 마무리 할 말

리세마라는 하지말자. 리세계 구매가 답이다...