공공데이터API(미세먼지) 활용하여 웹을 만들어보자①(react,node.js)

소프트웨어 공학 수업 과제이다. 

 

상대방의 요구사항 제안서를 살펴보자 

 

 

custumer가 요구하는 usecase이다 . 지역선택 후 -> 그 지역의 미세먼지 검색과 미세먼지 주의보 발령상황, 생활기상지수를 조회 할 수 있어야한다. 

 

 

 

다음은 custumer의 기능적/비기능적/도메인 요구사항이다. 잘 참고하자 .

 

1) 기능적 요구사항

- 현재 미세먼지 및 초미세먼지 수치를 출력한다.

- 현재 생활기상정보를 출력한다.

- 현재 주의보 발령 상황을 출력한다.

 

2) 비기능적 요구사항

- 전국 도 별 정보를 알려 준다.

- 지수를 알려주되 좋고, 나쁨의 기준은 WHO에서 권고하는 기준을 따른다.

- 미세먼지의 농도는 실시간으로 업데이트된다.

 

3) 도메인 요구사항

- 한국에서만 사용할 수 있어야한다.

- 웹에서 사용이 가능하다.

 

 

---

공공데이터를 처음 사용하는데 막막하지만 침착하게 찾아봤다.

 

(공공데이터포털)

www.data.go.kr/index.do

 

생활기상지수를 "생활기상지수 조회서비스",

미세먼지 주의보와 미세먼지 지수를 알기 위해 "한국환경공단_대기오염정보" API를 신청했다. 

 

 

시/도별 실시간 미세먼지 측정 데이터부터 살펴보자 

 

 

 

API명세를 보면 대충 내가 원하는게 있다. 

 

오퍼레이션 설명을 보면 '시도명을 검색조건으로 하여..' 가 있는데 이런게 중요한 것 같다. 자료는 되게 많은데 내가 필요한 것은 시/도 검색이기 때문이다.

 

---

나는 front는 react , back은 node.js를 사용 할거다. 

 

공공데이터를 가져와서 간단하게 콘솔창에 띄워보자

frontend 부터 보자

 

 

 

ㅇ

ui는 이래 생겼다.

 

 

<<main.js>>

import React from 'react';
import './main.css';


class Main extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            sidoName:'',    //시,도의 이름을 받는 state값
        };
    }
    onChange = (e) =>{
        this.setState({
            [e.target.name]: e.target.value ,   //  input창 입력값을 바로바로 state값 초기화
        })
        console.log(this.state.location);
    }

    search=(e)=>{       //input창에 지역 쓰고 버튼 누르면 발동되는 함수
        e.preventDefault();

        const body = {
            sidoName: this.state.sidoName		// 현재 시,도이름을 body에 넣는다.
        }

        fetch('http://localhost:5000/location',{ // localhost 서버 5000번 포트의 location에게 보낸다.
            method:"post",
            headers: { "Content-Type":  "application/json" },
            body: JSON.stringify(body),	// json화 해버리기
        })
        .then(res => res.json())    // 서버로부터 받음
        .then(json => {
            console.log(json);      
            console.log(json.list[0].dataTime);     //dataTime (측정시간) 콘솔 출력
            console.log(json.list[0].pm10Value);    //pm10Value 미세먼지 지수 콘솔출력
            console.log(json.list[0].pm25Value);    //pm25Value 미세먼지 지수 콘솔출력
        });
    }

    render() {
        return (
            <div className="main">
                <h1>미세먼지지수</h1>
                <form>
                    <input placeholder="측정장소" name="sidoName" onChange={this.onChange}/>
                    <button onClick={this.search}>Search</button>
                </form>
            </div>
        );
    }
}


export default Main;

 

textinput창에 다음처럼 원하는 지역을 골라 'search'를 누르면

 

fetch함수에 의해 서버로 시/도 이름이 전달된다.

 

 

backend은 다음에 설명해야겠따