[프로젝트명: 롤 내전 도우미] 첫 프로젝트를 Next.js에서 Spring으로 Migration해보자!

당근박쥐·2024년 5월 5일
1
post-thumbnail

서비스 소개

URL: https://lolcivilwarhelper.vercel.app

서비스명: 롤 내전 도우미
주요 기능: 라이엇으로부터 소환사의 정보를 불러오고, 양 팀의 티어 차이가 적도록 팀을 짠 결과를 보여줍니다.

프로젝트를 만든 이유

친구들과 롤 내전을 자주 즐기는 편인데, 매번 팀을 밸런스있게 짜는게 귀찮아서 만들게 되었습니다.

티어가 비슷한 2명을 팀장으로 뽑고, 가위바위보로 한명씩 뽑는 방식으로 진행했습니다.
큰 문제는 없지만, 종종 압도적인 팀차이로 한쪽이 고통받는 팀 게임이 발생했습니다.(a.k.a 밸붕)

"수치화된 지표들을 통해 좀 더 밸런스 있게 팀을 짜고 싶다"는 생각으로 롤 내전 도우미를 완성하게 되었습니다.

#과거 게임 로그인 화면

#나의 프로젝트 디자인

  • 게임 로고를 직접 쓰다가, "Riot Games의 게임 로고를 직접 사용하는건 허용하지 않는다"는 조항을 보고 온라인 ppt툴로 로고를 직접 만들었는데...
    바꾸자마자 퀄리티가 갑자기 리꿔 오브 레쟌두가 되었다...(디자이너님의 소중함...)

    #메인 화면
  • 내전할 인원 10명의 정보를 드래그를 통해 배치후, 모드를 선택한 뒤, 팀 짜기 버튼을 누르면 결과가 나온다.

Next.js -> Spring으로 Migration할 겁니다.

"일단 맛을 보자"라는 마인드로 html, css, Next.js, git을 youtube, blog들을 보면서 기본기없이 야매?로 배워 적용했습니다.
필요한 부분들을 바로 바로 적용하여 결과물이 눈에 바로 보이니, 너무 즐거운 3개월이였습니다.
(현재까지 운영중에 있는데, 금,토,연휴전날과 같은 내전하기 좋은 날에는 일 평균 15명의 유저분들이 사용해주시고 있습니다. 첫 프로젝트라 허접하지만 꾸준히 사용해주셔서 너무 감사합니다❤️)

덕분에 웹 개발의 큰 흐름을 빠르게 경험했지만, 구현하기에 급해, 한눈에 보고 이해하기 어려운 코드들과 구조들, 중복되는 코드들로 특히 유지보수가 힘들다는것을 계속 몸소 느꼈는데요,

개발자의 꿈을 꾸게된 저는, 채용사이트에서 가고 싶은 회사들이 사용하는 기술들을 비교하였고, java(Spring), js(Node.js) 두개의 선택지를 후보에 두었습니다.

  1. 가고싶은 회사가 사용하는 기술
  2. 전반적인 프로그래밍 방법론인 OOP (웹 개발 뿐만 아니라, 추후 게임개발자로서의 가능성을 고려하여)

최종적으로, 이 두개를 고려하다 보니, java Spring을 공부하게 되었습니다.

앞으로 게시할 내용들

#BackEnd

  • Next.js APi Server -> Spring Server로의 Migration하는 과정
  • trouble shooting
  • Logging
  • 부하 테스트, 모니터링, 최적화

#Front End

  • css 개선 및 작은 이슈들 해결

#공통 부분

  • [미확정] 커뮤니티 기능 추가(분류:내전 용병 구하기, 내전 클랜원 모집, 스크림 상대 찾기, 자유 게시판)
  • [미확정] 포지션까지 고려한 팀 짜기 프로젝트?

Git Repo

Next.js(legacy): https://github.com/carrotbat410/lol-team-maker
Spring(백엔드 분리중): https://github.com/carrotbat410/spring-lol-team-maker

profile
Starting the day with "git pull," it's good for mental health.

0개의 댓글