공공데이터API(미세먼지경보발령) 웹에 사용해보자(react,node.js)

저번 포스트와 같은 프로젝트이기 때문에 생략된부분이 있을 수 잇습니다.

 

내가 사용 할 공공데이터포털의 API다 

 

공공데이터포털: www.data.go.kr/index.do

검색창에 ↓요래 치면 나온다

 

 

 

사용자가 "지역"을 검색했을 때 그 "지역"의 가장 최근 발령 현황을 알려주고 싶다.

왜냐하면 과제이기 때문이다.

 

 

 

 

API명세를 보면 아래 글을 찾을 수 있다.

 

 

 

 

 

 

문제가 있다. 나는 '지역'을 검색하고 싶은데 "조회연도"를 입력하여 경보조회를 한다. 가공해 보자

 

 

그래서 나는 조회연도를 2020으로 하고 최근 100개 데이터를 뽑아오고 , 제일 최근 데이터를 보여줄꺼다

---

먼저 프론트앤드이다. '경남'을 선택 후 "클릭"버튼을 누르면 서버에 요청을 하고 빈공간에 내용이 출력되게 한다

 

 

우선 state 값

constructor(props) {
        super(props);

        this.state = {
            issueDate:'',	//발령날짜
            issueTime:'',	//발령시각
            clearDate:'',	//해제날짜
            clearTime:'',	//해제시각
            districtName:'',	//내가 검색할 지역 ex)경남
            moveName:'',	//권역
            issueGbn:'',	//
            issueVal:'',	//기억이안난다나중에적어야지
            itemCode:'',	//

            year:2020,
        };
    }

 

 

 

button 코드

 <button className="alarm_serchBtn" onClick={this.alarm}>클릭</button> 
 
 //click Event시 alarm함수 호출

 

alarm 함수

alarm=(e)=>{
        e.preventDefault();

        const body = {
            year: this.state.year //state값을 2020으로 해놨다. 얘를 보내 줄 거다
        }

        fetch('http://localhost:5000/alarm',{ //localhost 5000, "alarm"에게 요청한다. index.js에 만들어 놨다.
            method:"post",
            headers: { "Content-Type":  "application/json" },
            body: JSON.stringify(body),	
        })
        .then(res => res.json()) // 여기서부터 서버로부터 받음
        .then(json => {
            let count = 0; //100개의 데이터중 최근껄 찾기 위해 변수를 만들었다. 
            for(let i=0; i<100;i++){ //받아온 100개의 데이터를 돌린다
                
                if(json.list[i].districtName == this.props.sidoName && count ==0){ 
               	//내가 검색할 지역(sidoName)과 검색결과로 나오는지역 (districtName)이 같고 count가 0일때진입
                
                count++; // for문 지입시 ++
                console.log('미세먼지발령날짜:'+json.list[i].issueDate); //받아온 데이터 console출력
                console.log('발령시각:'+json.list[i].issueTime);
                console.log('해제날짜:'+json.list[i].clearDate);
                console.log('해제시각:'+json.list[i].clearTime);
                console.log(json.list[i].itemCode);
                console.log('발령지역:'+json.list[i].districtName);
                console.log('상세지역:'+json.list[i].moveName);
                console.log('발령종류:'+json.list[i].issueGbn);
                console.log('발령시농도:'+json.list[i].issueVal);

                this.setState({
                    issueDate: json.list[i].issueDate, // 위에서 만든 state값 초기화
                    issueTime: json.list[i].issueTime,
                    clearDate: json.list[i].clearDate,
                    issueVal: json.list[i].issueVal,
                    clearTime: json.list[i].clearTime,
                    itemCode: json.list[i].itemCode,
                    moveName: json.list[i].moveName,
                    issueGbn: json.list[i].issueGbn,
                    circle:'none'
                })
            }
            }
            count = 0;
        });
    }

 

 

앞 번호 데이터가 최신 데이터이기때문에 내가 검색한 지역명을 비교해보고 일치하면 for문 진입 -> count를 ++ 시켜서 더이상 진입 시키지 못하게 햇다

 

 

 

---

이제 backend를 보자.

 

나의 백앤드 구조이다 맨 밑, server.js와 index.js , alarmdata.js 만 보면 된다.

 

<<server.js>>는 이전 게시물에 있다. 전문성을 원하셨다면 죄송합니다.

 

<<index.js>>

const bodyParser = require('body-parser');
const { query } = require('express');
const express = require('express');
const alarmdata = require('./alarmdata'); // 만들어논 함수를 가져와서 쓸거다
const router = express.Router();

router.use(bodyParser.urlencoded({extended: true}))


router.post('/alarm',function (req,res){ ///프론트에서 fetch와 연결될 /alarm 친구

    console.log("연결 1!!!")    //확인용
    alarmdata(req.body.year,(error, {alarm}={})=>{  //alarmdata함수에 fetch해준 req->body->sidoName를 보내준다.
        if(error){      //에러 발생시
            console.log("가나다라마바사!!");
            return res.send({error})
        }
        return res.send(alarm);   // alarmdata함수에서 리턴받은 객체를 프론틀앤드로 보내준다. 
    })
})


module.exports = router;

 

 

 

 

공공데이터포털 마이페이지에서 볼 수 있는 인증키

API명세에서 볼 수있는 URL

 

 

 

 

 

<<alarmdata.js>>

 

const request = require('request')
const serviceKey = '7rloXxdcpjuUszWhliD8Ge20nEcInTTYOCCzOxtETM3H44poN7Sw7w1%2FS7ncIWuDUpdt6fM9zcumEz5auRIu8Q%3D%3D'
//공공데이터 포털에서 받은 내 서비스키 

var parse = require('json-parse')
const alarmdata = (year, callback) => {       // 연도(2020)을 여기서 받았다.

    console.log("알람데이타!!!!!!");            //진입햇는지 확인용
    console.log(year);            //진입햇는지 확인용

	//아래는 요청할 필수내용들 쓰기 ,, 명세에 적혀있다
    var url = 'http://openapi.airkorea.or.kr/openapi/services/rest/UlfptcaAlarmInqireSvc/getUlfptcaAlarmInfo';
    var queryParams = '?' + encodeURIComponent('ServiceKey') + '=' + serviceKey; /* Service Key*/
    queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /* */
    queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('100'); /* */
    queryParams += '&' + encodeURIComponent('year') + '=' + encodeURIComponent(year); /* */
    // queryParams += '&' + encodeURIComponent('itemCode') + '=' + encodeURIComponent('PM10'); /* */
    queryParams += '&' + encodeURIComponent('_returnType') + '=' + encodeURIComponent('json') 
    
    request(
        {
        url: url + queryParams, // url과 queryParams합쳐놓은거 
        method: 'GET'
        }, function (error, response, body) 
        {
        console.log(url+queryParams);
        //console.log('Status', response.statusCode);
        //console.log('Headers', JSON.stringify(response.headers));
        console.log('Reponse received', body);

        callback(undefined,{    //body를 air이름으로 만들어준다. 그면 index.js에있는 /alarm 이 받는다
            alarm:body
        })
        });
        
}

module.exports = alarmdata;

 

 

그러면

index.js의 /alarm이 받고 front로 보내줄 것이다.

 

---

 

 

"클릭"을 클릭하면 다음과 같이 나온다

 

 

 

마린 체력은 미세먼지 농도에 따른 1,2,3,4 등급에 따라 나온 결과이다. 

 

5일전에 미세먼지 주의보였다. 몰랏다.