[HandTris] #3. TypeError: Cannot read properties of undefined - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

2024.06.21 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

[HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

socket의 url을 가져올 수 없다.

soccket 변수에 담겨 있는 url 속성을 가져와 sessionId를 parsing 하고자 하던 중 만났던 에러 중 예외처리를 해주지 않아 발생한 에러에 대해 정리하고자 한다. 제목은 'TypeError'라고 되어 있지만 type의 문제는 아니고, 객체가 생성되기 전에 객체의 속성을 읽는 로직이 위치되어 있어 발생하는 문제로 객체 생성 전에는 이 로직을 넘어가도록 예외처리하여 해결할 수 있다.

🐛 버그를 잡기 위한 가설

1. _transport 속성에는 접근할 수 없나?

처음 이 에러를 봤을 때, stompClient 객체는 당연히 정의되어 있다고 생각했기 때문에 '_transport'라는 속성명 앞에 언더바가 붙어 접근 불가능한 것인지 의심하였다. Typescript로 테스트해 본 결과 당연히 접근이 가능하여 이 가설은 기각되었다.

 

2. undefiend는 어떤 상황에 발생하는가

정의되지 않은 것의 속성을 읽으며 발생한 에러이기 때문에 언제 정의되지 않는지 알아볼 필요가 있었다. 위 상황의 경우 'stompClient'가 생성되지 않았거나, 'stompClient.ws'이 생성되지 않았거나, 'stompClient.ws._transport'가 생성되지 않았거나, 하는 세 가지 경우가 있었다.

let socket = new SockJS('https://example.com/ws');
let stompClient = Stomp.over(socket);

위 코드와 같이 stompClient는 Stomp.over(socket);에 의해 초기화되는데 이 과정을 실패했을 수도 있겠다는 생각이 들었다. 왜냐하면 SockJS(URL); 함수로 WebSocket 연결을 실패하면 socket이 'undefiend'될 수 있었기 때문이다. 이 undefiend를 이용해 Stomp.over()를 하면 당연히 stompClient는 초기화되지 않을 것이다!

이를 해결하기 위해 조건문을 사용하여 stompClient 관련 변수들이 선언되어 있을 때만 로직이 실행되도록 수정하였다.

테트리스 게임 화면에 이상하게(?) 블럭이 생성된다.

이 에러는 앞서 만났던 에러와 유사한 에러 메시지이지만, 해결 방법이 달랐다. Cannot set properties of undefined 메시지로 객체가 undefined일 때 속성을 set 하고자 해서 발생한 에러였다. 에러를 만난 순서는 아래와 같다.

1. 블럭이 (n, n) 선을 기준으로 대칭으로 고정된다.....🤔

위 이미지와 같이 블럭이 테트리스 블럭 화면을 내려오면서 특정 시점에 (n, n) 선을 기준으로 대칭되어 저장된다. 이후 다음 블럭이 내려오고 다음 블럭이 fix 되면 또 (n, n) 선을 기준으로 대칭되어 저장된다. 이는 휴먼에러로 발생했다. 에러를 발생시킨 코드는 아래와 같다.

    Piece.prototype.fill = function (this: any, color: string) {
      for (let r = 0; r < this.activeTetromino.length; r++) {
        for (let c = 0; c < this.activeTetromino[r].length; c++) {
          if (this.activeTetromino[r][c]) {
            drawSquare(this.x + c, this.y + r, color);
            board[this.x + c][this.y + r] = color;
          }
        }
      }
    }

board 변수가 기본 "grey" color, 20X10 size로 정의되어 있는 값이다. 여기서 'this.x+c, this.y+r'이 각각 열과 행을 나타내는데 행과 열에 위치시켜서 위와 같이 대칭되어 저장되는 이슈가 발생했다. 바로 위의 drawSquare() 함수 Parameter 순서가 x부터 되어 있어 착각하고 코드를 작성한 것이다🫣.

그렇다면 이 순서를 바꿔주면 되나?!

2. undefined에 set할 수 없다!

 

분명 board는 있는데 undefined라고 하며, setting 할 수 없다고 한다. 지금은 디버깅 후라 매우 쉽게 느껴지는 해결 방법이지만 당시에는 이 에러로 끙끙 앓았다.. 결론적으로 'this.y + r'의 값이 음수가 될 수 있어서 board의 인덱스에 음수로 접근하여 undefined 되고, undefined의 'this.x + c' 인덱스에 세팅하고자 하여 문제가 발생한 것이었다.

위 Piece 객체의 'this.y'는 초기 -2로 설정되어 있다. 즉, this.y+r이 음수인 경우가 필히 발생하게 된다! 음수일 때는 아래 로직이 작동하지 않도록 할 수는 없었다. 왜냐하면 board변수가 collision을 check하는 로직과 연관되어 있어, 블럭이 꽉 차서 collision이 일어나는 상황을 board 변수가 만들어줘야 하기 때문이다. 여기서 예외처리를 해버리면 board 변수는 블럭이 꽉 차는 상황을 만들지 못한다!

3. 새로운 변수의 생성

drawSquare() 함수에서 canvas의 block을 coloring해줌에도 불구하고 board 변수를 지속 업데이트하고자 했던 의도는 이 board 객체를 STOMP로 상대방 게임화면에 전송하고자 했기 때문이다.

위와 같이 board 변수를 전송하는 로직으로 구성하면 실시간으로 떨어지는 블럭을 전송할 수 없고, 블럭이 고정된 후에야 board 변수가  업데이트되어 상대방 화면에 표시된다.

결국 새로운 변수(board_forsend)를 만들어 'undefined를 피하기 위한 예외처리 및 블럭이 떨어질 때마다 실시간 업데이트'를 할 수 있었다.

 

좌측의 코드와 같이 board_forsend를 새로 만듦으로써 우측 코드처럼 예외처리를 할 수 있게 되었다. undefined에 setting 하는 문제와 실시간으로 정보를 전달할 수 있는 기능을 동시에 구현할 수 있었다.

슛~ 골~(왕뿌듯), slack

코드는 제 역할에 충실하다.
에러는 사람이 만드는 것.
😂

2024.06.30 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #4. 웹캠 화면을 가려 보자 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

[HandTris] #4. 웹캠 화면을 가려 보자 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)