React, Firebase, KakaoMap 기반 중간지점 찾기 앱 '야만나' 프로토타입 개발기

완성된 버전 - https://ya-manna.com

 

본 글은 구체적인 설명이나 코드가 들어있지는 않습니다.
그냥 자연스럽게 프로토타입을 만드는 과정을 일기처럼 쓴 글입니다 편하게 읽어주세요 ^^

 

완성된 프로토타입  - https://yamanna-6ebcd.firebaseapp.com/

야만나

github - https://github.com/mandooro/YaManNa

'카카오톡에서 링크로 공유해서 실시간으로 서로의 위치를 공유해 중간지점을 찾아주는 앱'

 

우리가 원하는 바는 명확했다. 친구들과 약속 잡을 때 중간 위치를 정확하게 잡아주는 기능,

 

종이에 간단히 그린 스토리보드

일단 종이에 간단히 스토리보드를 그리고 하고 간단히 프로토타입 개발을 하기로 했다.

 

일단 필요한 스펙을 함께 고민해봤는데,

프론트는 요즘 사람들이 잘 쓰고 있는 React

백엔드는 간단하게 서버 구성이 가능하고, 실시간db를 지원하는 firebase를 백엔드 서버로 쓰기로 했다.

지도 같은 경우엔 카카오톡에서 주로 사용할거니까 그냥 KakaoMap으로 결정!;;

 

프로토타입이니까 아무 생각 없이 react 프로젝트를 시작하는 가장 편한 방법인 create-react-app으로 시작!

얼마전에 V3가 나온 것 같은데, 일단은 자료가 많을 것 같고 비교적 최신인 V2로 시작했다.

 

그리고 구글링을 해서 밑도 끝도 없이 초기화면을 다 지워버리고 카카오맵을 장착!

밑도 끝도 없이 지도를 넣어버렸다.

 

이제 지도를 넣었으니, 내 위치를 찍을 차례다. 구글링을 해보니, html5에서 기본으로 지원해주는 기능이 있다고 한다.

이제 샘플 코드를 복붙해서 내 위치를 찍어보는 차례이다.

 

구글링을 해서 위치를 받는 코드를 보고,

카카오맵 api문서에서 위도와 경도를 받아 마커를 찍고, 그곳으로 지도를 옮겨주는 방법을 찾았다.

 

간단히 복붙을 한 뒤, 잘 동작하는지 확인해본다.

 

아주 잘나온다

성공! 위치를 찍는데 성공했다.

html5에서 위치를 받아오는 기능은 https나 localhost 환경에서만 돌아간다고 한다.

나중에 배포했을 경우 https 환경을 해야하는 것을 메모해둔다

이젠 내 위치를 db에 저장해야한다.

db는 firebase의 realtime database를 쓸 것이다. 이유는 사용량이 적으면 무료이고, 사용하기 쉽고, 실시간 db이기 때문이다.

firebase는 키,값의 형태로 모든 데이터를 저장한다.

 

그런데 그 사이에 firebase에서 새로운 db를 내놨다. cloud firestore라는 db인데, 잠깐 검색해보니 좀 더 좋은 기능이 많은 것 같다.

하지만 프로토타입을 개발할 때는 최대한 빨리 사용하는게 좋다고 생각이 되기 때문에, firebase realtime database를 쓰기로 했다.

 

구글링을 해서 firebase 사용법을 간단히 찾은 후에 그대로 따라해서, db에 데이터를 저장한다.

key:value로 저장되는 firebase의 특성

성공! 이젠 내 위치 뿐만 아니라, 상대방의 위치를 저장하기 위해서,

내 key값을 저장해서 url로 만들어 친구들과 공유할 수 있는 기능을 만들어야 한다.

그러면 친구들에게 공유할 url을 만들기 위해 route 기능이 필요하다고 판단해, react의 route library인 

react-router-dom을 설치해서, 간단한 튜토리얼을 따라해보기로 한다.

 

먼저 파라미터를 설정하고, 파라미터가 잘 받아지는지 확인한다.

 

파라미터가 잘 받아지는 걸 확인한 뒤, 같은 기기가 동시에 접속할 경우에도 db에 저장이 되는 문제를 발견하고,

이를 처리하기로 한다.

찾아보니 기기의 고유 id를 받아오는건 웹에서 불가능하다고 한다.

 

그래서 사람들은 쿠키를 사용하고 있었고, 이 프로토타입에선 쿠키 설정하는 것도

귀찮아서 브라우저 고유 저장 장소인 localstorage를 사용하기로 했다.

 

로컬스토리지에 키값을 넣어서, 키값이 있으면 더이상 데이터를 집어넣지 않는다.

 

 

데이터 저장 성공

 

데이터가 잘 저장되고, 중복 기기 방지 기능도 잘 동작한다

 

이제 위치를 뿌려주고, 중간 위치를 찾아주기만 하면 성공!

 

중간위치의 계산은 프로토타입이니 간단히 위도의 평균과 경도의 평균으로 하기로 한다.

 

데이터를 다 읽어와서, 각자의 위치와 중간 평균 위치를 뿌려주고,

새로운 사람이 접속했을 시 중간위치 마커를 지운 뒤, 다시 새로운 중간 위치 마커를 찍어주는 작업만 하면 완성!

 

이 부분은 아까 마커를 찍어볼 때 했던 것들이라, 어렵지 않았다.

 

성공!

https로 배포하는걸 고민했었는데, firebase의 hosting 기능은 기본적으로 https여서 고민할 필요가 없었다

 

프로토타입 개발 끝!

 

이제 어떻게 동작하는지 대충 실험을 했으니, 코드를 처음부터 다시 짤 일만 남았다.

 

안녕!