(TIL) 2024-12-30

트러블 슈팅

---

배경

각 기능을 구현 한 뒤에 병합 후 테스트 하는 과정에서 일반 타워를 생성하고 해당 타워를 승급을 한 후에 신규 타워를 생성하게 되면, 신규 타워의 능력치가 초기 능력치가 아닌 이전 업그레이드 타워의 능력치로 생성되는 오류가 확인되었다.

원인 / 분석

// [1] 데이터 Asset 정보를 조회 하고
const { pawnTowers, specialTowers } = getGameAssets();
// ... 중략

// [2] 생성 조건에 맞는 Asset 정보를 towerInfo 담고
towerInfo = pawnTowers.data.find((tower) => tower.color === color);
// ... 중략

console.log(towerInfo);

// [3] 타워 생성 정보를 저장
setTower(
  // ... 기타 변수 생략
  towerInfo
);

타워를 생성 처리 하는 핸들러에서 타워 데이터 부분의 변수 towerInfo의 값을 확인하기 위해 주석 [2]번과 [3]번 사이에 로그를 찍고 타워 승급 후 생성을 해보았더니 아래 그림 처럼 타워 초기 값이 아닌 승급된 능력치로 처리되는 것을 확인 할 수 있어서 문제의 원인은 저정된 정보가 메모리 주소에 관련이 있을거라고 유추할 수 있었다.

결과

// [1] 데이터 Asset 정보를 조회 하고
const { pawnTowers, specialTowers } = getGameAssets();
// ... 중략

// [2] 생성 조건에 맞는 Asset 정보를 towerInfo 담고
towerInfo = pawnTowers.data.find((tower) => tower.color === color);
// ... 중략

// [3] 타워 생성 정보를 저장
setTower(
  // ... 기타 변수 생략
  Object.assign({}, towerInfo)
);

해결 방벙으로는 매개변수로 towerInfo 가 아닌 Object.assign({}, towerInfo) 로 towerInfo의 객체를 복사 하여 새로운 메모리 주소 값으로 처리되게 수정하였더니 오류를 해결할 수 있었다.
주석 [2]번에서 towerInfo 변수에 저장된 정보는 주석 [1]번에 pawnTowers가 저장되어 있는 주소 값 (예 'A') 를 참조 하게 된다. 그리고 생성 정보를 저장할 때도 towerInfo를 넘겨주기에 주소 값 ‘A’를 참조하게 된다. 그리고 타워를 승급을 할 때 towerInfo 의 정보를 수정 하기에 ‘A’ 주소안에 값들이 변경이 되었고 새로 타워를 생성하게 되면 주석 [1]번에서 주소 ‘A’의 정보를 다시 불러왔던 것이다.
생성 정보를 저장할 때 Object.assign() 로 복사처리 하게되면 주소 ‘A’의 저장된 정보들을 새로운 주소 로 저장하여 참조하기에 위와 같은 연결관계가 유지되지 않는 것이다.

메모리 주소 에 대해서 알고 있어서 해결하는데 오랜 시간이 걸리지 않았지만 코딩하는 과정에서 디테일하게 생각하지 못했다는게 본인의 부족함을 느끼는 기회였다.
앞으로는 코딩 과정에서 좀더 인지하면서 코딩해야 할 필요가 있다고 생각하게 되었다.