트러블 슈팅 모음

트러블1

- 하고싶은것

• leng = stagesLength;를 받아서 사용(다른 파일에서 쓰기위해)
• 즉 js파일을 로드해서 leng에 값을 넣고싶음

- 발생한 문제

• 크기 비교 시 leng이 더 커야될 상황에서도 작은값으로 나옴

- 문제 발생 이유

• console.log()로 찍어본 결과 leng값이 undefind
• loadStage에서 파일이 로드되기전에 leng = stagesLength를 먼저 실행

- 1차 해결

• constructor에서 async awiat을 걸려고했으나 불가능하다는걸 알게됨
• 외부 함수에서 async awiat을 걸고 그 함수를 constructor에 가져옴

let stages;
let stagesLength;
async function loadStage() {
  const response = await fetch('/assets/stage.json');
  stages = await response.json();
  stagesLength = stages.data.length - 1;
}

class Score {
  score = 0;
  HIGH_SCORE_KEY = 'highScore';
  stageChange = false;
  num = 0;
  leng = 0;
  constructor(ctx, scaleRatio) {
    this.ctx = ctx;
    this.canvas = ctx.canvas;
    this.scaleRatio = scaleRatio;
    this.waitStage();
  }

  async waitStage() {
    await loadStage();
    this.leng = stagesLength;
  }
}

- 2차 해결

• 위의 것으로 해결은 하였으나 다른분들과 코드리뷰 하다가 배움을 얻음
• js파일을 그냥 import가 가능

import unlockInfo from '../assets/item_unlock.json' with { type: 'json' };

• 전에 튜터님께 물어보고 들은 대답이 "그냥 가지고오면 되는거 아닌가요?" 라고 하셨는데 그말의 의미를 알게됨

---

트러블2

- 발생한 문제

• 유저가 users배열에(uuid를 발급받고 서버에 로그인) 들어오나 F5, 끄기 등등 나가보아도 여전히 배열에 남아있음

- 문제 발생 이유

• console.log()결과 socket.on('disconnect')에서 오류가 발생
• socket.on('disconnect', (socket) => {})으로 되어있었는데 socket이 undefined가 됨

- 해결

• socket.on('disconnect', () => {})이건 기본적으로 인자를 전달받지 않음
• 그동안 정상 작동 했던이유는 단지 코드가 단순해서 스코프가 인자를 받은 socket이 아닌 상위에 스코프해서 운이 좋게 정상작동 했던 것.
• 단순하게 socket을 지움으로 스코프를 정상화

      socket.on('disconnect', () => {
        handleDisconnect(socket, userUUID);
      });

---

트러블(?)3

- 하고싶은 것

• 모든 유저의 highscore 최고값을 다른 유저들에게 보이고 싶음
• 모든 유저 중 최고 높은 값을 레디스에 넣은뒤 그걸 다른 유저들에게 뿌리고싶음
• 클라이언트의 localstorage에 접근

- 발생한 문제

• 서버에서는 클라이언트 localstorage에 마음대로 접속할 수 없음
• 현재 개인과제 특성 상 접근 방법은 soket.io

- 해결

• 서버에서 미리 값을 가져오고 그 값을 던져줌

import redisClient from '../redisClient.js';

export const totalHighScoreSet = async (socket) => {
  try {
    console.log('레디스에서 totalHighScore 불러오는중');
    const totalHighScore = await redisClient.get('totalHighScore');
    //클라이언트에게 던지기
    socket.emit('highScoreSet', { totalHighScore });
    console.log('레디스에서 totalHighScore 불러오기 완료');
  } catch (err) {
    console.error('highscoreset불러오기중 오류: ', err);
  }
};

• 클라이언트는 그 값을 받아 localstorage에 저장

socket.on('highScoreSet', ({ totalHighScore }) => {
  if (totalHighScore === null) {
    totalHighScore = 0;
  }
  localStorage.setItem('totalHighScore', totalHighScore);
  console.log('totalHighScore 세팅 환료');
});

• 클라이언트의 js와 서버의 js를 구분하지 못하고 있었다는걸 깨닫게됨
• 그동안 html을 작성해서 정상작동 한건 다행히 걸린게 없던 것 뿐