⚾️ 직관일기 : 직관 기록하고 직관 승률 계산하는 서비스 개발 일지

직관일기

---

기획 아이디어

올해 야구에 빠져서 정말 직관을 많이 다녔다.

팀의 승률만큼이나 재밌는 건 내가 직관 승요인지의 여부이다. 

직관 기록만을 전용으로 남기는 플랫폼이 존재하지 않기 때문에 (내가 못 찾은 것일수도)

대부분의 야구 팬들이 메모장에 직관 승/패 여부를 기록하고 있었다.

나는 노션에 기록해서 승률을 계산했다.

 

하지만 모든 사람이 노션을 잘 활용하는 것은 아니고, 메모장은 정말 불편하다고 생각했기 때문에

일기 기록 플랫폼과 같이 직관 기록 플랫폼을 만들어보기로 했다.

 

주요 기능

1. 로그인

2. 직관 경기 내용 기록 (CREATE, READ, DELETE)

3. 승률 계산

4. 야구 행운 복권

5. 광고 배너

 

구현 과정

TypeScript, React, styled-components를 사용했고, 호스팅은 언제나 그렇듯이 Google Firebase를 사용했다. (제일 간편하고 관리하기 쉬운 것 같다.)

 

로그인 구현을 위해서 Firebase에서 제공하는 Authentication을 사용해서, 지메일로 회원가입/로그인할 수 있도록 했다.

이 과정에서 OAuth에 대한 공부를 할 수 있었다.

Google 소셜 로그인 구현하기 (OAuth)

 

유저의 직관 기록 데이터는 Firebase에서 제공하는 Firestore를 사용했다. 

유저의 uid를 collection명으로 하고, 문서에 저장한 값은 다음과 같다.

- count (number) : 직관 승률 계산용 (1 : 승, 0 : 패, 무)

- date (string) : 직관 날짜

- location (string) : 직관 구장

- memo (string) : 별도로 기록하고 싶은 내용 (승, 홀, 세, 결..)

- myScore (string) : 우리 팀 점수

- realDate (Timestamp) : 날짜 순 정렬 용 직관 날짜

- vs (string) : 상대 팀 명

- vsScore (string) : 상대 팀 점수

 

 

 

느낀점

확실히 나는 뭔가에 꽂히면 추진 속도가 빠른 것 같다. 이틀 만에 만들었으니 자체 해커톤으로 진행했다고 해도 무방하다.

빠르게 완성시킨 것에 대한 뿌듯함이 있긴 하지만, 나름 컴포넌트 재사용성을 생각하면서 만들었다고 생각했는데 빠르게 만들다보니 코드를 깨끗하게 작성하지 못한 부분들이 있다. 추후 이 부분은 리팩터링을 통해서 정리해야 할 것 같다.

 

이전에 로그인 기능을 구현해본 적이 있긴 했지만, 그 때는 백엔드 개발자가 따로 있어서 내가 신경 쓸 부분이 그렇게 많지 않았는데, 

이번에는 오로지 나 혼자 진행하다 보니 덕분에 로그인 과정에 대한 공부를 할 수 있었다. 

 

Firestore는 NoSQL이다보니 마음대로 데이터를 저장하기 편리했다. 

백엔드 개발자 없이 데이터를 다루고자 할 때 적합한 것 같다.

 

상반기에 학생 창업팀에서 일하면서 늘은 것 중 하나는 피그마 사용법인 것 같다. 

서당개 3년이면 풍월을 읊는다고, 작년에 진행한 토이프로젝트 디자인한 것과 비교하면 훨씬 깔끔해졌다.

 

해커톤... 원래는 별로 안 좋아했는데 이번 경험을 계기로 해커톤 나가고 싶다는 생각이 들었다.

원래 안 좋아했던 이유는 일단 밤새는 걸 별로 안 좋아하고 뭔가 우당탕탕 빠르게에만 집중해서 만드는 게 취향이 아니라고 느꼈기 때문이었다. 그런데 돌아보니 그 때는 내가 (물론 지금도 부족하지만) 기술적으로 정말 초보 중의 초보였기 때문에 정말 간단한 기능 구현도 어려워했던 터라 그랬던 것 같다. 지금은 기본적인 기능은 간단하게나마 바로바로 구현할 수 있는 수준이라고 생각하기 때문에 지금 해커톤에 참여한다면 즐겁게 할 수 있을 것 같다!

 

서비스를 배포했고, 주변에 야구 같이 보러 다니던 친구들에게 사용하게 했는데

실 사용자가 있다는 것에서 오는 보람은 정말 최고인 것 같다.

 

추후 구현할 기능

- 데이터 등록, 수정, 삭제 시 알림창 띄우기

- 직관 기록 수정하기

- 2군 경기 기록

- 타팀 경기 직관 기록

- 상대 팀별 직관 승률 계산