기록
  • 공공데이터
    2024년 01월 19일 14시 33분 19초에 업로드 된 글입니다.
    작성자: 삶은고구마

    https://www.data.go.kr/index.do

     

    공공데이터 포털

    국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase

    www.data.go.kr

    https://data.seoul.go.kr/

     

    열린데이터광장 메인

    데이터분류,데이터검색,데이터활용

    data.seoul.go.kr

    표준데이터 셋, 파일데이터:정적

    오픈api:서버형태로 제공-요청을 보내면 실시간으로 응답해줌

    https://www.data.go.kr/data/15073861/openapi.do

     

    한국환경공단_에어코리아_대기오염정보

    각 측정소별 대기오염정보를 조회하기 위한 서비스로 기간별, 시도별 대기오염 정보와 통합대기환경지수 나쁨 이상 측정소 내역, 대기질(미세먼지/오존) 예보 통보 내역 등을 조회할 수 있다.

    www.data.go.kr


    공공데이터 포털 자료 활용하기

    1.신청하기

    데이터를 찾은 후 원하는 서비스 선택해서 활용신청.

    활용목적에는 공부를 하고싶다거나, 개발을 하고싶다는 목적을 작성하면 됨.

    누르고 나서 몇 초지나면 승인되었다고 바로 알려줌..

     

     

    2.프로젝트에 적용하기

    대기오염 정보 api를 사용.

     

     

     

    ApiExplorer.class

    샘플로 던져준 java 코드

    서비스키에 발급받은 Encoding 키를 넣어주면 된다.

     

    날짜는 2020-11-14으로 되어있는데 데이터를 받아오질 못했다.

    주석을 살펴보니 한달어쩌고 되어있어서 금일날짜인 2024-01-19로 데이터 요청을 하니 잘 받아옴.

    금일 기준 한달전까지 데이터도 잘 받아온다. 그 이상이면 데이터 못받아옴...

     

     

    더보기
    /* Java 1.8 샘플 코드 */
    import java.io.InputStreamReader;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.net.URLEncoder;
    import java.io.BufferedReader;
    import java.io.IOException;
    public class ApiExplorer {
    public static void main(String[] args) throws IOException {
    StringBuilder urlBuilder = new StringBuilder("http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMinuDustFrcstDspth"); /*URL*/
    urlBuilder.append("?" + URLEncoder.encode("serviceKey","UTF-8") + "=서비스키"); /*Service Key*/
    urlBuilder.append("&" + URLEncoder.encode("returnType","UTF-8") + "=" + URLEncoder.encode("xml", "UTF-8")); /*xml 또는 json*/
    urlBuilder.append("&" + URLEncoder.encode("numOfRows","UTF-8") + "=" + URLEncoder.encode("100", "UTF-8")); /*한 페이지 결과 수(조회 날짜로 검색 시 사용 안함)*/
    urlBuilder.append("&" + URLEncoder.encode("pageNo","UTF-8") + "=" + URLEncoder.encode("1", "UTF-8")); /*페이지번호(조회 날짜로 검색 시 사용 안함)*/
    urlBuilder.append("&" + URLEncoder.encode("searchDate","UTF-8") + "=" + URLEncoder.encode("2020-11-14", "UTF-8")); /*통보시간 검색(조회 날짜 입력이 없을 경우 한달동안 예보통보 발령 날짜의 리스트 정보를 확인)*/
    urlBuilder.append("&" + URLEncoder.encode("InformCode","UTF-8") + "=" + URLEncoder.encode("PM10", "UTF-8")); /*통보코드검색(PM10, PM25, O3)*/
    URL url = new URL(urlBuilder.toString());
    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
    conn.setRequestMethod("GET");
    conn.setRequestProperty("Content-type", "application/json");
    System.out.println("Response code: " + conn.getResponseCode());
    BufferedReader rd;
    if(conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
    rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
    } else {
    rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
    }
    StringBuilder sb = new StringBuilder();
    String line;
    while ((line = rd.readLine()) != null) {
    sb.append(line);
    }
    rd.close();
    conn.disconnect();
    System.out.println(sb.toString());
    }
    }

     

     

    index.html

    버튼을 눌러서 테이블에 원하는 값만 골라 출력하기로 했다.

    상단에 jquery cdn 추가

    <script
    src="https://code.jquery.com/jquery-3.7.1.js"
    integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>

     

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>공공데이터</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    </head>
    <body>
    <h1 th:text="|공공데이터🌱|"></h1>
    <h2>🤧미세먼지 예보(오늘과 내일)</h2>
    <button id="btn1">client - xml</button>
    <button id="btn2">client - json</button>
    <button id="btn3">proxy server - xml</button>
    <button id="btn4">proxy server - json</button>
    <table id="air-polution">
    <thead>
    <tr>
    <th>미세/초미세</th>
    <th>날짜</th>
    <th>전체예보</th>
    <th>서울</th>
    <th>제주</th>
    </tr>
    </thead>
    <tbody></tbody>
    </table>
    <script th:src="@{/js/index.js}"></script>
    </body>
    </html>

     

    index.js

    js,image 등의 정적 파일은 static 하위에 두고 사용한다.

    ajax 내부에서 serviceKey를 사용할 때 incoding key를 사용하니 서버 응답값을 받아오지 못함

    decoding 키를 사용해서 encoding된 키값을 사용해야 한다 하는데 자세한건 구글링해봐야겠다.

     

    ajax로 

    url, key, date값을 서버에 요청한 후 해당 날짜의 정보를 가져와서

    내가 원하는 값만 table tbody에 뿌리기 위한 작업을 수행한다.

     

     

    전체적인 구조는 이해했는데 구조분해할당 공부를 소홀히 해서 여기서 좀 헤맸다.

     

    중간에 리팩토링을 해서 중복되는 부분은 메소드로 만들어버렸다.

    itemToTr 가 그 예인데,

    1.ajax로 요청

    2.값을 받아왔을 경우 즉, success했을 경우 tbody.innerhtml로 같은 코드를 4번 복붙해서 사용했다

    3.내가 원하는 배열값은 오늘자 미세먼지/오늘자 초미세먼지/내일자 미세먼지/내일자 초미세먼지 총 4개였다.

    인자로 받는 item은 구조분해할당을 통해 얻은 4개의 배열값이다.

    tbody.innerHTML="";//한번 초기화해주고
    tbody.innerHTML+=itemToTr(pm10Today);
    tbody.innerHTML+=itemToTr(pm25Today);
    tbody.innerHTML+=itemToTr(pm10Tomorrow);
    tbody.innerHTML+=itemToTr(pm25Tomorrow);

     

     

     

    const itemToTr = (item)=>`
    <tr>
    <td>${item.informCode==='PM10'? '미세':'초미세'}</td>
    <td>${item.informData}</td>
    <td>${item.informOverall}</td>
    <td>${item.informGrade.filter((obj)=>obj.region==='서울')[0].forecast}</td>
    <td>${item.informGrade.filter((obj)=>obj.region==='제주')[0].forecast}</td>
    </tr> `;

     

     

    더보기
    //serviceKey decoding key 사용하기
    const tbody = document.querySelector("table#air-polution tbody");
    document.querySelector("#btn1").onclick=(e)=>{
    $.ajax({
    url:'https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMinuDustFrcstDspth',
    data:{
    serviceKey:'발급받은 key(decoding ver)',
    searchDate:new Date().toISOString().substring(0,10) //yyyy-MM-ddTHH:mm:ss.sss
    },
    success(xmlDoc){
    console.log(xmlDoc);
    //총 8개의 item이 들어오는데 앞의 4개만 사용하기로
    const [_pm10Today,_pm10Tomorrow,_pm25Today,_pm25Tomorrow]
    = xmlDoc.querySelectorAll("item");
    console.log(
    dataHandler(_pm10Today),dataHandler(_pm10Tomorrow),
    dataHandler(_pm25Today),dataHandler(_pm25Tomorrow)
    );
    const pm10Today = dataHandler(_pm10Today);
    const pm10Tomorrow = dataHandler(_pm10Tomorrow);
    const pm25Today = dataHandler(_pm25Today);
    const pm25Tomorrow = dataHandler(_pm25Tomorrow);
    tbody.innerHTML="";//한번 초기화해주고
    tbody.innerHTML+=itemToTr(pm10Today);
    tbody.innerHTML+=itemToTr(pm25Today);
    tbody.innerHTML+=itemToTr(pm10Tomorrow);
    tbody.innerHTML+=itemToTr(pm25Tomorrow);
    }
    })
    };
    document.querySelector("#btn2").onclick=(e)=>{
    $.ajax({
    url:'https://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMinuDustFrcstDspth',
    data:{
    serviceKey:'발급받은 key(decoding ver)',
    searchDate:new Date().toISOString().substring(0,10), //yyyy-MM-ddTHH:mm:ss.sss
    returnType:'json'
    },
    success(data){
    console.log(data);
    const {response : {body : {items : [pm10Today,pm10Tomorrow,pm25Today,pm25Tomorrow]}}} = data;
    console.log(pm10Today,pm10Tomorrow,pm25Today,pm25Tomorrow);
    tbody.innerHTML="";
    tbody.innerHTML += itemToTr(processInformGrade(pm10Today));
    tbody.innerHTML += itemToTr(processInformGrade(pm25Today));
    tbody.innerHTML += itemToTr(processInformGrade(pm10Tomorrow));
    tbody.innerHTML += itemToTr(processInformGrade(pm25Tomorrow));
    }
    })
    };
    const processInformGrade = (item) =>{
    item.informGrade= item.informGrade.split(',').map((text)=>{
    const temp = text.split(" : ");
    return{
    region : temp[0],
    forecast : temp[1]
    };
    });
    return item;
    }
    const itemToTr = (item)=>`
    <tr>
    <td>${item.informCode==='PM10'? '미세':'초미세'}</td>
    <td>${item.informData}</td>
    <td>${item.informOverall}</td>
    <td>${item.informGrade.filter((obj)=>obj.region==='서울')[0].forecast}</td>
    <td>${item.informGrade.filter((obj)=>obj.region==='제주')[0].forecast}</td>
    </tr> `;
    const dataHandler = (item) => {
    const informCode = item.querySelector("informCode");
    const informData = item.querySelector("informData");
    const informOverall = item.querySelector("informOverall");
    const _informGrade = item.querySelector("informGrade");
    const informGrade =
    _informGrade.textContent.split(",").map((text)=>{
    const temp = text.split(" : ");
    return{
    region : temp[0],
    forecast : temp[1]
    };
    })
    return{
    informCode : informCode.textContent,
    informData : informData.textContent,
    informOverall : informOverall.textContent,
    informGrade
    };
    };

     

     

    주말 목표

    구조분해할당 다시 복습하기

     

     


    월요일 test때 활용할 api

     

    https://www.data.go.kr/data/3058512/openapi.do

     

    행정안전부_지진해일 긴급대피장소

    지진해일 발생시 긴급대피소 현황 정보(대피소명, 주소, 수용가능인원, 위.경도 등) 제공

    www.data.go.kr

     

    '공부 > 학습' 카테고리의 다른 글

    because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.  (0) 2024.01.30
    long , Long 차이와 사용처  (0) 2024.01.18
    1102 jdbc - day4  (0) 2023.11.02
    1101 jdbc - day3  (0) 2023.11.01
    1031 jdbc - day2  (0) 2023.10.31
    댓글