저희 팀은 기획과 디자인을 모두 완료한 후 개발에 임하는 순서가 아니라, 프로토타입을 토대로 디자인과 개발을 동시에 진행하며 애자일하게 서비스를 만들어가기로 결정했습니다. 때문에 Firebase의 장점을 활용하여 우선 로그인 기능부터 구현했습니다. 투표 등록자가 자기만의 투표를 등록하기 위해서는 유저 정보를 토대로 데이터를 쌓아야된다고 생각했기 때문이죠. Firebase는 Authentication이라는 제품이 있어, 코드 몇 줄만으로도 유저를 생성할 수 있었습니다. 저는 스스로 서비스를 처음부터 만들어보는 것이 처음이었기 때문에, 이 때부터 더 의욕이 고취되며 개발에 가속이 붙기 시작했습니다!
(친구의 축구 팀 이름이 '팀 불개미'였기 때문에 가칭으로 사용하였습니다.)
react-hook-form을 이용해 폼의 다양한 케이스를 손쉽게 적용 할 수 있었고 Auth 기능(회원가입, 로그인, 이메일 찾기)를 완료한 후 바로 건네 받은 프로토타입의 구현을 첫 번째 목표로 설정했습니다. 저는 홈에서 투표 진행 상태를 3가지 분기로 나누기로 결정하였고(투표 시작 이력 X / 투표 진행중 / 투표 결과), 투표 등록하기 페이지를 만들기 시작했습니다.
로그인 페이지와 마찬 가지로 타이틀과 폼, 버튼만 있기 때문에 UI는 마크업은 금방 해내었고 이제 입력받은 데이터를 Firebase에 보내는 작업을 할 차례였습니다.(정확히는 Firebase에서 제공하는 제품인 Firestore)
Firestore는 글로벌 규모의 모바일 및 웹 앱용 데이터를 쉽게 저장, 동기화, 쿼리할 수 있게 해주는 NoSQL 문서 데이터베이스입니다.
그런데 난관은 여기서부터 시작이었습니다. 단순히 투표를 개설하고 투표하는 기능 뿐이라 데이터 구조도 단순할 것이라 생각합니다. 하지만 프론트엔드만 해오던 저로서는 데이터를 직접 설계하는 작업이 처음이었기 때문에 발상이 쉽지 않았고, 그렇게 저는 우악스럽게 부딪혀 나갔습니다… 이 내용에 대해서는 다음 편에 작성하도록 하겠습니다.
