이번 주차의 과제는 웹소켓을 사용하여 리얼타임 러닝 게임을 만드는 것이었다. 다른 주차의 과제와는 다르게 지급된 강의를 보며 뼈대를 만들고, 뼈대에서 추가하는 것이 과제였다.
약 10일 이상의 과제 기간이 있었기에, 저번 개인 과제에서 벼락치기로 수명을 갉아먹었기에 이번 만큼은 꼭 여유롭게 하기로 다짐했었다.
인간은 망각의 동물이던가...
돌이켜 생각해보면 미루기 위해 농땡이를 부리진 않았으나(과제 주간에 꽂혀 있는 관심사가 있어서 여기에 할애한 듯 하다), 어느샌가 과제 제출까지 2일이 남은 상황...
이번에도 벼락치기로 진행했으나, 저번과 달리 웹소켓은 벼락치기로 해결될 문제가 아니었다. 우선 강의 내용을 따라 진행하였으나, 그것은 나의 지식으로 코딩을 한 것이 아닌 따라 한 것이었기에 과제를 하려 폴더를 열자마자 당황했다.
어느 부분이 어디에 연결되어 있는지 전혀 모르겠던 것...!
우선은 주어진 과제 내용 안에서 최대한 구현해보려 노력했고, 다음에 개인과제가 또 주어진다면 꼭 미리 할 것이다!
본래 블로그 내에 사설을 길게 넣진 않으나, 이번엔 각오를 다지기 위해 사설을 추가해 본다...⭐️
게임 에셋 로딩 타이밍 문제 해결
1. 문제 상황
1.1 증상
- 게임에서
Score라는 클래스가 제대로 작동하지 않았다.gameAssets라는 중요한 데이터가null로 나와서, 스테이지 정보를 불러오지 못했다. - 해당 문제 때문에 스테이지를 구분할 수 없었다.
1.2 원인 분석
- 갖은 테스트 진행 결과,
Socket.js라는 파일에서 서버에서 데이터를 받아오는 타이밍과Score클래스를 생성하는 타이밍이 맞지 않은 것으로 보였다.
// 문제가 시작된 부분
import { gameAssets } from './Socket.js';
class Score {
constructor() {
// gameAssets가 아직 로드되지 않았을 수도 있다.
if (gameAssets?.stages?.data) {
this.stages = gameAssets.stages.data;
}
}
}2. 해결 방안
2.1 Socket.js 수정
- 데이터를 받는 즉시 콜백 함수로 처리할 수 있도록 수정했다.
- 사실 이것 저것 해보다 된 부분이라 해당 방안으로 수정이 된 것인지 얻어 걸린 것인지는 모르겠다.
socket.on('assets', (data) => {
gameAssets = data;
console.log('gameAssets: ', gameAssets);
// 데이터 로드가 끝난 후 초기화 함수 호출
if (window.onAssetsLoaded) {
window.onAssetsLoaded(gameAssets);
}
});
export { gameAssets };2.2 index.js 수정
- 데이터를 다 받은 뒤에만 게임 초기화를 하도록 콜백 함수를 추가했다.
// Socket.js에서 데이터를 받을 때 실행될 콜백
let onAssetsLoaded = null;
function initGame(assets) {
setScreen();
window.addEventListener('resize', setScreen);
if (screen.orientation) {
screen.orientation.addEventListener('change', setScreen);
}
requestAnimationFrame(gameLoop);
window.addEventListener('keyup', reset, { once: true });
}
// Socket.js에서 호출하는 콜백 함수 설정
onAssetsLoaded = (assets) => {
if (assets?.stages?.data) {
initGame(assets);
}
};
// Socket.js에 콜백 등록
window.onAssetsLoaded = onAssetsLoaded;3. 결론
- 이번 수정으로 비동기 데이터 처리를 구현하고, 게임 초기화 순서를 보장했다.
- 프로젝트를 하며 아직 비동기 데이터 처리 등... 공부해야 할 부분이 많다는 것을 느꼈다.
- 공부만이 살 길!!! + 미리미리 하자!!!
