지난 시간에 튜터님과 이번주까지 마무리하기로 했던 작업은 얼추 완성이 되었다. 순조롭게 진행된 부분도 있고 막혀서 하루종일 삽질한 부분도 있지만, 그래도 완성되어 가는 모습을 보니 감회가 새롭다.
현재까지 진행 완료된 사항😄
서버 - 프론트 페이지 구동 1차 완성!
(1) 기본적인 HTML 틀 잡기
(2) 구글 지도 서울을 중심으로 띄우기
(3) mongodb에 임시 DB 넣기
(4) 임시 DB API로 연결하기
(5) 임시 DB 장소들 지도에 마커 표시하기 (for문 활용)
(6) 카테고리 필터 적용하기 (조건문)
(7) 마커 클릭하면 나오는 인포윈도우 구현하기
(8) 인스타그램 해시태그 후기 크롤링하기
함수의 늪...
그날그날 개발일지를 쓰고 싶었지만, 한동안 밀렸던 이유 중 하나는 바로 인포윈도우 띄우는 작업 때문이다. 아래 링크를 참고하면 금방 끝나는 작업일거라 예상했지만, 생각보다 그렇게 호락호락한 건 없었다...
구글맵 API 이벤트 관련 자료:
https://developers.google.com/maps/documentation/javascript/reference/event#MapsEventListener
구글맵 API 인포윈도우 이벤트 자료:
https://developers.google.com/maps/documentation/javascript/infowindows
내가 기획하고 있는 페이지에는 여러 개의 마커가 있고, 마커별로 인포윈도우가 생성되어야 하는데 아무리 반복문에 넣어도 하나의 마커에만 인포윈도우가 생성되었다 하...😱 원래 성격상 쓸데없이 집념이 강해서 혼자 고민하고 해결하는 것을 좋아하는데, 퇴근 후 이틀 내내 삽질하다가 도저히 이러다가는 다음주까지 페이지를 완성 못하겠다 싶어서 결국 튜터님께 SOS를 요청했다.
삽질하던 코드
$.ajax({
type: 'GET',
url: url,
data: {},
success: function (response) {
if (response['result'] == 'success') {
let bakerys = response['bakerys_list']
for (let i = 0; i < bakerys.length; i++) {
var bakery = { lat: bakerys[i]['latitude'], lng: bakerys[i]['longitude'] }
var marker = new google.maps.Marker({ position: bakery, map: map, title: bakerys[i]['name'] });
//인포 윈도우 생성
contentString = `<div>
<h4>${bakerys[i]['name']}🍞</h4>
<hr>
<p>주소: ${bakerys[i]['address']}</p>
<p>영업시간: ${bakerys[i]['openinghours']}</p>
<p>연락처: ${bakerys[i]['contact']}</p>
<br>
<p><b>#${bakerys[i]['name']}</b></p>
</div>`
marker.addListener('click', function () {
infowindow.open(map, marker);
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
}
}
}
});
코드를 짤 당시에는 반복문 안에서 marker, infowindow 변수가 알아서 하나하나 생성되서 매칭될거라고 안일하게(?) 생각했는데, 함수의 기초 원리를 제대로 이해하지 못해서 생긴 오류였다. 내가 짠 코드에서는 반복문이 돌아갈 때마다 marker, infowindow 변수가 함수에서 새로 생성되기 때문에 앞에서 만들어진건 없어지고 새로 덮어 씌워진다는 것이다.
결론적으로는 반복문을 사용해서 하나의 마커에 하나의 인포윈도우를 생성해주려면, marker1, marker2 /infowindow1, infowindow2 이런식으로 고유의 변수값을 지정해서 marker1→infowindow1 요렇게 연결해야 한다는 것. 설명을 듣고 보니 참 간단한데, 왜 혼자할 때는 잘 안 보이는 건지 모르겠다. 여하튼 어찌저찌 튜터님의 도움을 받아 marker와 infowindow들을 리스트로 만들어주었고, 리스트에 담긴 변수를 하나하나 매칭해주는 식으로 코드를 수정하여 인포윈도우를 띄우는데 성공했다.
수정 코드
$.ajax({
type: 'GET',
url: url,
data: {},
success: function (response) {
if (response['result'] == 'success') {
let bakerys = response['bakerys_list'];
let markerList = [];
let infoWindowList = [];
for (let i = 0; i < bakerys.length; i++) {
var bakery = { lat: bakerys[i]['latitude'], lng: bakerys[i]['longitude'] }
var marker = new google.maps.Marker({ position: bakery, map: map, title: bakerys[i]['name'] });
//인포 윈도우 생성
let contentString = `<div>
<h4>${bakerys[i]['name']}🍞</h4>
<hr>
<p>주소: ${bakerys[i]['address']}</p>
<p>영업시간: ${bakerys[i]['openinghours']}</p>
<p>연락처: ${bakerys[i]['contact']}</p>
<br>
<p><b>#${bakerys[i]['name']}</b></p>
</div>`
var infowindow = new google.maps.InfoWindow({
content: contentString
});
markerList.push(marker);
infoWindowList.push(infowindow);
}
for (let i = 0; i < markerList.length; i++) {
markerList[i].addListener('click', function () {
infoWindowList[i].open(map, markerList[i]);
});
}
}
}
});삽질하면서 느낀 첫 번째 교훈은 아주 당연하게도 기본기가 가장 중요하다는 점이다. 지금 프로젝트를 하면서는 일단 당장 기능 구현해내는데 급급해서, 이 기능이 어떻게 동작하는지 완전히 100% 이해하고 코드를 짜고 있다고 자신있게 말하기엔 무리가 있다. 아무래도 프로젝트 페이지를 완성하고 나면 사용한 코드들 개념을 하나하나 다시 정리하고, 개선할 부분 없는지 곱씹어 보는 시간이 필요할 것 같다.
두 번째 교훈은 정 안되겠을 때는 혼자 괜히 고집부리지 말고 물어보는게 해결책이라는 점이다. 물론 결국은 혼자 하는 작업이니 모든걸 다짜고짜 다 질문할 수는 없겠지만, 진짜 개념적으로 아무리 봐도 이해가 안 될 때는 도움을 청하자😀
현재 인스타그램 후기 크롤링하는 작업도 완료하긴 했는데, 예기치 않게 셀레니움을 사용하게 되어서 개념 다시 숙지할 겸 해당 작업은 따로 정리할 예정!
