[3nd Project] 공공데이터와 카카오 API로 주차장 웹 구현하기 2

오늘은 눈이 시리고 배가 아프다

 
 
 
오늘은 카카오 api를 통해 가져온 지도에 
공공데이터 API를 호출하여 주차장 데이터를 가져올 것이다.
가공까지 할 수 있으면 좋은데 
목표는 일단 데이터 가져와보기,, 
 
개발할 때는 처음부터 설계를 잘 해야 한다는 것을 깨달았지만 동시에
사소해 보이는 모든 기능들을 구현하기 위해서는 눈을 부릅뜨고 해야한다
어텐션플리즈
 
 
 
공공데이터를 가져오려면 XML/JSON형식이 있는데
정확히 어떤 건지 잘 몰라서 찾아봤다.

출처는 지피티입니다

결론: 웹 및 앱은 JSON을 더 많이 사용하며 일반적이다.
왜냐하면 속도가 빠르고 데이터 크기가 작아서 전송에 유리하다.
 
그래서 나는 json을 사용해서 데이터를 받아오려고 한다.
 
 
 
공공데이터 포털에서 미리 신청해둔 전국주자창표준데이터를 활용했다.

벌써 무려 6건!!!!
앞으로 100건이 될 때까지 데이터 씨가 마를 때 까지 써볼게.
 
일단 오늘의 목표는 데이터를 불러오는 것이 1차적인 목표이기에 리스트에 불러오겠다.
 
 
빠른 결론 
 
 
짠 불러오기만 완료!⛸

여기서 중요한 건
1. 서비스 키를 인코딩/ 디코딩 모두 사용해보기
2. 요청 변수명 확인해서 코드 작성하기!
 

//공공데이터 API에서 주차장 리스트 가져오기
function fetchParkingLotData(){
    $.ajax({
        url: 'http://api.data.go.kr/openapi/tn_pubr_prkplce_info_api', //엔드포인트
        data: {
            serviceKey: '본인 서비스키', //서비스키
            pageNo: 1, 
            numOfRows: 5,
            type: 'json'
        },
        type: 'GET',
        dataType:'json',
        success: function(response){
         console.log("API 응답:", response);  // API 응답 데이터 구조 확인

             // JSON 응답의 데이터 구조에 따라 데이터 추출
             const parkingList = response.response.body.items.map(item => ({
                prkplceNo: item.prkplceNo,                // 주차장 관리번호
                prkplceNm: item.prkplceNm,                // 주차장명
                prkplceSe: item.prkplceSe,                // 주차장 구분
                prkplceType: item.prkplceType,            // 주차장 유형
                rdnmadr: item.rdnmadr,                    // 도로명 주소
                lnmadr: item.lnmadr,                      // 지번 주소
                prkcmprt: item.prkcmprt,                  // 주차 구획 수
                operDay: item.operDay,                    // 운영 요일
                weekdayOperOpenHhmm: item.weekdayOperOpenHhmm, // 평일 운영 시작 시각
                weekdayOperColseHhmm: item.weekdayOperColseHhmm, // 평일 운영 종료 시각
                satOperOperOpenHhmm: item.satOperOperOpenHhmm,   // 토요일 운영 시작 시각
                satOperCloseHhmm: item.satOperCloseHhmm,         // 토요일 운영 종료 시각
                holidayOperOpenHhmm: item.holidayOperOpenHhmm,   // 공휴일 운영 시작 시각
                holidayCloseOpenHhmm: item.holidayCloseOpenHhmm, // 공휴일 운영 종료 시각
                parkingchrgeInfo: item.parkingchrgeInfo,        // 요금 정보
                basicTime: item.basicTime,                      // 주차 기본 시간
                basicCharge: item.basicCharge,                  // 주차 기본 요금
                addUnitTime: item.addUnitTime,                  // 추가 단위 시간
                addUnitCharge: item.addUnitCharge,              // 추가 단위 요금
                dayCmmtktAdjTime: item.dayCmmtktAdjTime,        // 1일 주차권 요금 적용 시간
                dayCmmtkt: item.dayCmmtkt,                      // 1일 주차권 요금
                monthCmmtkt: item.monthCmmtkt,                  // 월 정기권 요금
                metpay: item.metpay,                            // 결제 방법
                spcmnt: item.spcmnt,                            // 특기 사항
                institutionNm: item.institutionNm,              // 관리 기관명
                phoneNumber: item.phoneNumber,                  // 전화번호
                latitude: item.latitude,                        // 위도
                longitude: item.longitude,                      // 경도
                pwdbsPpkZoneYn: item.pwdbsPpkZoneYn,            // 장애인 전용 주차 구역 보유 여부
                referenceDate: item.referenceDate               // 데이터 기준 일자
            })); 
            displayParkingLots(parkingList); //주차장 리스트를 화면에 표시하는 함수 호출
        },
        error: function(error) {
            console.error("주차장 데이터를 불러오는데 실패했습니다:", error);
        }

    });
}

주소명도 안나와서,, 이제 주소랑 페이지네이션을 고쳐보겠다.. !

오늘의  두 번째 목표.
 
❗ 리스트의 정상 출력되게 만들기
❗ 페이지네이션 오류 잡기 

짠. 페이지네이션을 고치고 
공공데이터가 불완전해서 가지고 오지 못하는 데이터는 알 수 없음으로 표기하게 했다.
 

주차장 유형과 구분을 라벨값으로 넣어보았다.
 
주소 정보가 없는 부분은 지번이랑 도로명 수식을 걸어서 정보가 다 나올 수 있도록 했다!

짠..

 

js 파일

// 공공데이터 API에서 주차장 리스트 가져오기
function fetchParkingLotData(tabName) {
    $.ajax({
        url: 'http://api.data.go.kr/openapi/tn_pubr_prkplce_info_api',
        data: {
            serviceKey: '본인서비스', // 공공데이터 포털에서 발급받은 서비스 키를 입력하세요.
            pageNo: currentPage,
            numOfRows: itemsPerPage,
            type: 'json'
        },
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log("API 응답:", response); // API 응답 데이터 구조 확인
            const data = response.response.body.items.map(item => ({
                name: item.prkplceNm || '이름 정보 없음', // 이름이 없는 경우 기본 텍스트
                prkplceSe: item.prkplceSe || '구분 정보 없음', // 구분 정보
                prkplceType: item.prkplceType || '유형 정보 없음', // 유형 정보
                parkingchrgeInfo: item.parkingchrgeInfo || '요금 정보 없음', // 요금 정보
                address: item.lnmadr || item.rdnmadr || '주소 정보 없음', // 지번주소가 없으면 도로명주소 사용, 둘 다 없으면 기본 메시지
                phone: item.phoneNumber || '전화번호 정보 없음' // 전화번호 정보
            }));
            renderParkingList(data, tabName); // 주차장 리스트 표시 함수 호출
        },
        error: function(error) {
            console.error("주차장 데이터를 불러오는데 실패했습니다:", error);
        }
    });
}

// 주차장 리스트 데이터 표시 함수
function renderParkingList(data, tabName) {
    const parkingList = document.getElementById(tabName).querySelector('.parking-list'); // 주차장 목록을 표시할 HTML 요소 선택
    parkingList.innerHTML = ''; // 기존 데이터를 초기화

    data.forEach(item => {
        const parkingItem = document.createElement('div');
        parkingItem.classList.add('parking-item');
        parkingItem.innerHTML = `
            <h3>${item.name}</h3>
            <div class="label-container">
                <span class="label_gubun">${item.prkplceSe}</span> <!-- 구분 라벨 -->
                <span class="label_type">${item.prkplceType}</span> <!-- 유형 라벨 -->
                <span class="label_charge">${item.parkingchrgeInfo}</span> <!-- 요금 라벨 -->
            </div>
            <p>주소: ${item.address}</p>
            <p>전화번호: ${item.phone}</p>
        `;
        parkingList.appendChild(parkingItem);
    });
    document.getElementById('page-number').innerText = currentPage; // 현재 페이지 번호 표시
}

success 콜백 함수
응답 데이터를 성공적으로 받았을 때 호출
response: 공공데이터 API에서 반환된 데이터
 
map()을 사용해 필요한 필드를 data 배열에 저장하며,
각 주차장 정보는 { name, prkplceSe, prkplceType, parkingchrgeInfo, address, phone } 형식으로 정리



🚠forEach 메서드

배열의 각 요소에 대해 한 번씩 특정 작업을 수행할 수 있게 하는 메서드.
배열의 길이만큼 반복 실행하며, 반복할 때마다 각 요소에 대해 콜백 함수가 실행

array.forEach(function(element, index, array) {
    // 반복할 작업을 여기에 작성
});
element: 현재 반복 중인 배열 요소.
index: 현재 요소의 인덱스 (선택 사항).
array: forEach가 적용된 배열 자체 (선택 사항).

const parkingNames = ["주차장 A", "주차장 B", "주차장 C"];

parkingNames.forEach(function(name, index) {
    console.log(`Index: ${index}, Name: ${name}`);
});

 
출력결과

Index: 0, Name: 주차장 A
Index: 1, Name: 주차장 B
Index: 2, Name: 주차장 C

 
 
👓appendChild 메서드

특정 부모 요소의 맨 마지막 자식 요소로 새 HTML 요소를 추가하는 메서드
즉, 새로 생성한 div, p, span 같은 요소를 다른 요소에 추가할 때 사용