고양이 위치 업로드

길고양이 위치를 지정하는 방법은 여러가지가 있었습니다. 예를 들면

  1. 주소를 입력하고 옵션 중 고르기
  2. 지도를 열어서 마커를 찍기

그러던 중 배달의 민족의 위치설정이 생각났습니다.

마커가 가운대에 고정되어있고 지도를 움직여서 위치를 설정하는 방식입니다.

디자인도 이쁘고 지도의 가운데 좌표를 API로 받아오면 돼서 개발도 빠를 것 같았습니다.

배달의 민족 위치 설정

배달의 민족 위치 설정

네이버 API 문서중 예전버전과 최신버전이 같이 있어서 삽질을 조금 했지만, 전체적으로 작성이 잘 되어있어서 개발에 큰 어려움은 없었습니다. (외부 API를 사용하며 개발해본 경험이 없어서 즐거웠습니다!)

다만 이벤트 핸들링에서 살짝의 고민이 필요했습니다. 모바일에서는 동작하지 않아서 마우스와 터치이벤트가 다르다는 것을 알았습니다.

현재위치 받아오기

이 또한 네이버 API 문서가 잘 되어있어서 쉽게 개발할 수 있었습니다.

HTML5로 웹에서 GPS를 받아올 수 있는 점이 흥미로웠습니다.

API로 업로드 하기

의외로 백엔드에 업로드하는 작업이 오래걸렸습니다.

알고보니 File타입을 보내는 과정에 실수가 있어서 해결할 수 있었습니다. (이미지를 업로드하는 작업은 다시는 안 까먹을 것 같습니다.)

중간 결과

업로드 중간1.png

업로드 중간2.png

https://github.com/nyang-spot/client-cat/pull/4


6일차: 마무리 하기