[CH 4 리얼 타임 과제] 트러블슈팅 - 1007

 

⛔ 애타게 JSON 파일을 불러보다

과제 초반에 주어진 스테이지 관련 코드를 보고 하드코딩을 진행한 뒤, 유지보수 및 기능 확장이 가능하도록 수정하는 작업을 반복했다. 각 스테이지 별로 아이템이 해금되고, 생성된 아이템에 따라 다른 점수를 획득하는 것이 기본 조건이기 때문에 스테이지에 대한 정보를 받아오는 것이 1차 과제였다. 

 

문제는 아이템, 스테이지, 아이템 해금 정보가 담긴 json 파일들을 import 하는 과정이 쉽지 않았다.

 import items from '../assets/item.json' with {type: "json"}

 

위와 같은 형태로 Score.js 파일에 import를 시도했으나, 게임이 먹통이 되거나 undefined 오류가 발생하기 일쑤였다. init 폴더의assets.js처럼 public 폴더에도 json 파일들을 읽는 중간 단계가 필요할까 싶어 Assets.js 파일을 생성해주었다.

 

확실히 해당 파일을 생성한 뒤로, 단순히 import된 값이라고 보이는 것이 아니라 어디까지 정상적으로 호출되고 있는지 보여 조금 더 편하게 느껴졌다. json 파일로부터 불러오는 값들이 문제가 아니었다는 사실을 깨닫게 된 건, 안타깝게도 너무 많은 시간이 지난 뒤였다.

 

index.js 파일에 대한 이해도가 떨어졌고, 프론트엔드와 백엔드가 어떻게 연결되고 있는지에 대한 이해도가 떨어졌기 때문에 더 오랜 시간을 헤메였던 것 같다. 과제를 먼저 완성한 분들의 코드와 내 코드를 한참 대조하고 나서야 스테이지에 대한 정보를 전혀 불러오고 있지 못했기 때문에 json 데이터들이 제 기능을 못하고 있었다는 것을 알 수 있었다. 

 

 

🧾 스테이지 정보를 어떻게 불러와야 하는가

Score.js 파일에서 스테이지에 따른 점수 획득 및 스테이지 레벨 변경 등의 작업이 이루어지고 있기 때문에, 해당 파일에서 스테이지 데이터에 대한 기본 세팅도 함께 진행하기로 했다. 테스트 하면서 스테이지 레벨이 보이지 않는 것이 불편했기 때문에, 현재 스테이지의 id 값과는 별도로 스테이지의 레벨을 별도의 변수로 관리하며 프론트에도 출력될 수 있도록 했다.

class Score {
  score = 0;
  HIGH_SCORE_KEY = 'highScore';
  stageChange = true;
  // 스테이지 초기 설정
  stageLevel = 0;
  currentStageId = 1000;
  targetStageId = 1001;
  scorePerSecond = 1;
  
  ..
  ...
  ..
  
  }

 

스테이지의 인덱스 값으로 아이템 해금 등의 작업도 진행해야 했기 때문에, 1000단위의 currentStageId를 바로 쓰는 것보다 0~7이라는 작은 값의 stageLevel 값이 더 사용하기 편하기도 했다. 이전에 하드코딩을 진행했던 스테이지 관련 update 함수가 다음 스테이지로 넘어가지 못하는 등, currentStageId와 targetStageId 값 등을 제대로 활용하지 못하는 문제도 스테이지 초기 설정값을 세팅하고 나서야 제대로 점검할 수 있었다.

 

각 스테이지 별 정해진 구간의 점수에 도달하게 되면, 다음 스테이지로 넘어가도록 moveStage 함수를 추가해주었다. 또한 현재 스테이지 레벨값을 itemController에서 아이템 해금을 정의하는 데에 사용해야 했기 때문에 getStageLevel 함수도 추가해주었다. 

  // 스테이지 레벨 변경
  moveStage() {
    this.stageLevel++;
    console.log(`Stage Level : ${this.stageLevel}`);
    sendEvent(11, { currentStage: this.currentStageId, targetStage: this.targetStageId });
    this.currentStageId = this.targetStageId;
    this.targetStageId++;
  }

  // 현재 스테이지 레벨 값 불러오기
  getStageLevel() {
    return this.stageLevel;
  }

 

 

 

🖨️ 드디어 정상적으로 출력되는 아이템들

    // 스테이지 정보
    const stageIndex = score.getStageLevel();

 

index.js 파일에 스테이지 정보가 담긴 stageIndex를 선언해주고 나서야, 스테이지 정보를 불러오기 위한 준비준비가 끝났다. 여기에서 선언한 값은 itemController.js에서 update 함수를 통해 불러오면 정말 스테이지 정보를 사용할 준비가 끝난 것이라고 할 수 있었다.

  update(gameSpeed, deltaTime, stageIndex) {
    if (this.nextInterval <= 0) {
      // index.js 파일에서 정의한 스테이지 정보 업데이트
      this.createItem(stageIndex);
      this.setNextItemTime();
    }

 

이렇게 업데이트 된 스테이지 정보들을 불러올 수 있게 되어서야 json에 정의된 데이터 테이블에 따라 각 스테이지 별로 아이템이 해금되고, 게임에 그려질 수 있었다.

createItem(stageIndex) {
    // 해금된 아이템의 id의 max값
    const unlockedMax = assets.item_unlock.data[stageIndex].item_id - 1;
    // 해금된 아이템들 중 랜덤
    const index = this.getRandomNumber(0, unlockedMax);
    // 랜덤 아이템 정보
    const itemInfo = this.itemImages[index];
    const x = this.canvas.width * 1.5;
    const y = this.getRandomNumber(10, this.canvas.height - itemInfo.height);

    const item = new Item(
      this.ctx,
      itemInfo.id,
      x,
      y,
      itemInfo.width,
      itemInfo.height,
      itemInfo.image,
    );

    this.items.push(item);
  }

 

 

 

아직도 웹소켓이 익숙해졌다고 하기엔 아쉬운 수준으로 과제를 마치게 되었다. Socket.io를 활용해서 실시간 채팅 프로그램을 만드는 경우가 많은 것 같은데, 틈이 날 때 도전해보면 좋을 것 같다.