공공데이터 API JSP에 적용하기 (2)

1편 마무리 긁어오기!

 

앞으로 해야할 거 → 이미지에 대한 정보는 없으니, images 폴더에 각 title에 해당하는 이미지 만들어두고 매칭시키기

그 이미지를 배너에 슬라이드 형식으로 나오게 하고

이미지 클릭시 → 이미지의 title에 연결된 페이지에 해당하는 축제 페이지 만들고 안에 구성을 필요한 공공데이터 api 값들을 받아와서 구성하기!

가 목표였는데 현재 진행상황은

 

공공데이터 각 title에 해당하는 이미지 찾아서 매칭시키기 → 완료

미리 받은 title들의 축제들을 검색해서 축제 사진들을 저장해놨다!

배너 이미지

 

 

배너에 슬라이드 형식으로 나오게 하기 → 완료

슬라이드는

https://swiperjs.com/demos

Swiper Demos

여기서 demo중에 내가 원하는 슬라이드 형식을 찾아서 사용했다!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

배너 슬라이드 적용 모습

 

그리고 왼쪽 설명박스는 공공데이터를 불러와서 제목, 설명을 넣고 싶었다.

그래서 공공데이터 불러온 값 중에 필요한 속성들만 불러와서 설명 박스를 채워보려고 했다!

일단.. jsp니까 java로 공공데이터를 불러온 후 필요한 값들을 추출 후 데이터를 Map에 저장했다.

그리고 JSON 형식으로 바꿔서 JavaScript로 전달했다! (여기서 문제가 발생했다.. 다 정리하고 쓸 예정!)

        // 각 항목의 필요한 필드 추출
        String title = item.split("<title>")[1].split("</title>")[0]; //제목 추출
        String description = item.split("<description>")[1].split("</description>")[0]; //설명 추출
        String urlStr = item.split("<url>")[1].split("</url>")[0];  //URL 추출
        String viewCnt = item.split("<viewCnt>")[1].split("</viewCnt>")[0]; //조회수 추출
        String spatialCoverage = item.split("<spatialCoverage>")[1].split("</spatialCoverage>")[0]; //공간 범위 추출

        // 데이터를 Map에 저장
        Map<String, String> itemData = new HashMap<>();
        itemData.put("title", title);
        itemData.put("description", description);
        itemData.put("urlStr", urlStr);
        itemData.put("viewCnt", viewCnt);
        itemData.put("spatialCoverage", spatialCoverage);

        // 리스트에 추가
        itemList.add(itemData);
        
            
        // 데이터를 JSON 형식으로 변환하여 JavaScript로 전달
        String jsonItemList = new org.json.JSONArray(itemList).toString();

 

 

그러고 배너 슬라이드랑 같이 움직이게 했다.

  function updateDescription(index) {
    const description = descriptions[index % descriptions.length];  // 데이터가 순환할 수 있게 처리
    document.getElementById('description-title').textContent = description.title; //제목을 공공데이터 title로 설정
    document.getElementById('description-text').textContent = description.description;  // 내용을 공공데이터 description으로 설정
    // document.getElementById('detail-link').setAttribute('href', description.link);
  }

 

먼저 updateDescription이라는 함수로 하고 index값을 받아 설명을 업데이트 하려고 했다.

description 라는 배열에서 현재 슬라이드의 index에 맞는 설명을 업데이트 하게 했고

index % descriptions.length를 통해서 슬라이드가 여러번 순환해도 배열의 index 범위를 초과하지 않게 하기 위해 index가 description의 배열의 길이를 넘지 않게 순환시켰다.
그런 후 html 요소 중 description-title이라고 되어있는 부분에 description.title 값을 넣어주었고 (공공데이터 title 값)

같은 방식으로 description-text값에 description.description을 넣어주었다. (공공데이터 설명 값)

 

데이터 불러오기 성공, 하지만 오류 발생

 

해당하는 부분에 공공데이터의 제목과 설명이 잘 불러져왔다.. 근데 문제가 생겼다!

제목과 설명 부분에 <p>, &nbsp; 등 HTML 엔티티들이 그대로 출력되고 있었다.. 해결하기 위해 검색..검색..

 

결론은 mvnrepository에서 제공하는 commons-text와 commons-lang3가 필요했고, 이걸 통해 HTML 엔티티를 디코딩해서 js로 보내줘야 했다.

 

자바에서는 문자열 데이터를 처리할 때 HTML 엔티티가 포함된 데이터를 다루는데. 이때 HTML 엔티티를 제대로 인식,출력하려면 문자열을 이스케이프 하거나 디코딩을 해야한다고 했다.

 

나는 API로 받아온 인코딩 데이터들을 디코딩하여 원래 텍스트로 변환이 필요했는데

StringEscapeUtils.unescapeHtml4 메서드를 사용해서 HTML 엔티티를 디코딩하여야 했다.

하지만 난 디코딩이 안되는 상태라 그대로 출력되고 있던 것이였다. 이런 기능들을 쓰려면 StringEscapeUtils를 임포트 해주고 사용해야 하기 때문에 mvnrepository에서 jar 파일 찾아서 다운받고 임포트를 해주기로 했다.

commons-text-1.10.0.jar와
commons-lang3-3.14.0.jar를 다운받고 lib에 넣어줬다.
https://mvnrepository.com/artifact/org.apache.commons/commons-text

https://mvnrepository.com/artifact/org.apache.commons/commons-lang3

 

그러고 상단에 임포트하기!

<%@ page import="org.apache.commons.text.StringEscapeUtils" %>

 

그 후 디코딩을 추가하고 js로 보내서 슬라이드로 보내봤다.. 과연..!

        // 각 항목의 필요한 필드 추출
        String title = item.split("<title>")[1].split("</title>")[0]; //제목 추출
        String description = item.split("<description>")[1].split("</description>")[0]; //설명 추출
        String urlStr = item.split("<url>")[1].split("</url>")[0];  //URL 추출
        String viewCnt = item.split("<viewCnt>")[1].split("</viewCnt>")[0]; //조회수 추출
        String spatialCoverage = item.split("<spatialCoverage>")[1].split("</spatialCoverage>")[0]; //공간 범위 추출
        

        // HTML 엔티티를 디코딩
        description = StringEscapeUtils.unescapeHtml4(description);
        
        // 데이터를 Map에 저장
        Map<String, String> itemData = new HashMap<>();
        itemData.put("title", title);
        itemData.put("description", description);
        itemData.put("urlStr", urlStr);
        itemData.put("viewCnt", viewCnt);
        itemData.put("spatialCoverage", spatialCoverage);

        // 리스트에 추가
        itemList.add(itemData);
    }

    
    // 데이터를 JSON 형식으로 변환하여 JavaScript로 전달
    String jsonItemList = new org.json.JSONArray(itemList).toString();

 

성공했다!! HTML 엔티티가 그대로 나오는 현상 수정 완료!!

전 / 후

 

이런거 하나하나 해결해 가면서 참 많은걸 배우는거 같다. 학원에서 알려주지 않는 부분들은 이렇게 몸으로 부딪히면 금방 익히는 거 같다.. 오류가 안나면 좋겠지만 나같은 삐약이 수준에서는 오류가 날 때마다 뭔가 배울 수 있고 아는건 한번 더 기억해서 헤쳐나갈 수 있기 때문에 반갑다.(단 해결할 수 있는 적당한 오류만 반가움..)

이제.. 데이터 가공을 해보려고 한다. 불러오는건 잘 불러오는데 설명이 너무 길다..

필요한 부분만 가져와서 구성해야 하는데 설명이라든지 이런게 너무 길어서 어떻게 해야 하나 고민중...!

하나하나 다 어려운 느낌이다! 그래도 뭐 어쩌겠어.. 일단 해야지!