190314 TIL 프로젝트 - geolocation && map API && 디자인 기획

Mar 14, 2019 » 1막, TIL (Today I Learned)

프로젝트

geolocation

사용자 위치 받는 게 필요해서 HTML5 geolocation 기능을 사용했다.
HTTPS 환경에서만 사용할 수 있다고 해서 로컬 호스트에선 못하나!!! 겁먹었는데, 로컬 호스트에서도 된단다.
알고보니 내 맥 privacy 설정에서 위치추척을 disabled해서 그런거였음~ 삽질 잼.

근데 나중에 실제로 서비스 구현하게 되면 SSL certificate을 받아야할텐데, 슬쩍 찾아봤더니 유료던데… 팀원들과 논의해봐야됨.

map API

geolocation을 기반으로 받은 좌표값으로 근처 영화관을 찾아주는 방법을 고민했다.
처음에는 1) 좌표 -> 주소로 변환한 뒤 2)주소+영화관으로 지도에서 검색 후 3)처음 뜨는 값을 넘기려고 했는데, 다음 API에서 카테고리별 장소 검색하기 라이브러리 샘플이 있었다. 문화시설 (CT1)을 검색해서 그 중 영화관을 골라내는 방식으로 생각보다 쉽게 구현할 수 있었다!

const places = new daum.maps.services.Places();

const callback = function(status) {
	let theaterName = [];
	status.filter((v) => {
		if(v.place_name.match(/CGV|롯데시네마|메가박스/g) && Number(v.distance) <= 2000) {
			theaterName.push(v.place_name);
			return true;
		}
	})
	console.log(status,theaterName);
}

navigator.geolocation.getCurrentPosition(function(position) {
	// CT1 === 문화시설
	places.categorySearch('CT1', callback, {
		location: new daum.maps.LatLng(position.coords.latitude, position.coords.longitude)
		// location: new daum.maps.LatLng(37.663986, 127.07607510000003)
	});
});

디자인 기획

이제 기본적인 api 구현은 했으니 디자인을 좀 더 구체적으로 할 필요가 있었다.
그림으로 그린 후, PPT를 이용해서 대략적인 시안(?)을 만들었다.
내일부터 구현해보기로 함!