#0 초기 구상 및 현재까지 작업 정리

음.. 우선 개요부터 설명하자면,

예전부터 텍스트로만 구성된 간단한 웹 RPG게임을 자주 만들었었는데

 

이게 어느정도 수준에 오르니까 유저들이 직접 나무위키도 만들어주고..

뭐 이런저런 사건사고가 많았다. 운영이나 좋아해주시는 분들도 많았는데,

정작 게임물 관리 등급 위원회에서 제지를 받아서 서비스를 종료하긴 했지만..

 

따라서 이번엔 그냥 한국에서의 영향을 받지 않게끔. 아예 영문으로 제작하고,

해외에 배포를 해보기로 결정했다. 현재 서비스중인 도메인을 그대로 쓸 예정이고.. 음

현재 서비스중인 비영리 웹게임은 천천히 어느정도 런칭 준비가 되면 그때가서 오픈채팅에 공지를 하고

옮길예정..

 

최초 서비스 됐던 프로젝트는 순수하게 html, js, css 만을 이용했었는데,

여기서 발생했던 장단점은

 

Vanilla JS

- 장점

유저 객체의 클래스 관리가 굉장히 쉬웠다.

순수 html,css,js 만으로 SPA를 구성했기에 유저객체 자체가

지속적으로 유지되어서 클래스가 유지되기 쉬웠고,

각 페이지에서 render 함수를 이용하여 페이지에 들어가던 내용들의

업데이트에 힘듦이 없었다.

 

- 단점

매번 페이지를 만들때마다 SPA방식으로 구현하다 보니,

신규 페이지를 추가하는것도 너무 귀찮고 번거롭고 힘들었고

기존 페이지에 무언가 새로운 기능을 추가하는것도 힘들었다.

 

두번째로는, 사용자가 F12 개발자 도구를 눌러 직접 JS를 수정하면

뭐랄까.. 해킹? 클라이언트 변조? 비슷하게 조작이 가능했다

(추후 빌드 전에 gulp를 이용하여 코드를 암호화 했다.)

 

React.JS

위의 단점을 보완하기위해, 두번째 프로젝트는

react.js를 이용해서 작업을 했었는데, 이때는 따로 서버를 구성하지 않고

firebase realtime database를 이용했었다.

여기서 또 새로운 장점과 단점을 확인할 수 있었다.

 

- 장점

손쉬운 기능  추가 및 페이지 추가.

일단 기본적으로 리액트다 보니까 페이지 추가 및 기능추가가 쉬웠다.

매번 스크립트를 새로 작성할 필요도 없고?..

뭐 이거 외엔 장점은 딱히 없던것 같지만,

그나마 개발이 굉장히 빨랐어서 좋았다.

아, 이때는 리액트 기반으로 간단한 CMS 페이지도 추가했었다.

 

- 단점

useState를 많이 사용했는데, 유저 객체 내부의 값이 변경될때는

자동으로 리렌더링이 되지 않았다. 뭐.. 대충 찾아보니 얕은복사? 와 깊은복사? 문제였던것 같은데..

여튼 그래서 매번 force-render 함수를 실행해줘야했는데, 이부분이 뭔가 굉장히.. 음..

뭐랄까.. 번거롭고 귀찮고 리액트 자체의 근본적인 목적성을 잃게하는 느낌이라 기분이 별로 좋진 않았다.

 

두번째 단점은, 비용적인 문제였는데

일단 리얼타임데이터 베이스 자체가 굉장히 비쌌고,

(그리고 뭔가 트렌젝션같은 문제로 종종 롤백이 일어났었다.)

동시접속자 수 200명 정도에서 한달에 40~60만원의 서버비가 발생됐었다.

다행히 유저분들에게 사정을 설명하자 한푼 두푼 모여서 오히려 수익이 발생하긴 했지만..

그걸로 인해 게임물관리등급위원회에게 제지를 받아 서비스를 종료하게 되었다.

 

뭐.. 이것 외에도 단점이 많았다.

좋았던점은 정말 그냥 개발하기가 편했던것?.

근데 순수하게 자바스크립트가 메인인 나로써는

DOM 렌더링 외에는 크게 와닿은 부분은 없었다.

오히려 더 불편한 느낌?..

 

Next.js(현재 진행중)

딱히 위의 해결책의 근본적인 해결법이 될 것 같진 않지만,

다양하게 해보고 싶은 마음에 next.js와 vercle을 이용한 배포를 해보기로 결심했다.

(기존엔 firebase, 혹은 ec2 + express.js)

 

DB도 vercel에서 지원해주는 @vercel/postgresSQL을 사용하기로 하고..

일단 초반 부분 개발 진행중인데,

 

어.. 확실히 편한것도 있고, 불편한점도 있다.

아무래도 내가 next.js를 잘 몰라서 그런것도 있고,

기존에 자바스크립트도 고여서 새로운걸 안배우려고 하다가

새로 접하는 부분들도 있고 해서 그런것 같다.

 

앞으로 종종 포스팅에 진행상황과

발생했던 문제들, 해결 방법에 대해 포스팅 해보려고 한다.

 

일단 현재까지 발생했던 문제점들은,

 

1. vercel postgres에 데이터를 저장했으나 next.js 앱에서 요청 시 계속 오래된 데이터를 반환함.

https://frontend-bear.tistory.com/136

@vercel/postgres 오래된 데이터가 나오는 경우 해결법

 

위의 이슈를 해결하고 insert를 실행하자

syntax error at or near "$1" 에러가 발생했고,

https://frontend-bear.tistory.com/137

[@vercel/postgres] syntax error at or near "$1" 에러

 

이러한 방식으로 해결했었다.

 

이후 저기에 대해 알아보고 '태그드 템플릿'에 대해 공부하게 되었다.

 

https://frontend-bear.tistory.com/138

태그드 템플릿(Tagged Templat)이란?

 

역시.. 사이드 프로젝트가 공부에는 최고인것 같다.

그럼 이후 기록들은 추가적으로 포스팅을 작성해보겠다.

 

끝.