[3nd Project] 카카오 Api로 주차장 구현하기 7

형돈이 뱃살 = 내 뱃살

 

목요일이 밝았습니다. 

이번주는 정말로 힘이 들어요! 
헤헷 .. 

할 게 너무나도 많네요!

어떻게든 되겠지 

나는 날 믿어 인생을 대충 살지 않으니까

뭐든 뚝딱 잘 해낼거니까

성실하니까

암암

 

오늘의 목표는

길찾기 기능 구현하기 - 호달달 -

 

길찾기를 하려면요! 
일단은 카카오 모빌리티에서 API를 받아와야 한답니다.

 

저는 제 javascript 코드 한 번 쭉 보면서 흐름을 읽고 매개변수들 좀 본 다음에 

진행하도록 하겠습니다. 리뷰를 한 번 하고 해야지 잘 되더라고요, ,

그래서 오늘 7편은 코드 리뷰 및 흐름 이해로 하고 길찾기는 8에서 하겠습니다. ㅎ . 

챌린지 때문에 나누는거 맞음!

🚧주요  흐름

1. 페이지가 로드되면 카카오 지도가 초기화되고, fetchParkingLotData호출
2. fetchTotalCount로 데이터 수를 확인하고, 필요한 페이지 수를 계산한 뒤 fetchNextPage로 모든 데이터를 가져옴
3. App.initializeRegionSelection에서 지역 선택 옵션을 설정하고, 사용자가 지역을 선택하면 applyRegionFilter가 데이터를 필터링
4. 필터링된 데이터를 renderParkingList와 displayMarkers에서 화면에 표시하고, 각 리스트 항목을 클릭하면 지도가 해당 위치로 이동하며 상세 정보 팝업 표시
5. 페이지네이션을 통해 페이지를 이동할 때마다 loadPageData로 데이터 갱신

 

🍪주요 함수들

(∪.∪ )...zzz(_　_)。゜zｚＺ( ´･･)ﾉ(._.`)(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ヽ(✿ﾟ▽ﾟ)ノ(u‿ฺu✿ฺ)

$(document).ready(function() { ... }) 페이지 로드가 완료되면 실행
container 변수로 HTML에서 지도를 표시할 요소를 가져와 저장하고, options 객체에 초기 지도 중심과 확대 레벨
map = new kakao.maps.Map(container, options);를 통해 지도 객체를 생성하고 map 변수에 저장

 

fetchParkingLotData() 함수 호출로 주차장 데이터 로드
fetchTotalCount() 함수를 통해 전체 데이터 개수

 

콜백으로 totalCount 값을 받아 페이지 전체 개수를 계산하고,

 

fetchNextPage() 함수를 호출하여 페이지 단위로 모든 데이터 호출

 

API 호출에 성공하면 응답 데이터를 allParkingData 배열에 저장하며,

모든 데이터를 다 가져오면 applyFilterAndRender() 함수로 필터링과 렌더링 수행

applyRegionFilter() 사용자가 선택한 지역을 기반으로 데이터를 필터링

applyFilterAndRender()필터링된 데이터를

renderParkingList()와 displayMarkers() 함수로 넘겨주어 리스트와 마커를 표시

 

지역 선택 초기화 (App.initializeRegionSelection)
App 객체의 메서드로, province-select와 city-select 요소에 지역(시/도)과 시/군/구 옵션을 동적으로 추가
시/도 선택이 변경되면 해당 지역의 시/군/구 목록을 업데이트하여 사용자가 선택

 

displayPagination() 총 아이템 수를 받아 전체 페이지 수를 계산하고,

각 페이지 버튼을 생성하여 paginationContainer에 추가

prevPage() 및 nextPage(): 이전 페이지와 다음 페이지로 이동하는 함수로, 

applyRegionFilter()를 호출해 현재 페이지에 맞는 데이터 로드

renderParkingList() 주차장 리스트 데이터를 parking-list 요소에 표시

각 항목을 클릭하면 showParkingDetails()와 moveToLocationAndShowMarker() 함수가 호출

displayMarkers() 필터링된 데이터를 기반으로 지도에 마커 표시

각 마커는 주차장 정보를 클릭 이벤트로 알림창에 표시

 

moveToLocationAndShowMarker()

리스트에서 주차장 항목을 클릭할 때 호출되며, 해당 주차장 위치로 지도를 이동하고 마커 표시

showParkingDetails() 선택된 주차장 정보를 팝업에 표시
closeParkingDetails()팝업을 닫는 함수

filterParkingDataByRegion() 주차장 데이터를 주소 기준으로 지역을 필터링
fetchTotalCount() 공공 데이터 API에서 전체 주차장 데이터 개수를 가져옴

 

🍟각 함수와 파라미터/인수 설명 및 연결 관계

fetchParkingLotData(province, city)
파라미터 province, city: 필터링에 필요한 시/도와 시/군/구 정보. 데이터 로드가 완료되면 필터링에 사용
fetchTotalCount와 연결되어 전체 데이터 수를 가져오고, 이후 페이지별 데이터를 fetchNextPage를 통해 로드



loadPageData(data)
파라미터 data: 필터링된 주차장 데이터를 전달받아 현재 페이지에 맞는 데이터 로드
displayPagination과 연결되어 현재 페이지에 대한 페이지네이션을 업데이트



displayPagination(totalItems)
파라미터 totalItems 전체 주차장 데이터 개수.
페이지 버튼을 생성하며, 각 버튼에 이벤트 리스너를 추가해 페이지가 변경될 때 loadPageData를 호출



applyFilterAndRender(data, province, city)
파라미터 data, province, city: 필터링할 데이터와 지역 정보.
filterParkingDataByRegion을 호출하여 지역을 필터링하고,

이후 renderParkingList와 displayMarkers를 통해 데이터를 화면에 표시



renderParkingList(data)

파라미터 data: 필터링된 주차장 데이터.
주차장 리스트를 DOM에 추가하고, 각 주차장 항목 클릭 시 

showParkingDetails와 moveToLocationAndShowMarker를 호출



displayMarkers(parkingData)

파라미터 parkingData: 마커를 표시할 주차장 데이터.
각 주차장 위치에 마커를 추가하고, 클릭 시 알림을 표시하도록 이벤트를 설정



moveToLocationAndShowMarker(item)

파라미터 item: 사용자가 선택한 주차장 데이터.
선택한 주차장 위치로 지도를 이동시키고, 해당 위치에 마커표시



showParkingDetails(item)
파라미터 item: 선택한 주차장 데이터.
주차장의 상세 정보를 팝업 표시


fetchTotalCount(callback)
파라미터 callback: 전체 데이터 수를 전달받을 콜백 함수.
전체 데이터 개수를 구해 콜백 함수에 전달하고, 이후 fetchParkingLotData에서 데이터 로드에 활용

싹 정리를 해보았다. 
코드가 완전히 정리되고 눈에 익을 정도로 매일 매일 봐야지!!!!
그럼 조금 쉬워질까?

그런 날이 오길 바라며,, щ(ʘ╻ʘ)щ 금요일 뿌셔뿌셔마라탕