내일배움캠프 8주차 목요일 TIL

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

function solution(s) {
// 짝수인경우 가운데 2글자
// 홀수인경우 가운데 1글자
if (s.length%2===0) {
return s.substr(s.length/2-1, 2 )
} else {
return s.charAt(Math.floor(s.length/2))
}
}

str.substr( start, length )

substr( ) 의 가장 큰 차이점은 두번째 인자가 끝점의 Index가 아니라 '시작점부터 출력할 문자열의 길이' 라는 점이다.

String.charAt(Index)는 문자열에서 Index에 해당하는 문자 1개를 리턴합니다. 따라서, 특정 Index의 문자를 가져올 수 있습니다. 리턴되는 객체의 타입은 string입니다.


프로젝트 진행

게임에서 item을 획득했을 때, 스테이지별 unlock된 아이템인지 확인하기 위해 클라이언트 측에서 currentStage 정보도 서버에 보낼 수 있도록 수정하였다.

  getItem(itemId) {
    console.log(itemId);
    const newItemId = String(itemId);
    switch (newItemId) {
      case '1':
        this.score += 10;
        break;
      case '2':
        this.score += 20;
        break;
      case '3':
        this.score += 30;
        break;
      case '4':
        this.score += 40;
        break;
      default:
        console.log('알 수 없는 아이템입니다.');
    }						
    sendEvent(4, { itemId: newItemId, currentStage: this.currentStage - 1 });
  }

sendEvent(4, { itemId: newItemId, currentStage: this.currentStage - 1 }); 에서 1을 빼준 이유는, 이상하게 현재 플레이 중인 스테이지id가 1000일때, 서버에는 1001이 전달되어서 임시로 수정하였다.

이후 핸들러 id가 4인 getItem 함수에 unlock 검증 부분도 추가하였다.

export const getItem = (uuid, payload) => {
  const { items, itemUnlocks } = getGameAssets();
  const itemId = payload.itemId;
  const currentStage = payload.currentStage;

  console.log(`현재 스테이지${currentStage} `);
  console.log(`획득 아이템 id: ${itemId}`);
  try {
....
    // 현재 스테이지에서 해제된 아이템인지 검증
    const unlockData = itemUnlocks.data.find((data) => data.stage_id === currentStage);
    if (!unlockData) {
      return { status: 'error', message: 'Invalid stage' };
    }

    // 해제된 아이템 목록에 itemId가 포함되어 있는지 확인
    if (!unlockData.item_id.includes(itemId)) {
      return {
        status: 'error',
         message: `${currentStage} 스테이지에서 획득할 수 있는 아이템이 아닙니다. ITEMID: ${itemId} `,
      };
    }
....

근데 클라이언트 콘솔에서 오류가 확인되었다

1번 아이템을 왜 첫 스테이지에서 못먹으면 어디서먹니

검증에 문제가 있는거 같아 이럴때 흔한 오류인 타입불일치인지 확인해보았다.
서버에서 받는 itemID 의 타입은 string, 에셋 내 item_id의 타입은 number 였다.

console.log(typeof itemId);  // string
console.log(typeof unlockData.item_id[0]);  // number

>>
함수 시작부분에서 클라이언트가 전달한 payload에 itemID가 있다.
String 타입인 itemId를 Number()를 통해 number 타입으로 변경하니 검증 단계를 통과하였다.

export const getItem = (uuid, payload) => {
  const { items, itemUnlocks } = getGameAssets();
  const itemId = Number(payload.itemId);
  const currentStage = payload.currentStage;
...

 

이제야 성공 처리 부분이 출력되는 답답한 친구

근데 이후 클라이언트 측 getItem 메서드에 const newItemId = String(itemId);로 내가 추가한 부분때문에 string 형태로 서버에 전달되는 것을 알았다.(답답한 친구가 나였다)

switch 문에서 case '1' 이런식으로 아무 생각없이 작성했다가 안되길래 itemId를 스트링으로 바꾸었나보다..

이후 switch 문에서 case 1 이런식으로 number 타입을 받게 하고, 굳이 string 타입으로 변환, number 타입으로 변환하는 과정을 클라이언트 측과 서버 측 코드에서 지웠다. (잘 진행된다.)

지금 돌아보니 switch 문을 작성할때 습관적으로 따옴표를 추가한다는 문제점을 발견했다. 아마 타입은 신경 안쓰고 공식처럼 사용한것 같다.