오랜만에 작성하는 TIL

TCP 학습에 들어간 이후로 TIL을 작성할 시간이 도무지 나질 않았다.

오늘로, CH 5 팀 프로젝트가 마무리 되었으며, 관련 내용을 작성하려한다.

과제의 목표는 완성된 클라이언트에 TCP 서버를 붙이는 것이다.

덩그러니 놓여있는 클라이언트에, 이제 서버를 만들어서 붙여야 하는 내용이다.

이번 프로젝트의 팀장을 맡게 되었으며,  파트는 회원가입과 로그인 구현 !!

사실, 로그인과 회원가입은 이전 프로젝트에서도 늘 있던 기능이며,

차이점이 있다면 POST 같은 REST API 로 구현하는 것이 아닌, 

그저 TCP 통신간의 패킷 주고받음을 통해 구현되어야 한다는 것.

본질은 굉장히 다르지만 코드는 크게 다르지 않다. 

더 볼 필요도 없이, 

그저 payload 를 통해 클라이언트 에게 받은 패킷을 문자열로 파싱한 뒤에

알아서 회원가입 스럽게 처리하면 된다 !

클라이언트가 어떻게 보내는줄 알고?

이미 완성된 클라이언트 이기 때문에, 어떻게 패킷을 받고 보내는지는

패킷 명세를 통해 정해 놓았다.

로그인을 통해 날아오는 payload 는 id, password , email 세 개의 데이터 라는 것이다.

물론 파싱 과정은 Proto.buffer 를 이용하여 진행

나는 payload 로 받은  id, password , email 세 개를 가지고 

회원가입을 처리하는 기능을 구현하면 된다.

회원가입된 user 의 데이터는 Mysql - AWS RDS 에 저장할 계획이었기 때문에, 

적절히 Joi 를 사용해 유효성 검사를 진행 한 뒤

DB 에 동일한 id 로 저장된 데이터가 있는지 체크한 후

bcrypt로 해싱하여

DB에 넣어주고

다시 Proto.buffer 를 통해 buffer 형태로 변환하여 연결되어있던 socket  으로 보내면 끝 !

클라이언트에 어떤형태로 보내는지?

마찬가지로 패킷 명세에 클라이언트가 어떤 형태로 패킷을 받는지도 정해져있다.

로그인은 ...  생략한다. 회원가입과 크게 다르지 않다.

본문은 아래 부터다.

이번 과제를 진행하며 마주한 가장 큰 벽은 Redis의 적용 이었다.

레디스 사용의 목적

위는 발표PPT 의 일부분이다. (제가 작성한 부분임 !!)

아무래도, 360ms 라는 지연시간은 사용자 이슈일 확률이 높지만 , 

결과적으로는 Redis 적용을 철회하고 기존 계획인 인메모리만을 사용한 형태로 과제가 제출되었다.

그럼 결국 실패했고, 얻은것이 없는가?

기본적으로 Redis 를 적용하기 위해 몸부림친 결과, 

사용방법에 대해 어느정도 파악 할 수 있었고,

Redis 가 어떤 자료구조를 가지는지,

어떤 부분에서 강점이 있는지는 파악 할 수 있는 시간이었다.

game 세션에 해당하는 부분을 Hash 형태로 넣어 보았다.

실제로, 구현은 완료되어 테스트 까지 잘 진행되는 상태이다.

다만, Redis 파악과 테스트를 위해 혼자서 작업을 진행하다 보니, 

Redis 계획 자체가 너무 개인적인 행위가 되어버렸고, 

다른 팀원이 작업한 파트를 뒤집어가며 작업했기 때문에 그대로 제출 할 수는 없었다.

다시 되돌아와서 팀적으로 각자 파트에 Redis 적용을 하기에는 시간이 부족했다. 

아쉽긴 하지만 절대 낭비된 시간은 아니다.

앞으로 Redis를 어떻게 써야할 지 학습한 시간이 되었다.

라고 하기 무섭게 발표 당일,  다음 최종 프로젝트가 발제되었다.

앞으로는 트랙 종료까지  모든 시간을 최종 프로젝트에 쏟아햐 한다.

Node - 6기

CH 5 타워 디펜스 온라인 팀 프로젝트 3조의 회고입니다.

팀장 - 조웅상

Keep

새로운 것에 대한 시도-

아직 사용법을 익히지 못했던 Redis를 프로젝트에 적용하려고 했던 시도가 좋았다.

Problem

다만, Redis 적용을 시도하는데 있어서 팀적인 움직임이 아닌, 

개인적인 시도로 끝나버린 아쉬움이 있다.

Try
다음에는 새로운 시도에 관한 내용도 작업 초기에 공유하여

어떤 방향으로 진행하면 좋을지 먼저 의견을 나누고 

진행에 따른 상황을 지속적으로 공유하여

더 나은 방향성을 찾아야겠다고 생각함.

팀원 - 이희원

Keep
서로 해야하는 것에 좋은 고집이 있는 것이 좋았다.
깃허브 커밋 컨벤션 같은 것들이 정해지니 보기가 좋았다.

Problem
중간에 변경사항에 대해 공유하는 것이 부족했던 것 같다. 

일부 브랜치가 의도와 다르게 사용된 부분이 있었다.

Try
문제를 확인하고 구조를 다시 잡는 과정은 나쁘지 않았지만, 일부 아쉬운 부분이 있었다.
프로젝트 전역에서 사용되는 상수 등을 미리 정해두는 것을 유념해야 하겠다.

팀원 - 윤여빈

Keep 

잘 모르는 부분이 있다면 소통하여 이해하고 넘어갔던 부분

Problem 

작업분배가 균등하게 이뤄지지 않아 작업량의 차이가 있었던 부분

Try

 내 작업이 아니더라도 소통하며 작업을 함께 진행했으면 좋았을 것 같다

팀원 - 박건순

Keep 
자신이 맡은 일을 기한 내에 완료하는 것

Problem 
자신이 맡은 일을 끝낸 후 붕떠버린 것

Try
다른 분들에게 의견을 물어보고 일을 도와주던가 자신이 할 일을 찾아야 할거같습니다.

팀원 - 송인우 

Keep 
상황을 소통하고 개개인에서 새로 만들어 보는 것도 좋은 것 같습니다.

Problem 
아무래도 클라이언트와의 소통의 문제는 디버깅작업으로 유추하기보다는
클라이언트를 만든 튜터님께
직접 물어보는 게 문제 해결에 있어 훨씬 좋을 것 같습니다.

Try
코드를 만들어봐도 단계별 작업이기에 이전 단계 작업이 안되면
검증하는데 어려움이 있었습니다.
단계별 작업을 한 사람 씩 맞춰서 하기보다는
다른 작업의 검증에 필요한 작업은 live shere같은 기능을 통해 함께 빠르게 작업하고,
거기서 세세히 나누어 보는것도 시간확보에 있어 좋은 방법같습니다.

팀원 - 정동현

Keep 

모르는 걸 넘어가지않고 적극적으로 물어볼 수 있는 점이 다행인 부분이라고 생각함.

Problem 
특별히 문제되는 부분을 느끼지 못했다.

Try
부족한 부분에 대해 강의를 다시 들어보고, 보완하여 최종프로젝트에 진입하는 것이 해결책이라고 생각함.

CH5 개인과제가 마무리 되었다. 

오늘은 해당하는 과제의 내용을 기술하며,

자연스럽게 과제 중에 발생한 트러블에 대한 내용도 TIL로 작성하려고 한다.

DB 동기화

지금까지 prisma 를 사용하거나 또는 직접 DB를 수정했다면

이제는 .query 메소드를 사용하여 접근한다.

updateUserLocation 함수가 실행되면, query 메소드를 통해 

해당하는 DB의 데이터를 수정할 수 있다.

query의 첫번째 인자로 쿼리문이 들어가며, 두번째 인자로 ?에 들어갈 변수를 넣어주면 된다.

(꼭, ? 와 인자를 잘 대칭되게 맞춰주자 !)

위 updateUserLocation 이 실행되는 타이밍은...

클라이언트가 'end' 이름으로된 패킷을 보냈을 때, 

onEnd 를 통해 removeUser가 실행된다.

원래 removeUser 는 유저의 접속이 종료되었을 때 

세션에서 유저 데이터를 날리는 함수였는데,

같은 타이밍에 updateUserLocation 을 호출하여 자연스럽게 

세션에서 삭제 및 종료 좌표를 저장하게 된다.

문제

그래서 이걸 어떻게 써먹을까?

해당 좌표를 기록하는 이유는, 클라이언트에서 접속 기록이 있는 device_id 로 접속했을 때,

이전 종료 시 기록했던 위치에서 재접속이 되도록 하기 위함이었다.

위에서 본 것처럼, DB 상에 기록은 잘 되고있고,

접속할 때, 해당 정보를 클라이언트에게 보내는 코드 또한 이미 작성했다.

이제 클라이언트에서 받아서 적용해야 하는데.....

클라이언트 쪽은 아직까지는 너무 생소하기 때문에 많이 헤매게 되었다.

이미 빌드된 클라이언트를 받았는데, 수정을 해야한다는 것 !!

우선, 수정을 위해 배포된 코드를 다시 가져와서 작업을 시작했다.

이...게.. 어느 나라 언어람

너무나도 생소한 코드지만, 강의에서 설명한 내용을 바탕으로 코드를 수정했다.

패킷을 받는 부분을 발견 !

이제, Player.cs 로 들어가서 위치 동기화를 하는 부분에,

최초 한번만 targetPosition 으로 좌료를 설정하게 만들면 끝이다.

(라고 말은 했지만 엄청 헤맸다)

targetPosition은, 서버에서 받은 x ,y 좌표를 Vector2 클래스를 이용해서 좌표화 시키는... 그런 녀석이라고 한다.

사실, 위에 부분보다 힘들었던건.

서버때와 마찬가지로 패킷을 어떻게 처리하냐는 부분이었다.

당연히, 버퍼로 보냈기 때문에 그대로 처리할 수는 없다.

우선, 패킷을 핸들러 기준으로 나누는 부분부터 수정하여, Init (최초 실행시) 에 적용되는 부분을 만들고,

Handler.InitialHandler는 기존에 있던 게임 시작 로직과 동일하며,

Packets.ParsePayload <>  를 통해, 따로 파싱이 적용되도록 만들었고,

해당 부분은 Packet.cs 의 마지막 부분에 처리하는 함수를 따로 만들어 주었다.

접속 종료했던 위치로 다시 접속한 오른쪽 캐릭터....!! 

그림만 보면 잘 모르겠지만 아무튼 잘 작동한다.

삼 각 함 수

아아.. 결국 수포자인 내가 삼각함수를 배워야 하는 순간이 왔다.

챌린지반의 수업 중, 발표 자료를 준비하라는 것이 출발이었지만,

언젠가는 배워야 할 것이었다. 

따라서, ppt 에 정리한 내용을 바탕으로 TIL을 작성하였다.

수학 지식이 전무한 (흑흑) 나는 삼각함수를 배우기 전에 삼각형 부터 배워야한다...

초 등 학 생 

삼각형이란, 

3 개의 직선으로 이루어진 도형으로,

세 내각 의 합이 180도 이다 !

다음으로는 , 삼각비를 알아야 하는데,

앞으로 등장할 삼각형은 모두 직각 삼각형으로 설명한다는것을 기억하자.

중 학 생

(마지막으로 본게 20년은 된거같은데..)

삼각비는 , 위에 서술한 것 처럼, 삼각형의 두 변을 묶어서 비율로 나타낸 것이다.

여기서,

빗변이란, 직각 삼각형에서 가장 길이가 긴 변을 말하며,

직각을 이루는 두 변을 제외한 나머지 하나의 변이 된다.   = 직각과 마주보는 변

특정한 각 A를 기준으로 직각을 이루는 쪽으로 가는 변이 밑변이 되고,

빗변과 밑변을 제외한 남은 하나의 변을 높이라고 표현한다.

주의사항으로,

언뜻 보기에 가로로 되어있다고 밑변, 세로로 되어있다고 높이 라고 하는것을 틀릴 수 있음에 주의 !!

추가적으로 tan A = sin A / cos A 로 표현할 수 있다. 

(높이 = sin A * 빗변의 길이)

(밑변 = cos A * 빗변의 길이) 

특수각은 간단히만 정리하고 넘어가도록 하자.

비교적 깔끔하게(?) 삼각비를 표현 할 수 있는 각들을 특수각 이라고 부른다. 

경우에 따라 120 도, 150 180 210 ... 막 아무거나 집어넣는 모양인데...

우리는 0 30 45 60 90 도 만 기억하면 된다.

tan 30도를  루트3 /3 으로 표현하고 있는게 마음에 안들기 때문에,

1 / 루트3 으로 표현하는 쪽이 가독성이 더 좋다.

본격적으로 삼각함수를 들어가기....전에 마지막으로 호도법을 알아보자

호도법은 각도를 표현하는 방식중 하나이며,

깊이 들어가면 내용이 엄청 심오한듯 보이기 때문에, 필요한 부분만을 우선 이해하자. (수학은 늘 이런식이야)

우리가 평소에  사용하는 각도는 

육십분법 에 해당하며 , 한바퀴의 회전을 360도   로 표현하는 방식이다.

그렇다면, 호도법은 위에서 나온 바와 같은데,

기억해야할 것은 180도 =  𝝿 (3.141592.......) 라는 것 !

왜 또 굳이 무리수인 파이를 가져와서 정의를 내린것인지 의문이 들지만

기존 육십분법의 각도와 달리 

어떻게든 단위를 제거하고 숫자로 각도를 표현하기 위해 만든 표현법이라고 보면 될 듯 하다.

이게 대체 뭐람

깊이 들어가려면 심연을 봐야 하는 느낌이 강하게 들기 때문에,

일단 호도법 => 180도 = 𝝿  하고 넘어가도록 했다.

자.. 그럼 이제 삼각함수이다.

고 등 학 생

고등학생이 된 우리는

이제부터는 삼각형을 그리기 전에 십자가 + 를 먼저 그려야한다.

이 말은, 좌표가 생겼다는 말이고, 

좌표를 통해 마이너스의 값을 표현 할 수 있게 되었다.

마이너스 좌표의 삼각형을 그리는 것으로 

우리는 세타 가 90도가 넘는 (둔각) 삼각 함수의 값을 구할 수 있게 된 것이다 !!!!!!!

사분면에 관한것은 중학교 과정에 있다. 

삼각 함수도 당연히 위와 마찬가지 이다.

크게 어려운 내용은 아니지만,

쉽게 이해하려면 아래의 그림을 보자...

(0, 0)을 원점으로  r = 1 인 단위원을 양의 방향으로 그린다면

그림과 같은 형태를 볼 수 있다. 

이걸 움직이는 그림으로 볼 수 있다니... 세상이 많이 좋아졌다 !!

보는것 처럼, 임의의 P 좌표의 위치에 따라 

sin 세타와 cos 세타가 양수와 음수의 영역을 넘나드는 것을 볼 수 있고,

이를 그래프로 표현하는것 또한 확인할 수 있다.

위 그래프 에서는 한바퀴 (360도 = 2파이) 에 해당하는 지점만 표기되어 있지만,

위 처럼 0도, 90도, 180도, 270도 마다 호도를 표기하여 본다면

어느 사분면에 위치한 삼각 함수 인지를 좀 더 쉽게 파악할 수 있다.

오늘은 여기까지... 

오늘 학습한 내용 모두 중요하지만,

가장 어렵고, 중요하다고 생각하는 부분은 위치 동기화 이다.

우선, 레이턴시 ( Latency ) 란?

하나의 데이터 패킷이 출발지에서 출발하여 도착지에 도착할 때 까지 걸리는 시간을 말한다.

특히 게임 서버에서 현재의 기술력으로는, 무시하기 힘든 레이턴시가 발생 할 수 밖에 없다.

따라서, 우리는 이 레이턴시를 적절히 숨기거나, 피하는 기술을 배워야 한다 !

이러한 레이턴시를 유저가 느끼지 못하게 만드는 기술을 레이턴시 마스킹 이라고 부른다.

강의에서는 추측 항법에 대해서 말해주고 있다.

아래에 나올 이미지를 통해서 이해가 빠르게 되었기 때문에

이미지를 가져오도록 하겠다 !

기본적으로, 레이턴시가 곧이 곧대로 반영되는 상황에서

서버가 실시간 동기화를 시도한다면,

유저에게 보여지는 움직임은 위와 같이 표현할 수 있다.

글로 표현하면 순간이동을 하며 뚝뚝 끊겨 보일것 이라는 것이다.

선형 보간은,

밀려서 뚝뚝 끊어질 바에 아예 뒤로 밀어서 시작하는 것이다.

끊겨 보이는 현상은 없겠지만, 다 같이 느린 반응속도를 갖게 될 것이다.

대망의 추측 항법은,

레이턴시의 지연시간 만큼을 미리 계산해서 전송하는 방법이다.

가장 실시간 동기화에 부합하는, 한계를 극복하려는 노력이 보이는(?) 방법인 듯 하다.

쉽게 생각하면,

만약 지연시간이 1초로 고정이 되어있다는 가정을 해 보자.

이 1초 만큼을 뒤로 밀어서 반영하기 시작하는것을 선형 보간,

 1초를 미리 당겨서 반영하면 추측 항법이라는 것이다.

강의에서 소개한 방법을 적용한 코드 !!

각각 다른 레이턴시를 임의로 적용한 뒤, 

user 의 이동속도 =1 로 계산하여 

데이터를 미리 반영하는 추측항법의 결과를 보여주고 있다.

첫 주차에 간략히 배웠던 TCP를 본격적으로 시작한다.

오늘 학습한 내용은 위와 같으며,

강의 하나 하나의 난이도가 상당하다. 

하나에 20분 내외로 끝날 강의가 맞을까 의심이 되는데, 

그럴것도 없이, 추가적인 학습을 유도하는 강의로 보인다.

시작은 디렉토리 구조 부터 !

지난 과제의 디렉토리보다 세분화되어 복잡해 보인다.

아니, 익숙하지 않다고 하는게 더 맞는 말 같다.

server.js 를 시작으로

무려 Node 의 기본 모듈

net 을 이용하여 TCP 서버를 생성하고

initServer 를 통해 본격적으로 서버가 구동된다.

기본적인 구조는 socket 서버의 형태와 크게 다르지 않지만,

데이터를 주고 받을때는 반드시 buffer 의 형태 여야 한다는 것 !!

때문에, onData => 데이터를 받았을 때

당연히 buffer 형태로 왔을 것이므로, 해당 buffer를 다시 해석하는 과정이 필요하다.

에서 끝나면 사실 그렇게 복잡할 일은 아니다...

버퍼가 늘 출발한 순서대로,

예상한 시간에 도착하여 딱 딱 완성된다는 보장이없다.

따라서, while 반복문으로 헤더에 담긴, 오기로 한 길이만큼 올 때 까지 기다려 주는 상황을 만드는 

코드가 필요하다.

버퍼들이 도착하여 이미 약속된 패킷의 길이가 될 때 까지 기다리는 것이다.

에서 끝나면 사실 그렇게 복잡할 일은 아니다...

해당 버퍼를 처리하려고 할 때, 추가적인 다른 버퍼들이 이미 도착해 있을 수 있다.

따라서, header 에 담긴 length 만큼만 buffer 에서 잘라서 처리하고, 

나머지 부분은 다시 buffer 에 넣어버리는 코드를 작성한다.

여기가 3-3에 해당하는 내용인데,

이번 과제는 시작조차 쉽지가 않을것 같다.

CH.5 에서... 드디어 올 것이 왔다.  TCP 

악명이 높은 TCP 통신에 관한 챕터이다.

구현하기에 앞서, TCP 에서 사용하는 패킷과 

패킷의 데이터 단위인  Buffer 에 대해 알아야 한다.

TCP 는 바이트 배열을 주고받으며 통신한다.

1바이트 = 8비트 단위의 데이터 배열이며, 

8 비트는 16진수 2자리에 해당하고, 0~255의 값을 표현 할 수 있다. ( 00 ~ FF )

16진수를 단위를 쓰는 색상코드는 한번 쯤은 봤을 것인데, 

이는 00 00 00   8비트 x3 의 코드이다.

게이머라면 알만한 프로그램인  치트 엔진에서도 

데이터를 16진수 2자리 = 8비트 로 표현하는 것을 볼 수 있다.

다음은..

아무튼 Node 의 기본 문자열 처리방식인  UTF-16 (16비트) 인코딩보다 빠르다는게 중요

백문불여일견 !!

Hello 문자열을 아스키 코드 16진수로 표현하면 48 65 6c 6c 6f 가 되고,

Buffer.from('Hello') 를 실행해 보면, 버퍼 객체인

<Buffer 48 65 6c 6c 6f> 가 출력되는것을 확인 할 수 있다.

왜 'H ' 가 48이 되었는가 하면,  

'H' 는 아스키 코드로 72 에 해당하고,  72 (10진) 을 16진수로 바꾸면 48이 되는것이다.

살짝 머리아픈 부분은, 막상 해당 인덱스를 찍어서 보면 72 즉, 10진수로 표시해준다는것

헷갈리지 말자 !

마무리

강의에서 설명해준 내용대로,

문자열 -> 버퍼 -> 전송  -> 문자열 의 과정을 수행해 보았다.

서버가 받는 문자열은 뒤집는 것 까지 !

오늘은 Socket 을 다루며 생겼던 의문에 대해 생각해보는 시간을 가졌다.

🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 

Chapter.4 의 Dino -run 과   Tower Defence 를 진행하고 들었던 의문이 있다.

🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔 🤔

위는 dino run 에서, 서버가 클라이언트의 데이터를 검증하는 과정이다.

유저가 일정 점수를 만족하여 스테이지를 넘어갈 때, 

당시의 점수가 정상적인 값인지 서버에서 확인하는 과정이다.

클라이언트는 클라이언트 나름대로의 계산을 통해서 

스코어를 계산해서 반영하고 있다.

여기서 생긴 의문은

어차피, 각자 점수 계산을 할꺼면 그냥 서버가 점수를 관리하여 결과만 보내주는게 낫지 않을까? 

하는 의문이었다.

쉽게 말해,

서버도 10의 일을 하고

클라이언트도 10의 일을 할 바에는

서버만 10의 일을 해서 클라이언트는 그 결과를 받아서 표기만 하게 하는것이 낫지 않겠나 하는 것이었다.

이렇게 하면 클라이언트에서 점수를 조작하는것도 어려워지고, 

서버에서는 검증을 하던지 데이터 자체를 관리하던지 로직 복잡도는 크게 다르지 않을것이고,

패킷은 검증만 해도 오가야 하니 패킷의 양 또한 비슷할 것이다.

쉽게 말해, 검증을 위해 서버가 예상한 점수를 그냥 클라이언트로 보내버리는 것이다. 

그걸 받아서 현재 점수를 갱신하게 만들면, 일종의 동기화가 진행된 것이기 때문에

유저는 보다 정확한 값을 확인할 수 있고, 클라이언트는 딱히 계산할 것도 없어지게 된다.

얼핏 보면 크게 오류가 없어보이는 논리이다.

그렇기 때문에,

왜 그렇게 하고 있지 않은지를 찾아보기로 했다.

지금 생각해보면 대단히 고민 할 필요도 없는 문제...

자잘한 문제를 다 치워 두고 위에 저 두 상황을 봤을 때,

아래의 케이스는 결국,

클라이언트가 서버의 패킷을 받을 때 까지 데이터 변화를 적용 할 수 없다는 것 !!!!

이 부분이 가장 큰 차이점이다.

만약 서버의 응답이 느려지거나, 적당히 빠르다 할지라도 빈도가 너무 많은 과정이라면

그 때마다, 클라이언트는 서버가 데이터를 보내줄 때 까지 손가락만 빨고 있어야 한다.

아무리 짧다고 하더라도 클라이언트가 직접 수정하는 것보다는 느릴 수 밖에 없다는 것이다.

결과적으로, 유저 경험적인 측면에서

순간이지만, 일단 클라이언트 마음대로 하게 두고,

선을 넘으면 그 때  =검거= 하러 가는 검증 방식을 사용하는 것이다.

결론은 케바케 !!

결론 

총 세 가지 케이스로 요약할 수 있다.

1. 서버가 데이터를 관리하고 계산하여 클라이언트로 쏴줌

게임의 재화같은 경우, 중요하게 관리되어야 하는 만큼 서버에서 데이터를 관리하는 경우가 많다.

서버가 계산한 내용으로 클라이언트에 반영하려면 위에서 말한것 처럼,

서버가 보내는 명세서를 클라이언트가 받을 때 까지 갱신이 지연되는 문제가 생길 수 있다.

2. Dino run 의 점수 계산

위에서 본 Dino run 의 스코어 계산의 경우, 

프레임 단위로 이루어지도록 설계가 되어있다.

만약 서버가 해당 스코어를 관리하려면 프레임 단위로 데이터 갱신하고,

프레임 단위로 패킷으로 보내줘야 하는 상황이다.

스코어의 경우 최종 스코어만 정확하게 계산이 가능하다면

굳이 매 순간 엄격하게 정확 할 필요까진 없는 데이터이기 때문에, 

결과적으로 클라이언트에서 관리하되, 적절한 타이밍마다 서버가 검증하는 방식이 되었다.

3. 그 외 ...?

여기까지 써야 하나 싶긴하지만, 마무리를 위해 작성해 보았다.

클라이언트에 그려지는 '점수' 라는 텍스트가 'white' 색상이 맞는지, '점수' 라는 텍스트가 맞는지는 

전혀 검증 할 필요성이 없다.

따라서 해당 부분은 따로 검증이 진행되지 않고 클라이언트 독단으로 실행되게 되어 있다.

결국, 개발자가 데이터를 어떻게 설계 하는지에 달려있다고 볼 수 있다 !

오늘 발표를 끝으로 또 하나의 프로젝트가 종료되었다.

담당 업무 부분을 정리해보았다.

• 상점의 구매 버튼을 통해 이벤트 시작

클라이언트에서 생성될 타워의 좌표와 버튼 번호를 #30 towerBuy (handler Id) 로 요청

서버에서는 버튼 번호 === 타워 종류 로 구분하여 해당하는 타워 정보를 redis에 저장된 metaData 에서 가져온다. 

그 후 서버에서 관리하는 user의 소지금을 가져와서 간단한 검증을 진행한다.

검증에 문제가 없다면, 타워의 data를 redis 에 push 한다.

저장되는 내용은 타워의 종류 = towerType, 타워 좌표 = position , 그리고 강화 횟수 (구매 시 0 ) 이다.

그 후 return 되는 정보는 아래와 같으며,

해당 데이터는 다시 클라이언트에게 동일한 handler Id = #30 towerBuy 로 'response' 이름으로 전송된다.

클라이언트는 받은 패킷의 내용으로 메세지 출력, 타워 구매, 표시 골드 갱신하는 함수를 실행하게 된다.

타워를 찾아서 실행된다.

• 타워를 클릭 할 때, 해당 마우스 좌표에 타워가 있다면 실행된다.

클릭 시, 해당 타워의 사거리를 원으로 표시하고 타워의 능력치 정보와 타워 강화, 타워 판매 버튼을 생성한다.

• 타워 메뉴에 있는 타워 판매 버튼을 통해 실행

로직 자체는 타워 구매와 유사하며, #31 towerSell 핸들러로 클릭한 타워의 좌표를 payload로 보낸다.

서버에서는 받은 타워의 좌표와 동일한 좌표를 갖는 데이터를 redis 에서 찾는것으로 검증을 진행하며,

같은 좌표의 데이터가 있을 시, 해당 데이터를 삭제하고 해당 타워 가격의 절반에 해당하는 금액을 소지금에 더한다.

이 후 정상적으로 return 이 반환되면 클라이언트는 해당 타워를 제거한다.

• 타워 메뉴에 있는 타워 강화 버튼을 통해 실행

타워 판매와 동일하게 좌표를 받아서 진행하며, 동일한 좌표의 데이터를 redis 에서 찾은 뒤 enhanceLevel 을 +1 한다.

클라이언트는 서버에서 받은 데이터로, 강화를 실행한다.

하루에 한번 회의 시간을 정해서 각자의 진행 상황과 그날 구현 목표에 대해 공유하는 것이 좋았습니다.

A 의 작업이 완료되어야 B의 코드를 테스트할 수 있는 환경일 때,

A의 작업이 완료될 때 까지 시간이 더 필요하다는 사실을 공유받으면,

B는 임시 더미 데이터(하드 코딩)으로 코드 테스트를 한다거나, 일단 다른 작업을 진행하는 등의 판단이 보다 수월했습니다.

추가로, 회의 시간이 아니더라도 초기에 합의된 방향으로의 구현이 어렵거나, 다른 아이디어가 생길 경우,

그때 그때 의견을 나눠서 방향을 정한것도 좋았습니다.

의견을 나눌 때, 코드 작성 전에 계획에 대한 이야기를 하면

듣는 입장에서는 어떤 내용의 코드인지 잘 이해하기가 힘들어지고,

코드를 작성하고 해당 코드에 대한 의견을 물으면,

불필요한 코드로 결론 날 경우, 작성했던 코드를 다시 롤백 해야하는 상황이 생겼습니다.

앞으로는,

자신의 코딩 계획을 좀 더 논리적으로 설명 한다던가 , 간단한 예시 코드 정도까지만 작성하여 의견을 교환하면

위와 같은 일을 방지할 수 있을 거라고 생각합니다.

코드 PR 을 올리면 PR 코멘트 외에도, 코드 작성자가 직접 해당 코드를 리뷰하는 시간을 가졌습니다.

위 방법으로 어떤 코드가 PR 된 것인지 좀 더 명확하게 팀에 공유가 될 수 있었는데요,

아쉬운 점이 있다면 리뷰 자체의 규칙을 정한것은 아니었기 때문에

팀원 모두가 PR한 내용의 코드를 설명하고, 테스트 과정을 보여주고 , 결과까지 보여주는 것에 시간 소요가 꽤 있었습니다.

불필요한 시간이었다는 것은 절대 아니지만, 목표는 어디까지나 merge 결과 이상이 없어야하는 것이었기 때문에,

코드의 목적, 테스트 과정이 명확했다는 부분과, 그 결과 확인된 이상이 없다는 점 정도만 리뷰하고

자세한 코드 해석은 주석과 코멘트를 활용했다면 리뷰 시간을 좀 더 단축 할 수 있을 것 같다고 생각합니다.

과제 진행상황 ...  물론 맡은 부분만 !

기능적인 부분은 전부 구현되었다. 어느정도 UI 의 변화도 있었다.

index.js 에 만들었던 상점 부분의 코드가 전부 빠지고

div 뼈대만 남게 되었다.

해당 부분은 game.js에서 채워지도록 작성했다.

초 하드 코딩 상점이 아니게 되었다는 말씀 !

강화 기능을 추가함에 따라, ★ / ☆ 로 강화 단계를 표기하게 했다.

강화 정보를 MetaData 를 담고 있는 towerEnhance 테이블이 추가되었고, 

강화 데이터를 포함한 모든 데이터들은 redis에서 관리하고 있다.

레디스에 쌓인 데이터를 조회하여 검증 및 데이터 갱신이 이루어진다. 

추가적으로, 타워 클릭 시 메뉴창을 띄워서 

클릭한 타워의 정보를 확인 가능하게 만들고, 

해당 타워의 강화와 판매가 이루어 지도록 했다.

또, 해당 타워의 사거리를 원으로 그리면서, 

사거리를 확인함과 동시에 어떤 타워가 클릭된건지 좀 더 명확하게 알 수 있게 만들었다.

강화버튼을 클릭 하면, 서버로 보내지는 payload 는 해당 타워의 x y 좌표 뿐이며, 

해당 타워는 redis 에 저장해놨던 tower 데이터를 긁어와서 해당 좌표의 타워가 있는지 확인하고, 

저장되어있는 towerType (타워 유형), 좌표, 강화횟수 ( 구매 시 0으로 기록) 를 기반으로 검증이 진행되고, 

유저의 보유 소지금 또한 서버에서 관리가 되고 있기 때문에 , 

강화 시 소모되는 골드 또한 반영이 되도록 했다.

그 결과 리턴하는 패킷

클라이언트에서는  socket.on , 'response'  로 통해  서버의 패킷을 받는다.

위와 같은 형태로 구매, 판매, 강화가 실행된다.