본문 바로가기

[CANVAS - 체스] 8. 리팩토링 중 1. 체스판의 각 square와 piece를 나타내는 데이터 형태를 만들면서 하다보니 손가는대로 구현했었는데, 이 부분을 다시 수정했다. 일단 1차 리팩토링은 여기까지만 하고 체스말이 가는 위치 기능을 추가해야겠다. 이번에 작업하면서 여실히 느꼈는데 요즘은 대부분 회사 프로젝트가 ts로 되어있어서 크게 못느꼈는데 다음부터는 무조건 ts로 작업을 시작해야겠다. 작은것 하나씩 불쑥불쑥 불편한게 많다.. 더보기
[CANVAS - 체스] 7. 리팩토링 시작 master에서 리팩토링 브랜치를 따서 리팩토링 하려고 한다. 일단 매번 호출하는 체스보드 그리는 함수를 별개의 파일로 분리하는 것부터 시작. 궁금한건 canvas는 테스트를 어떻게 하는건가.. 싶다. https://www.valentinog.com/blog/canvas/ Testing an HTML canvas with Cypress How to test an HTML canvas? Let's see an example of visual regression testing with Cypress. www.valentinog.com 여기서는 cypress를 이용한 시각적 회귀 테스트를 하고있다. 일단 테스트는 도입하지 않았고 현재 index 파일에만 잔뜩 있는 파일을 분리하는 것부터 시작했다. https:.. 더보기
[CANVAS - 체스] 6. 사운드 입히기 말 선택시 효과도 주었으니 선택 or 이동 시 효과음을 주고 싶다. 해당 관련 작업을 거의 안하다보니 태그를 뭘써야 하는지 기억도 안난다. 아래의 사운드를 구하고 넣어줘보자. 1. 말 선택시 효과음 2. 말 이동 or 말 잡기 효과음 (동일해도 되나 살짝 높낮이를 달리해서 적용하고 싶음) new Audio 객체를 이용해서 넣어주기로 한다. 근데 말 선택시 내 생각보다 약간 딜레이가 있어서 찾고있다. 효과음 찾는게 엄청 일이네.. 일단 가벼운 클릭소리로 대체하고 다음으로 넘어간다. 더보기