1차로 4~5일간 만든 Ghost Defense 게임.
누군가에게 보여줄 수 있을 만큼 제대로 완성도 있게 마무리한 게임은 이번이 처음이다.
그만큼 한 번 완성한 것에서 그치지 않고 한 번 더 코드를 뜯어보고, 단순한 기능 구현이 아닌 코드 자체에 대한 고민을 조금 더 깊이있게 하는 시간을 꼭 가지고 싶었다.
💎 Refactoring - point
1. bullet class를 따로 생성해 hero class와 분리하자.
hero의 동작으로 인해 bullet이 작동했기 때문에 hero안에 포함시켜놓았는데, hero와 bullet의 상호작용으로 동작이 일어나기 때문에 각각의 클래스를 지니는 것이 더 자연스러울 수 있기 때문
2. ghost class를 활용해 인스턴스를 독립적으로 구성하자.
지금까지는 Ghost class 내부에서 여러개의 ghost를 만들었다.
init.js에서 ghost 인스턴스를 만든 뒤 createRandomGhost()를 호출해 한 인스턴스 내에서 ghost를 모두 만들어냈다.
이렇게 하니 명확한 단점이 있었는데, 유령이 생성된 이후 필요할 때마다 함수 안에서 querySelector를 이용해 ghost 요소를 찾아 사용해야 했다.
ghost class를 활용해 여러 개의 ghost 인스턴스를 찍어내고, 각각의 인스턴스가 독립적으로 움직이도록 구성해보면 어떨까? 인스턴스들을 배열에 담아놓고 사용해 매번 찾을 필요가 없도록 만드는 것이 더 좋은 방법일 것 같다.
3. RAF 로 브라우저 성능 향상시키기
속성별로 브라우저의 reflow, repaint를 일으키는 정도가 다르다.
지금은 일일히 transform을 사용하고 있는데, rAF(request animation frame)를 사용해 브라우저 성능을 향상시켜보자.
4. async, await을 제대로 썼나? 고쳐보자.
Promise를 리턴하지 않는 값에 대해 await을 쓰고 있었다.
사실은 이 promise에 대해, async와 await에 대해 정확하게 알고 있지 않고 사용하고 있다는 생각을 했었기 때문에, 이 기회에 더 파헤쳐보고, 작성했던 코드를 올바르게 고쳐보자.
