개발일지 68일차

geolocation API

• 현재 자기 위치를 받아오기위해 geolocation API를 사용
• getCurrentPosition메소드를 사용해 위치정보 동의를 수락했을때 사용자의 현재 위치를 받아옴

   navigator.geolocation.getCurrentPosition((position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        const location = {
            latitude,
            longitude,
        };
        sendmessage(location);
    })

socket을 이용한 위도경도 서버로 보내기

• socket 엔드포인트설정

 const socket = io.connect("http://localhost:3000/navigation", {
        path: "/socket.io",
        transports: ["websocket"],
    });

지도 API 문제정리

• 카카오 map API에서는 자체적으로 가지고 있는 데이터들의 정보를 마커로 찍어줄 수 있으나 길찾기 기능을 사용하려고 할때 카카오 지도라는 외부 링크로 넘어가기 때문에 자체적으로 가지고있는 데이터와 사용자의 현재위치간의 길찾기 기능을 수행하기 어렵다고 판단함
• 네이버 map API역시 길찾기 기능을 제공하지만 웹 앱에서는 외부링크로 넘어가야하고 nmap이라는 프로토콜로 접근하면 지도 길찾기가 사용가능하지만 앱에서만 사용가능하기 때문에 우리가 원하는 기능을 수행하지 못함
• 구글 map API는 지도가 가독성이 떨어지고 자체적으로 가지고 있는 데이터를 화면에 띄워주는것 부터 어려워서 사용하지 못함

구원자 Tmap API

• TMAP API는 우리가 가지고 있는 자체 데이터를 마커로 지도에 띄워 줄 수도 있고 현재 사용자의 위치를 받아 길찾기 기능도 수행 할 수 있는 최고의 지도 API였다.
• 하지만 TMAP API는 카카오나 네이버에 비해 자료가 많이 적었고 리액트에서 구현하기 어려운 부분들이 많았음(호환성? 모듈?)
• TMAP API의 또다른 문제로 하루에 API 사용량이 APP KEY 1개당 1000번으로 정해져 있어 30만개인 카카오에 비해 턱업이 부족한 사용향을 가지고 있는 문제

돌파방법

• 고안한 방법으로는 지도에 전체 데이터의 마커와 정보를 띄워줄때는 카카오 MAP API를 사용하여 마커와 전체 데이터의 정보를 띄워주고 길찾기 버튼을 눌렀을때만 TMAP API를 사용하여 TMAP의 길찾기 기능을 가져가고 API사용량을 최소화 하며 마커를 손쉽게 띄워줄 수 있게 되었다

테스트

• tmap api를 사용하여 간단한 html과 js코드 작성후 배포하여 서버에 로그가 찍히는지 확인
• 서버에 로그가 잘 찍히고 소켓과도 연결이 잘 돼서 서버로그에 사용자의 위경도가 잘 나타남

문제점

• 위도,경도가 튀는 현상발생
• 사용자의 위치가 바뀔때마다 계속해서 start 마커를 찍는 현상
• 사용자의 현재위치를 나타내줄 수 있는 방법고민 => watchpostion 메소드??

현재

• 길찾기 기능이 잘 수행되고 있고 사용자가 움직일때 마다 사용자의 위치를 표시해 줄 수 있는 방법 고민
• 현재는 서버와 소켓으로 통신하지 않고 있지만 만약에 서버와 소켓통신을 하면서 위도 ,경도를 주기적으로 보낼때 전달받은 위도,경도를 서버에서는 어떤방식으로 활용할 수 있을지 고민 => 사용자가 마지막으로 방문 했던 푸박스를 띄워주는 활용방법, 사용자들이 가장 많이 방문한 푸박스위치에 별모양 아이콘 추가?