nextgame.me - react webapp with cursor ai

nextgame.me

cursor.ai를 한번 사용해보려고 생각하고 있다가 이주전 토요일에 작업을 시작해봤다. 뭘 해볼까 하다 생각난 것이. 주기적으로 폐지줍는 게임¹을 시즌 시작할때 잠깐 달렸다가 짧게 그만두는 걸 반복하는데 이런 플레이어들이 꽤 많다는 걸 알고 있다. 짧게 하지는 않더라도 최소 비슷한 게임 시즌이 시작할때 달리는 사람이 무조건 있다는걸 알고 있다. 그래서 해당 게임들의 현재 인기 순위를 보여주고 새 시즌이 시작할때 카운트다운 타이머를 보여주자는 개념으로 만들어보기로 했다.

그래서 직접 코딩해본적이 없는 react²를 이용하여 웹앱을 만들기로 하고 해봤다. $20 결제로 프로 라이센스를 받아서 해봤다. 한번 사용해볼만은 했는데 아직 이거다 싶지는 않았다. 어느 정도 기존 코드의 파일들을 검색해주고 수정해주는 정도인데, 모델에 따라 정확도가 아직 높지 않았다. 한번 트라이는 꼭 해봐야 하다고 느껴지긴 했다.

배경 화면으로 개인취향인 synthwave³의 분위기를 취하고 배경으로 별들이 360도 회전하는 우주 배경을 넣어봤다. https://nextgame.me/bg 처럼 열면 배경을 볼 수 있다. 수학 계산을 너무 못한다. 한번에 해주질 못하고 10번이상 수정 했음에도 돌아가지 않아서 코드를 절반이상 직접 수정 했다. 그래서 전반적으로 좀 하자가 있는데, 이건 나중에 수정해야겠다.

작업 프레임워크

최초에는 react + node.js api backend + db 로 하려고 디자인하고 코드도 어느 정도 작성했다가 이러면 직접적인 서버 비용이 나가니 잠깐 생각해봤다. 그래서 실시간 기능을 줄이고 일단 1시간 단위로 데이터를 배포시에 긁어서 생성하는 방식으로 정적 웹앱으로 선회를 했다. 이렇게 하면 배포가 무료인 github action과 cloudflare pages를 이용하여 무료로 서비스를 운영할 수 있다. (본 blog도 같은 방식으로 서버 비용없이 운영중이다.)

그리고 cloudflare workers를 이용하여 추가 실시간 기능도 좀 넣어봤다.

결론?

본 글은 nextgame.me 사이트에 개선사항을 받기 위해 어거지로 댓글 창을 이용하려고 글을 작성하기 시작했다. 그래서 아무런 결론을 내지 않고 여기서 끝내겠다. nextgame.me에 대한 의견은 여기 댓글로 남겨주길 바란다.