스켈레톤코드(서버 + 클라이언트)가 주어진 프로젝트에서 여러 부분들을 만들어나가는 게 이번 과제의 주 목표였다.
이번 과제의 필수 목표였던 것은 5가지를 구현했다.
- 스테이지구분
- 스테이지에 따른 점수 구분
- 스테이지에 따른 아이템 생성(해금)
- 아이템 획득 시 점수 획득
- 아이템 별 점수 구분
JSON 파일들을 ASSET으로 생각하고 각각의 파일명에 맞는 역할의 데이터들을 저장한다.
해당 데이터를 이용해 클라이언트 코드에서는 값을 설정(주로 스테이지 변경이나 아이템 생성 또는 점수 획득)
서버 코드에서는 해당 점수나 스테이지가 문제가 없는지 검증하는 것을 위해 사용되었다.
코드를 추가하면서 여러 문제점들과 에러투성이들이 많았다.
첫 번째.
클라이언트 코드에서는 왜 JSON 파일을 접근할 수 없었을까?
서버 코드에서는 현재 파싱을 하려는 파일의 절대경로와 JSON파일이 있는 디렉토리까지의 상대경로를 가져와 JSON파일의 절대경로를 알아내 파싱하는 방법을 사용했었다.
하지만 이 방법은 클라이언트에서는 사용할 수 없었는데
그 이유를 찾게 되었다.
바로 서버 메인에서 실행하는 이 기능 때문이었다.
현재 폴더를 서버(source)와 클라이언트(public)로 분류해 디렉토리 내 정적파일을 실행하는 방법으로 서버에서 클라이언트를 연결했었다.
이 방법으로 실행하려면 클라이언트 내 코드에서 디렉토리 밖을 바라볼 수 없었기 때문에 경로를 통해서 가져올 수 없었다.
따라서 json 파일들이 담긴 assets 폴더를 디렉토리 내에 가져온 후 import 하여 json 내 정의된 데이터 자체를 객체로 가져올 수 있었다.
- 가져온 items 객체를 사용하여 json 파일 내 정보를 사용할 수 있었다.
두 번째.
첫 번째에서 했던 것처럼 클라이언트에서도 직접 JSON형태의 객체 배열을 만드는 대신 JSON 파일에 정보를 넣어놓고 원하는 정보를 클라이언트와 서버가 각각 따로 사용하게 하려면 어떻게 해야할까?
클라이언트에서는 item에 대한 정보를 알 때 가로, 세로 길이까지 알 수 있었지만 서버에서는 알 수 없었다.
만약에 item의 크기 또한 변조가 일어났을 때 검증하려고 한다면 그 정보를 알고 있어야한다 생각했다.
당장에 검증하는 코드까진 만들지 않았지만 언젠가 사용할 때를 대비해 JSON에 정보를 직접 넣고 싶었다.
이랬던 정보를
이렇게 바꾸었고
클라이언트에서 생성하는 배열 또한
이렇게 이미지파일 경로만 담게 되었다.
원래 ITEM_CONFIG 배열에서 객체들을 하나씩 탐색하여 itemImages라는 객체에 테이블처럼 담아두고 있었는데
이 부분을
json 정보를 담은 items 객체를 통해 값을 받아오게 되었다.
세 번째.
게임오버가 되고 게임을 재시작하게 되면 왜 스테이지와 아이템 해금 상태 등이 초기화 되지 않았을까?
클라이언트에서 게임오버가 되고 재시작될 때는 실행되는 여러 클라이언트 객체가 reset()이라는 함수를 실행하게 된다.
각각의 reset함수는 담고 있는 갱신되는 값들을 0으로 초기화하는 기능을 담당했다.
그런데 점수는 분명 0점으로 바뀌었는데...
다시 플레이를 하니 서버가 알고있는 스테이지와 클라이언트가 알고 있는 스테이지가 일치하지 않고 있었다.
최고스테이지를 플레이하다가 게임오버가 되니
최고 스테이지에 도달했을 때의 점수 산정(최고스테이지에서는 생존시 틱당 5점이 오른다.)
그리고 아이템이 모두 해금되어있는 상태로 스테이지 1부터 시작했던 것이다...
아 이것은 지금 점수를 담당하는 객체가 현재 스테이지가 1로 돌아간 것을 알지 못하고 있구나 라는 것을 뒤늦게 알게 되었다.
그로 인해 원인을 찾는 시간에 비해 수정하는 것은 매우 간단하게 해결됐다.
Score 클래스에서 정의된 reset함수이다.
score만 0으로 바꾸고 있었다.
score 클래스내에 stage를 알게해주는 변수값을 만들어 stage를 초기화해주었더니
reset 함수 실행시 클라이언트 메인에서 사용되는 Score 객체는 게임오버가 될 때마다 스테이지가 초기화 된다는 정보를 알 수 있게 되어 정상적으로 실행됐다.
네 번째.
왜 배포된 서버로 실행이 안 되지?
AWS EC2를 통해 배포하여 사용하려 했으나 잘 되지 않았다.
이유가 뭔가 살펴보니 아직까지 localhost:3000를 통해서만 로컬에서 접속할 수 있었다. (서버 메인에서 포트를 3000으로 설정함)
웹소켓 연결 경로를 찾아보았고
경로를 EC2 퍼블릭 ip로 수정해주었더니 정상적으로 잘 작동되었다.
그리고 번외로... 사실 배포하는 과정에서도 오류가 있었다.
클라이언트 자체가 실행이 잘 안되고 에러가 났었던 것이다.
이유는 이러했다.
pm2를 통해 ec2서버에서 해당 프로그램을 열어놓고 배포하려했는데
pm2 start로 실행을 시켜놓은 상태에서 에러가 났었다.
이유는 node_module이 생성되지 않은 상태에서 실행을 했기 때문이었다.
그래서 npm install로 실행을 했는데
하필이면 ec2서버에서 실행이 되는... 그러니까 pm2 list에서 제거하지 않은 상태에서 node_module을 설치하는 바람에 코드가 꼬여버린 것이다.
결국 pm2 list에서 제거한 후 오류가 난 파일을 제거해 git clone -> git pull을 통해 완전 재설치 후 실행하니 잘 되었다...
이로써 하나 알게 된 것은 파일을 수정할 때는 이 파일이 지금 실행되고 있는 상태인지 여부를 먼저 확인한 후 안전하게 수정하자는 것이다.
그리고 혹시 모를 사태를 위해 github에서 버전관리를 잘하는 것도 중요하다고 느꼈다.
