팀 프로젝트 Tower Defense 트러블 슈팅

트러블(스테이지 이동 성공 및 실패 처리)

서버가 클라이언트에게서 받은 요청을 검증 작업을 하는 stage.handler를 작성하였는데, 요청맵핑정보와 핸들러 맵핑정보를 대조해보고 적절한 핸들러를 찾는데 계속 오류가 생기는 문제가 생겼습니다.

원인

이유는 간단했습니다. 바로 클라이언트에서 서버로브터 받은 스테이지 data.status 가 success인 경우 이벤트 객체를 생성해서 요청을 보내야 하는데 보내고 있지 않았습니다.

해결

// public/handlers/stage.handler.js
export const moveStageHandler = (data) => {
  if (data?.status === 'success') {
    console.log('스테이지 이동 성공:', data);
    document.dispatchEvent(new CustomEvent('StageMoved', { detail: data }));
  } else {
    console.log('스테이지 이동 실패:', data.message);
    alert(data.message); // 실패 메시지 알림
  }
};

클라이언트인 public폴더에 handlers 폴더를 만들고 그 안에 서버 파일과 같은 stage.handler.js 이름으로 파일을 생성한 다음, 위 이벤트 객체를 생성하니 해결되었습니다...

깨달은 것

이번 팀프로젝트를 통해 서버와 클라이언트의 관계에 대해 좀 더 알게되었고, 특히
이벤트 객체를 생성한 다음엔 반드시 dispatchEvent를 호출해 요소에 있는 이벤트를 실행시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응할 수 있다는 있다는 것을 알게 되었습니다.