하고싶은대로##

저번에 언급한 Place SearchBox 기능을 추가했다.

검색을 하면 그에 해당하는 장소(들)이 나오는 API는 구글 api 공식 문서를 참고해서 추가했다.

원래 javascript Map Api만 있었는데, Places API도 추가해야했고, 

검색해서 추가된 마커들을 클릭했을때 반응하도록 Listener를 마커마다 추가를 했다.

다만 클릭했을때 그 위치로 위치추가 마커를 이동하는 법을 몰라서 그 부분은 구현을 하지 못해서 

현재는 마커를 드래그 앤 드롭으로 가져다 두어야한다.

google.maps.event.addListener라는 매쏘드가 있어서 마커를 이동할 때마다 그 정보를 실시간으로 받을 수 있었다.

그리고 그 정보를 입력창에 보여줌으로 위도 경도 정보를 보여줄 수 있었다.

이걸 위도 경도를 입력창에 이동하면 마커도 이동하게 바꾸고,

SearchBox라는 기능을 사용하여 장소를 검색할 수도 있게해야겠다.

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

오랫만에 수정했는데, 방학이 끝나기 전에 다른 기능들도 다 넣어야겠다.

일단 DNS도 공부하여 넣어야겠당,,

항상 느끼는 건데 이런 구글링을 통한 막개발이 의미가 있을까,,,

일단 카페 좌표 값까지 입력하면 지도상에 마커로 위치 표시까지 했다.

근데 이제 앞으로 뭘 해야할지 모르겠다.

현재 생각하는건

DB에 데이터 삭제 추가를 좀 더 쉽게 관리하기 위한 관리자 페이지, 

현재는 우분투 들어가서 DB 접속 후 관리해야한다.

이 과정이 불편하므로 관리자 페이지를 하나 만들어야겠다.

그리고 redis를 이용하여 DB에 데이터가 많아질 경우에도 속도 저하가 없게 하고,

구글 맵을 이용할 때, 사용자가 직접 좌표를 찍어서 카페의 위치를 입력할 수 있도록 하는 기능

그리고 사용자가 입력한 것을 바로 보여줄 것인지 아닌지도 생각해봐야할 것 같다.

그리고 DNS,

https를 이용해서 현재 위치 받아주는 것 까지

이 기능들을 추가할 예정인데 생각보다 할 것이 많아지는 것 같다.

데이터베이스를 짜는데 고민이 많다,,

일단 비밀번호를 사용자가 추가했을 때, 이것을 관리자의 승인 이후에 보여주고 싶은데,

이것을 사용자가 입력한 DB와 보여주는 DB를 동일하게 둔 후에, boolean 변수로 사용자들에게 보여주냐 마냐를 결정할 것인가

아니면 DB를 다르게 두어서 검증 받은 내용만 옮겨줄 것인가가 고민이 된다.

그리고 primary key로 어떤 것을 넣을지도 고민이 되구,,,

현재 생각하는 DB는 이런 형태인데, 뭘 더 넣거나 빼야할지 고민이다.

사실 자료형도 고민이 된다,,, 위도나 경도는 소숫점 아래로 많이 내려가는데 

이에 해당하는 자료형이 적절하지 않아서 일단은 숫자가 아닌 문자로 넣었다.

DB 잘못 만들면 데이터 다시 다 넣어줘야하는데 걱정이 크다,,

현재 위치를 받아올 방법이 없으니 지금은 원래 위도와 경도 안 받는 DB는 사용자가 추가하는 용도로 두고

새로 만든 DB를 바탕으로 사용자에게 정보 제공해야겠다.

제대로는 아니지만 대충이라도 계획서를 그려봤다.

지도를 사용하느라 넣어봤는데, 구글 맵 키 등록하고, 가입하고 했는데

생각보다 api 사용법이 간단해서 역시 구글인가 싶었다.

현재 위치는 geolocation으로 받았다.

로컬 환경에서는 잘 돌아갔는데, 배포하니까 안돌아간다,,,

getcurrentposition no longer work on insecure origins 

이라는 문구가 뜨면서,,,

찾아보니까 보안문제라고 한다.

현재 위치를 받아오는 것은 보안 문제로 2015년 즈음부터 막혔다구한다,,,

https을 사용해야 가능하다고 한다,,,

이건 나중에 해결책을 찾아봐야겠다,,,

다행히 다른 건 해결했다,,

그 때문인지는 모르겠는데 위치 정확성이 너무 떨어진다,,

옵션으로 정확도 높히는 모드?로 했는데도 매우 낮다,, 1km 정도 오차 있는듯,,,

그리고 node js에서도 문제도 발생했는데

Cannot GET /stylesheets/style.css나

cannot get /html page 같은 문제가 발생했는데

로컬에서나 firebase나 netlify처럼 정적인 배포와 차이가 있는 것 같다..

지도나 위치 관련해서 api가 편하긴한데 언젠가 한 번 직접 만들어보고 싶다 ㅎㅎ

MariaDB와 node.js & express를 이용한 aws ec2에서 배포한 와이파이 저장 서비스,

카페에서 공부하다가 갑자기 꽂혀서

저녁 9시부터 새벽 1시 40분까지

중간에 쉰 것 빼면 약 4시간 정도 걸린 서비스를 만들어봤다.

웹에서 짜니까 웹에 최적화되게 나와서,

막상 모바일에서 돌리니까 글자 크기 너무 작아가지고,

UI 찾아서 좀 맞추느라 시간 더 뺏겼다.

DB 모델이나 그런건 급하게 만드느라 대충 만들어서 나중에 제대로 다시 짜서 데이터 넣어야겠다.

ec2 너무 느려서 답답해서 힘들었당,,

확실히 로컬 서버가 아니면 잘 돌아가는지 로그 보기가 좀 힘든 것 같다,,

실제 배포 단계에서는 로그를 보고 디버깅하는 것에 대한 배움이 부족한 거 같다,,

4시간 한 것 치곤 만족스러운 결과 ㅎㅎ

git에 공개로 배포할라했는데, DB 비밀번호가 js 파일에 담겨 있길래 private으로 올렸다,,,

올릴 때 이런 거 고려 잘 하고 올려야겠다.

git 사용할 때, 아직 부족한 점이 많은 것 같다... 깃 안에 깃 또 init해서 문제 생기고,,

제일 문제는 merge할 때 익숙하지 않아서 이 방법 좀 잘 익혀야겠다.

아래는 실제로 배포 중인 서비스 ㅎㅎ 

ec2 노는 게 아까워서 만들어봤당

http://ec2-52-13-31-111.us-west-2.compute.amazonaws.com:8085/