공공데이터

[ 공부/학습 ]

공공데이터

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

다음글이 없습니다.

이전글이 없습니다.

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

1.신청하기

2.프로젝트에 적용하기

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

티스토리툴바