스파르타) Ch.5 팀 프로젝트 - 타워 디펜스 온라인 (D-4)

 > 과제 진행 간 완료한 사항 및 문제점과 해결 과정을 정리해보았다.

 

학습 키워드: Node.js, javascript, protobuf, ArrayBuffer, UInt8Array

 

1. 완료한 과제 진행 사항

1) 클라이언트 수정 및 protobuf 구현 완료:

11 update 프로토콜 버퍼 추가 수정 by donkim1212 · Pull Request #20 · eliotjang/tower-defense-multiplayer-game-projec

 

공통

• packet-serializer의 serialize 함수가 기본으로 packetType 키를 추가하도록 변경
• packet-serializer의 deserialize 함수에 sanitize 인자 추가
  • true로 설정하면 payload의 키 이름을 protobuf의 field 이름에서 'payload'로 변경하여 반환
• constants 매핑 구조 수정
  • packet-types.constants.js는 packetType 매핑만 포함하도록 변경
  • proto.constants.js에 protobuf 관련 매핑 추가
  • 위 변경 사항에 따라 불필요한 constants 파일 삭제
• 몇 가지 util 기능 추가 (utils.js, toggler.utils.js)

클라이언트

• 기본으로 home.html에 접속하도록 설정 (서버의 constants 파일에서 변경 가능)
• 홈 페이지에서 href를 사용하지 않도록 변경
• 홈 최초 접속 시 소켓 연결 생성
• multi_game.js의 클래스화 (game.class.js의 Game 클래스)
  • singleton 적용
• 소켓의 클래스화 (socket.js의 Socket 클래스)
  • singleton 적용
  • Socket의 static 함수 sendEventProto를 이용한 손쉬운 패킷 전송. 예시: Socket.sendEventProto(3, {...payload}, 'token')

서버

• 공통 변경 사항에 맞춰 필요한 부분 수정
• protobuf 관련 클래스 추가/수정

 

2. 과제 진행 간 문제점

1) 서버에서 전송한 버퍼가 브라우저에서 역직렬화 시 illegal buffer 에러를 출력하는 문제 (해결):

Figure 1. 서버에서 전송 직전 역직렬화한 데이터

Figure 2. 서버의 버퍼 바이트 배열

Figure 3. 클라이언트에서 illegal buffer 에러 출력

Figure 4. 브라우저의 memory inspector를 사용하여 확인한 바이트 배열

 

 서버와 클라이언트가 같은 직렬화/역직렬화 코드 및 proto 메세지 타입을 사용중인데, 서버에서 직렬화 후 전송한 데이터가 클라이언트에 도달(Figure 5와 7에서 처럼 동일한 바이트 배열을 출력)했지만, 역직렬화를 실패하는 상황이 생겼다. 막연하게 이전처럼 라이브러리 문제는 아닐까 하고 스크립트 태그 교체를 시도했으나 똑같이 illegal buffer 에러가 출력됐다.

 

 어제 해결을 못했었는데, 오늘 오전에 ArrayBuffer를 좀 뜯어보자 싶어서 console.log를 찍어보다가 ArrayBuffer의 바이트 배열의 index에 접근이 불가능하다는 사실을 알게됐다. 그래서 검색을 해보다가 Stack Overflow에서 어떤 글(링크)을 보고 ArrayBuffer를 TypedArray로 변환하면 바이트 배열에 접근할 수 있다는 사실을 알게 됐다. 결론은 data.packet을 UInt8Array로 변환된 배열로 교체해주고 deserialize 작업을 해주니 정상적으로 작동했다.

 

Figure 5. UInt8Array로 변환 및 console.log 테스트

Figure 6. 브라우저 console 화면, 역직렬화 성공

 

 

3. 기타 사항

1) MySQL 설치 및 Shell을 통한 접속:

Figure 7. MySQL Shell을 통한 접속

Figure 8. 비밀번호 변경 및 데이터베이스 생성

 

 Local DB 세팅을 위해 MySQL 8.0.38 버전을 설치했다. 기본으로 JS 문법을 사용하는데, SQL 문법을 사용하고 싶다면 \sql을 입력하면 된다. 비밀번호는 Figure 8과 같이 쿼리를 이용해서 바꿀 수 있다. 위 경우 root의 비밀번호가 1q2w3e4r! 으로 세팅된다. 

Figure 9. 비밀번호를 사용중이지만 비밀번호가 빈 값일 경우

 

 비밀번호가 사용으로 선택되어 있는 상태에서 비밀번호로 빈 값을 지정해줬었는데, JS에서 연결을 시도할 때 env에 비밀번호를 빈 값으로 설정해도 접근이 불가능한 문제가 잠시 있었다. 앞서 Figure 8 처럼 비밀번호를 대충 지정하여 사용하는 것으로 해결했다.

 

# root의 비밀번호를 mypassword 로 변경
SET PASSWORD FOR root@localhost='mypassword'

# 데이터베이스 목록 조회
SHOW DATABASES;

# my_db 라는 이름의 DB 생성
CREATE DATABASE my_db;

# my_db DB를 기본으로 사용하도록 설정
USE my_db;

# 사용 중인 DB의 테이블 목록 조회
SHOW TABLES;

 

 

 

 

--

REFERENCES:

 

[게임 서버] 타워 디펜스 게임 온라인 프로젝트 | Notion

 > 과제 spec

GitHub - eliotjang/tower-defense-multiplayer-game-project: Socket.io 사용 타워 디펜스 멀티플레이어 게임 서버

 > 과제 repo

 

https://stackoverflow.com/questions/3032054/how-to-remove-mysql-root-password

 > Stack Overflow, 비밀번호 초기화 방법

https://dschloe.github.io/sql/2023/09/my_sql_install_windows11/

 > Github.io (개인 블로그), Windows 11 MySQL 설치

https://lovflag.tistory.com/26

 > Tistory (개인 블로그), MySQL Shell 간단 사용법