오늘의 할 일
지도 마커 구현위치 기반 가이드 카드 서버 요청 구현가이드 카드 state Redux 관리dispatch를 이용한 가이드 카드 리스트업
🍊 오늘의 정리
🍉 kakao map 이동 이벤트
kakao.maps.event.addListener(map, 'center_changed', function () {
console.log('mapEvent');
let latLngparams = getInfo();
getGuideCards(latLngparams).then((data) => {
dispatch(guideCardInfo(data));
createMarker(data);
});
});
'center_changed' 이벤트를 사용하여 지도가 확대, 축소, 이동되었을 때 좌표를 얻고 좌표에 있는 가이드 카드를 얻기 위해 GET /map 서버 요청을 구현하였다.
하지만 위에서 보이는 것처럼 지도 위에서의 모든 움직임에 서버요청이 보내지게 되어 서버 부담이 우려되었다.
그래서 모든 움직임에 적용되는 이벤트가 이동, 확대, 축소 움직임이 멈추었을 때, 마지막 값만으로 좌표를 얻고, GET 요청을 보내도록 구현하였다.
처음에는 setTimeout과 같은 비동기 작업을 해주어야 겠다고 생각했지만, 카카오 api를 확인한 결과 내가 원하는 기능을 제공하는 함수를 발견하게 되었고, 이를 적용하였다.
//* 지도 이동 이벤트 발생
kakao.maps.event.addListener(map, 'dragend', function () {
let latLngparams = getInfo();
getGuideCards(latLngparams).then((data) => {
dispatch(guideCardInfo(data))
createMarker(data);
});
});
//* 지도 확대, 축소,이벤트 발생
kakao.maps.event.addListener(map, 'zoom_changed', function () {
let latLngparams = getInfo();
getGuideCards(latLngparams).then((data) => {
dispatch(guideCardInfo(data))
createMarker(data);
});
});
🍉 위도 경도 데이터 타입
Datatype.Double
Datatype.Float
🍉 초기 렌더링 시 모든 카드 가져오기??
초기 계획
처음 지도페이지로 들어왔을 때 모든 가이드 카드를 보여주자는 것으로 의견이 모아졌고, 이를 구현하려고 했다.
하지만, 구현하다보니 모든 카드를 보여줄 필요가 있는가?라는 생각을 하게 되었다.
우려 사항
만약 수백개의 가이드 카드가 전국에 분포되어 있다면, 첫 로딩이 느려질 것이다. 모든 가이드 카드를 유저가 사용한다면 감안할 수 있지만, 유저가 자신이 원하는 지역의 가이드 카드만 원한다면 불필요한 서버 낭비로 이어지게 되는 것이다.
또한 여행자 특성상, 여행 지역이 뚜렷하게 정해져있기 때문에, 모든 카드를 불러올 필요는 더더욱 없을 것이라는 생각이 들었다.
변경
첫 렌더링에는 서울 지역을 중심으로 카카오 지도 좌표 안에 들어오는 가이드카드만 요청한다.
🍊 DevLog
🍉 코드작성 전에 생각부터 하자
오늘은 어떻게 프로젝트에 기여했나요?
- 카카오 지도 마커 구현
- 위치 기반 가이드 카드 서버 요청 구현
- guide card redux 상태관리 추가
오늘 프로젝트에서 힘들었던 점은 무엇인가요?
- 처음 잘못 계획한 웹, 모바일 레이아웃으로 아직도 어려움을 겪고 있다. 원하는 방향으로 모바일을 구현하려면 웹의 레이아웃을 전체적으로 수정해야 하는데, 많은 시간이 소요될 것 같아서 고민중이다.
오늘 프로젝트에서 아쉬웠던 점은 무엇인가요?
- 특정 기능을 구현할 때 어떤 특징의 태그를 사용해야하는지에 대한 고민이 더 필요한 것 같다. gender 선택 버튼을 구현하려고 했을 때, 생각없이 그냥 div 태그로 구현하기 시작했다. 하지만 작성하다보니 input radio를 쓰는 것이 더 적절하다는 것을 알게 되었고, 뒤늦게 코드를 수정하게 되었다.
해당 기능의 특징을 생각하고 코드 작성 전에 조금만 고민해 보았다면 하지 않았을 실수였을 것 같다.
특정 기능을 구현하기 전, 전체적인 프레임과 특징을 정리한 후 시작해야겠다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- 가이드 모달 REST API 수정, GET 서버 요청 구현
- 지도 맵 반응형 수정
- 날짜, gender 필터링 구현
start coding