[📜일지] 리액트, 타입스크립트, 파이어베이스로 웹게임 만든 일기

[파세토막튀김(hmshood439)]

모 갤러리에서 ㅇ망호처럼 소규모로 사람 모아서 하려고 만든 게임이고

이전에는 유니티로 게임 만들어봤고 이번에는 리액트, 타입스크립트에 파이어베이스 조합으로 순수 웹으로 제작을 해봄

게임 자체는 레지스탕스 쿠 라는 이미 있는 보드게임 룰에 각색이 더해졌을 뿐이니 특별한게 없고

유니티때랑은 달랐던 점이나 느낀점을 정리하고싶어 글을 남김

왜 유니티로 안하고 웹으로 했냐?

출시하는 부류가 아니고 링크걸고 간단히 여럿이서 ad hoc식으로 헤쳐모여 하는 게임으로서 유니티로 만든 pc실행형이나 모바일 앱 게임은 접근성이 안좋았음

유니티에 html5빌드가 있는데 포톤엔진으로 만들었을때 이상하게 탭전환등으로 해당 게임 세션이 수면상태에 들어가면 그대로 게임이 먹통이 되는 현상도 있었고

어쨋든 유니티가 대단한 게임엔진이니 만들 그것도 다 해결할수 있는 방법이 있었겠지만 이번에는 다른 도구로 접근해보자는 생각이었음

웹개발 관련 지식은 중학교때 html배운게 마지막이었는데

유데미로 공부하면서 일단 진입장벽이 대단하다고 느낌

html css 자바스크립트 리액트 타입스크립트 그리고 리액트+타입스크립트까지 산넘어 산..

이거 발달과정도 참 대단한게...태초에 html이 있었는데 html만으로는 스타일링이 복잡하니 css가 생기고..

웹페이지가 살아움직여야하니 자바스크립트가 생기고.. 근데 자바스크립트는 자바랑 1도 관련없고 (제일충격)

그것으로 조차도 개발이 너무 어려우니 자바스크립드 html css를 다 짜주는

프레임워크들이 생기는데 프레임워크도 뭔 장단점이 그리 많은지 vue angular react next뭐 개많고

자바스크립트 마저도 개썩었다고 자바스크립트는 짜주는 타입스크립트가 생기고 (개웃김. 그래서 타스 하려면 자스도 알아야함)

거기에 css도 썩었으니 sass인지 css를 짜주는 css도 있고

정말 거대한 세계였음.

내가 마지막으로 웹페이지 만들때는 드림위버 쓰면 OK였던거같은데.

첫번째 불안요소는 웹개발 진입장벽이었고 두번째는 파이어베이스를 한번도 안써봤는데

게임서버로 적합한지 조사하려고 만져보면서 Realtime Database를 쓰면 실시간으로 데이터베이스 값 변화를 listen할수 있다는것을 알았고

서버가 싱가폴에 있기는 해도 그렇게 렉이 심하지는 않았음

유일하게 아쉬운게 포톤엔진은 네트워크상으로 동기화된 시간스탬프를 제공했는데 파이어베이스는 그런건 없었던거같음.

파이어베이스에서 제공하는 timestamp변수는 로컬상에 존재하는게 아니라 해당 오브젝트를 db에 올리면 파이어베이스가 그 값을 현재시간으로 치환해서 돌려보내주는 그런 거였음

만약에 좀더 실시간성이 중시되는 게임이었다면 여기서 상당히 위험했지만 보드게임이기에 500ms정도 차이는 괜찮고

대신 db에 저장된 정보가 그대로 게임상태이자 화면상태이도록 만들면 문제는 없을거라 판단함

혹시 지금이라도 파이어베이스에 사실 포톤엔진처럼 실시간 전 클라이언트 동기화중인 타임스탬프가 있었던거라면 알려주길 바람...

리액트에는 useContext라는 훅이 있는데

이게 모든 UI요소에 거의 실시간으로 값을 전달해주는 역할을 함

그래서 파이어베이스의 db eventlistener랑 이걸 잘 연결하면 데이터베이스에서 바뀐 값이 바로 context로 전달되고

그게 바로 모든 component에 전달되고, 컴포넌트에서 게임데이터를 바꾸면 그게 파이어베이스로 올라가고.. 그게 다시 context로 돌아와서 전체업데이트가 되고..

이런식으로 쓰면 직관적으로 데이터베이스를 쓸수있을거같아서 리액트의 context와 파이어베이스의 데이터베이스 구조를 완전히 똑같게 만들어놓음

좀더 신경썼으면 파이어베이스에서 받은 정보를 후처리해서 좀더 리액트에서 쓰기 좋게 전파할수도 있었을건데,

예를 들어 카드라는 게임오브젝트는 이름도있고 이미지id도 있을거지만 데이터베이스에는 id만 올리고 id값을 받았을 때 다시 카드 클래스로 선언한다던지

그런데 지금은 처음해보는거라 네트워크 동기화 오류를 최소화 해보려고 무리해서 완전히 똑같이 만듬

그렇다고 필요없는 정보를 데이터베이스에 같이 올려버렸다는건 아니고 이전같으면 클래스로 감쌌을 정보를 일일히 id를 읽고 그 값을 변환해주는 함수들로 대체함

좋은방법은 아니고 무수한 변수/함수선언에 시달림

다음에는 더 신경써서 만들어보자..

유일하게 db정보를 후처리해야했던게 HashMap 형, 파이어베이스 문서에는 map 오브젝트도 지원한다했는데

실제로 받아보니 그냥 Object에 Key:Value가 달린거로 인식하고 Map으로 인식을 안해서 Object를 풀어서 맵으로 다시 넣어야했음

realtime database얘기가 아니었나봄

데이터베이스 변화를 듣는 eventlistener를 설정하는거도 여러번 시도를 거쳤는데

기본적으로 자식노드의 추가, 삭제, 변화 그리고 자기자신 노드의 변화를 들을 수 있음

근데 자기자신에 리스너를 걸면 그 아래 노드의 어떤 사소한 변화가 생겨도 그 오브젝트가 통채로 날아오기 때문에

(예를들어 플레이어의 이름만 바꾸면 바뀐이름만 받고싶지만 플레이어 통채로 이름 주소 전화번호등이 싹 다옴)

꼭 필요한 정보의 최 하위노드에 리스너를 달라고 문서에 적혀있음

그래서 처음에는 가장 아래단에 리스너를 싹 다 달았는데

그렇게 하고 보니까 어떤 정보는 순차적/개별적으로 업데이트를 받을게 아니고 통채로 날아와야하는게 맞는 경우가 있었음

예를 들어 게임보드 상태를 업데이트 할때 그에 딸린 카드상태 코인상태등은 따로따로 받았다가는 현재상황 해석을 잘못할수가있었음

반대로 정보 업데이트를 올릴때는 항상 관련된 정보만 핀포인트로 올리는게 맞았음

처음에는 꼭 필요한 데이터만 꼭 필요한때에 올리고 db에서 추론할 수 있는 정보는 모두 로컬 클라이언트에서 추론하는 식으로 만들었는데

나중에 채팅기능 구현하니까 결국 데이터 사용량은 채팅이 지배하게되고 게임상태교환에 1바이트 2바이트 아끼는 의미가 하나도 없었던거임

어차피 느릿~느릿 진행되는 웹게임이니까 별 차이도 안나고.

db에 정보 올리는거에 씹게이같이 굴지말고 편하게 편하게 하는게 좋다고 너무 늦게 깨달음.

그리고 파이어베이스에는 atomic 업데이트라고 단순 값 증가와 경감의 경우 그 차이만 업데이트 할수있는 함수도 있다는 걸

개발 후반부에서야 알았는데 이게 빠르고 안전하다고 적혀있음. 미리 알았으면 더 자주 썼을 듯.

파이어베이스 관련 깨달은건 이정도고

UI는 진짜 머리털 뽑으면서 만들었다..

flex도 있고 grid도 있고 블록, 인라인.. 동영상 보면서 다 배웠는데

처음에는 flex로 UI그리다가 다 width height %로 바꿈

항상 화면의 x%를 차지하기를 원하는 UI에 대해서 flex를 쓰면 만약 컨텐츠가 그 비율보다 커지면 그대로 컨테이너 UI가 따라 올라가버리는 문제가 있었음

그리고 테마 색 일괄 관리하는거 .. css로 어케하는걸까 분명 CSS도 무슨 변수 선언을 해서 돌려쓰는게 있을것같았는데

결국에는 테마 관련 css 한곳에 모아두고 조립블록마냥 필요한곳마다 내내 불러서 import에 시달렸음

css로 애니메이션 효과 만드는건 의외로 개꿀이었음 유니티에 그 뭐더라.. 트랜지션 유명한 패키지 있었는데 그거닮음

아직도 이해 안가는건 화면 비율 폰트사이즈는 어떻게 하는거지

rem단위를 쓰면 된다고 나오는데 그거 써도 화면마다 좀 차이가 있었음

css공부에 시간을 많이 못써서 모르는 부분이 많았음

게임에서 쓰는 이미지나 사운드도 파일 한곳에 import 다 몰아넣고 enum으로 등록해서 꺼내썼는데

진짜 바보같은 짓인데 어떻게 다른 방법이 있나 궁금함.

변수에 따라 이미지를 다른걸 표시해야할때 후보 이미지를 몽땅 그 페이지에 import해서 골라쓸수는 없으니 좀 차선책으로 생각한건데

언어 현지화같은 경우 i18next라는 패키지가 있어서 수월했는데

텍스트안에 변수집어넣기, 부분적 스타일넣기 등은 지원안해서 직접 만들어야했고

현지화를 적용해서 만들면서 ui구조를 좀 많이 바꿔야했음

어느 프로젝트나 다언어 지원 계획이 있다면 처음부터 그걸 고려하고 만들었어야하는게 맞지만...

UI관해서는 이정도고

리액트에서 커스텀 훅을 만들면서 처음으로 closure를 잘 이해하지 않았을때 생기는 문제에 대면함

왠만한 변수등은 리액트 훅을 이용해서 제때 업데이트 되지만

키보드 입력 감지 이벤트 리스너는 리액트에서 지원하는게 없어서 자바스크립트 함수를 그대로 썼는데

이건 리액트랑 관련없는 자바스크립트 함수다 보니까 여기서 이벤트가 발동했을때 그 안에 closure로 들어간 변수가 최신 상태의 리액트 변수가 아니었던것,,,

처음에는 이걸 이해못해서 많이 해맸는데 결국 솔루션은 리액트 훅을 제대로 써야한다.. 항상 어디서든 잊지말고..

웹소켓에 대한거도 처음 알게됨

원래 프로그램에 tcp대 tcp로 클라이언트간 통신하는게 있었는데 이걸 웹에서도 구현하려니 tcp소켓이란건 온데간데없고

웹소켓이라는거 달랑 하나만 있는거임..

처음에는 그냥 tcp소켓의 웹버전인가??생각했는데 .. 정말 띠용했음.

이 자바스크립트 웹소켓은 퀩소켓vs 웹소켓으로 연결하는게 아니고 받는쪽은 웹서버를 열어야하는거더라 물론 그 안에 웹소켓이든 tcp소켓은 있겠지만

아니 뭔 이제와서 서버야..싶었는데 결국 jetty websocket / webserver라는 간단 웹서버 비스무리한걸 스택오버플로우에서 붙여와서 해결함

VS코드 쓰다가 중간에 인텔리j로 개발도구 바꿈

vs코드가 가볍고 좋긴한데 타입추론이나 자동완성이 잘 안되고 허접허접코딩 결과물의 리팩토링이 힘들어서

타입스크립트의 강점을 못살리고있는거같아 바꿨는데 로딩시간이 길어졌다는것 말고는 상당히 만족스러웠음

웹페이지는 깃허브에서 호스팅했고

도메인 네임도 사서 넣을수 있는데 대만족...

최종적으로 웹의 세계는 너무나도 넓고 깊고 나는 마치 한낱 모기가 되어 미시적인 삶을 사는것 같았음..

리액트도 파이어베이스도 자바스크립트도 다 처음이라 신기한거도 많고

나는 클래스를 많이 만들고 코드본문을 줄이는 경향으로 코드를 쓰는데

리액트는 훅이 functional component안에 들어가야한다는 점 때문에

원하는 대로 코드를 짜기도 힘들었고.. 근데 아마 그건 커스텀훅으로 해결해야했던거같음

게임은 잘 작동하는데 만약 유니티로 네트워크 게임을 안 만들어봤다면 뭐 하나 구현할때마다 개박살났을거같다.

어쨋든 이 글 읽으면서 잘못 안부분, 알면 좋았을 부분 있으면 댓글 남겨놓으면 다음 개발때 참고할수 있도록 하고

읽어주셔서 감사합니다.

[123(122.38)]

오랜만에 보는 웹코드다...

[익명(220.94)]

import 저거 어쩔 수 없긴함 ㅋㅋ 그나마 나은게
https://stackoverflow.com/a/29722646/4295499
이런방식

[익명(220.94)]

웹소켓 없으면 롱폴링같은 사짜기술 써야됨

[파세토막튀김(hmshood439)]

어 이게되면 * as Xx로 import해서 xx.yy로 불러도 되는거엿나

[익명(npe1tqy8nha3)]

아니 이걸 그냥 css 노가다로 디자인했다고?...

[익명(221.140)]

유니티도 파베얹고 웹gl로 빌드하면 웹실행 가능한데

[익명(218.239)]

진짜 개 삽질 해가면서 개발했겠네...

[익명(wkqkel)]

님 저도 처음 갤와서 검색하다가 발견했는데, 이런거 만들어보고싶은데 어떻게 해요? 저도 자바스크립트랑 리액트는 좀 배웠는데, 님 넘사로 잘하시네여..

[파세토막튀김(hmshood439)]

이전에도 유니티 멀티플레이 게임 만들어본적이 있기때문에 아는거에 웹이라는 새로운 스텝을 넣어서 만들수있었던거같음.

[파세토막튀김(hmshood439)]

작은 로컬 보드게임부터, 그다음 멀티플레이, 실시간멀티플레이, 다른 스택으로 같은게임.. 이렇게 할수있는 작은거부터 시작하고 새로운걸 하나씩 추가해나가면 시간은 오래걸리지만 배우는 측면에서 반복학습도 많이되고 점점 큰그림과 그것을 달성하는 작은 스텝들을 구분하게되는거같음

[익명(wkqkel)]

답변 감사합니다. 저는 막 코드가 엄청 더러운데, 저는 이넘이란 것도 이번에 처음 존재를 알게돼서 써보고 그러는데, 막 그런것도 잘쓰시고, 뭔가 코드도 리스너스 해서 엄청 깔끔하게 짜시는 것 같아요. 또 클래스 위주로 짜신다는 거보니 객체지향 이란 거 사용하시는 것같고 막 디자인패턴 이런것도 공부하신건가여?

[익명(wkqkel)]

저는 그냥 암것도 모르고 짜서 다 그냥 하드코딩 돼있는 느낌이고, 함수가 엄청 크고 그런데, 이런 부분에서 님처럼 짜고싶으면 어떻게 해야할까요? 또 혹시 코드를 구경해볼 수 있을까요 ㅠㅠ

[익명(wkqkel)]

책이나 강의 같은거 추천해주실 수 있나요? 저는 요즘 뭔가 자바스크립트 리액트만 했는데, 리액트 강의에서는 객체지향이나 구조적인게 잘 없길래 다른 언어들은 그런걸 강조하는 것 같아서요. 유니티는 어떻게 배우셨나여

[파세토막튀김(hmshood439)]

저는 UDEMY에서 강의 다 봤음. 영어강의라 힘들수도있긴한데 인프런이랑 비교하면 너무 싸고 강의풀도 넓으니까 강점이 되게 쎈거같음. 유니티는 GameDev.tv 강의가 초심자부터 차근차근하면서 상상력을 펼칠수있는 중급자까지 컨텐츠까지 들어가고 중간중간 일반적인 코딩론 이야기도 많이해줘서 진짜 만족스러웠고 클린코드는 Maximilian Schwazrmuller라는 사람거 강의 봤는데 간결하고 좋음. 혼자 개발하는데 디자인패턴까지는 갈 필요없다고 봄 괜히 쉽게짤 코드 어렵게 만드는수있음

[파세토막튀김(hmshood439)]

이거 게임코드는
https://github.com/Zerstorer23/Suzumiya_resistance_coup_web_game
여기에
다 있긴한데
클린코드랑 객체지향 이야기는 결국 짧은 함수 최소한의 중복 이런얘기로 귀결되는거라 클린코드 관련 영상 한번 보고
이미 짠 코드는 어쩔수없고 새로 코드 짤때마다 생각해보면서 짜는거면 충분함..

[익명(wkqkel)]

우왕 감사합니다 자바도 할줄아시네여!! 요즘 자바랑 유니티 중에 고민중이에여.. 프론트 할줄알아서 자바로 백엔드 해보면 좋을 것 같긴한데 게임 재밌을것같기도하고 ㅎㅎ 추천해주신 강의도 보고 코드도 한번 봐볼게요. 혹시 강의 같은거 사면 어떤 식으로 들으시나요? 또 이거 만드는데 얼마나 걸리셨어여??

[익명(121.162)]

클린코드는
https://www.udemy.com/course/writing-clean-code/
이
강의 맞나요?