[TIL] 2023. 1. 26. Kakao Map API 프로젝트
✅ 오늘 한 일
Kakao Map API 프로젝트
1. 검색결과, 마커 클릭 시 지도 이동 후 오버레이 생성
https://github.com/heereal/Jasmine/pull/11
개요 🔎
- 검색결과 또는 마커를 클릭 시, 지도 이동 후 오버레이 생성하는 기능을 추가했습니다.
작업사항 📝
- Overlay 컴포넌트를 생성했습니다.
- 마커 클릭 이벤트를 변경했습니다.
- 기존: 지도 이동 -> 변경 후: 라우터에 파라미터 전달
kakao.maps.event.addListener(marker, 'click', () => navigate('/map/${store.ESNTL_ID}'));- 라우터 변경 시 지도를 이동하는 기능을 추가했습니다.
bookstoreId가 있을 경우, 지도 확대 & 해당 서점 좌표로 이동 후 오버레이 표시bookstroeId가 없을 경우 (/map 경로), 초기 좌표로 이동 후 축적 리셋
2. 현재 위치로 검색하기
https://github.com/heereal/Jasmine/pull/14
개요 🔎
- 내 위치로 검색하기 버튼 클릭 시, 5km 반경 내 서점 목록과 마커를 표시합니다.
작업사항 📝
- 현재 위치를 가져와 지도의 중심을 이동하고, 5km 반경을 표시합니다.
- 5km 내 서점 목록을 전역 DB에 업데이트 합니다.
- 검색 결과를 업데이트 하고 마커를 재생성 합니다.
3. 환경변수 설정
https://github.com/heereal/Jasmine/pull/13
개요 🔎
- kakao map 환경변수 설정
- firebase 환경변수 설정
💡 오늘 배운 것
- useCallback - 함수를 저장하는 hook
- Recoil - 전역 상태를 관리하는 라이브러리
💭 오늘의 잡담
잡다한 기능 하나 더 구현하는 것보다, 구현했던 핵심 기능을 글로 쓰며 정리해보는 시간이 훨씬 더 도움이 된다.
머리로는 아는데.. 프로젝트 하다 보면 핸들이 고장난 에잇톤 트럭마냥 그게 잘 안 됨ㅎ;
프로젝트 결과물도 물론 남겠지만, 나의 언어로 정리한 기록이 더 오래 남는다.
요즘 TIL이 뜸했던 것 반성한다. 정신 차리겠다......
잊지말자. 코어타임은 9 to 9. 그 외 시간에는 학습한 것들을 꼭꼭씹어 소화하는 시간을 갖도록!
Software Engineer 🍊