그동안 클론코딩과 여러 강의를 들으며 쌓아온 지식으로 부족한점이 많지만
조그만 지식과 구글을 통해.. 서울시 미세먼지정보앱을 만들어 보았습니다.
소개
- 공공데이터포털에서 서울시의 미세먼지정보api를 발급받기
- 발급받은 url을 fetch()함수를 이용해 로딩한다.
- json으로 처리 후 원하는 값을 뽑아와 데이터 표시
기능소개
- 검색기능 ex)마포구, 서초구 등등을 입력한다.
(그냥 지도에 바로 띄워주는게 정석이겠지만, 데이터뽑아오는 연습삼아 시도해봤다...) - 미세먼지농도가 숫자로 표기되는데 그 숫자의 범위에 따라 색이 변한다.
- 간단한 시계, 현재위치와 온도 표시
- 로그인기능(예정)
설명
공공데이터포털에서 원하는 API항목을 선택한 후 발급받기를 완료하면 
인증키와 원하는 상세기능을 선택해 xml,json파일과 여러가지 선택항목을 누르고 미리볼수있다.
1.fetch()함수 이용 http 요청
fetct()함수는 첫번째 인자로 url을 가지고 두번째 인자로 옵션객체를 가지고 propmise객체 반환
fetch(url,opt)
.then((response) => response)
.catch((error) => error);
사용한 코드
fetch(url)
.then((res) => res.json())
.then((myJson) => {
console.log(myJson);
const info = myJson["response"]["body"]["items"];
console.log(info);console.log(myJson);
console.log(info);
이런 형식으로 값을 찾아볼수 있으며 40개의 객체는 서울시의 지역들이다
이제 원하는 값을 찾았으니 지역이름인stationName와 미세먼지농도pm10Value 그리고 dataTime을 가져와서 보여주면 된다.
2. 지역명을 입력하고 검색하기
2.1 input태그와 button을 만들어 지역명을 입력하면 지역,농도,측정시간을 표시한다.
$searchbtn.addEventListener("click", () => {
//서울시의 40개 지역 array가 0~39
for (let i = 0; i < 40; i++) {
const match = myJson["response"]["body"]["items"][i];items는 40개로 고정이 되어있기에 0부터40까지 for문을 돌리도록 작성함
2.2 input태그 $search.value와 items.stationName의 값이 일치한지 확인하고 innerHTML 로 표시
//사용자가 입력한 값$search == items.stationName의 값이 같은 지역의 정보
if (match.stationName == $search.value) {
$sidoNameH1.innerHTML = `${match.sidoName}시 ${match.stationName}`;
$pm10ValueH1.innerText = `미세먼지농도:${match.pm10Value}`;
$dataTimeH1.innerHTML = `측정시간:${match.dataTime}`;
break;2.3 사용자가 마포구를 검색하다가 오타가 났을경우
else if (match.stationName != $search.value) {
$sidoNameH1.innerHTML = "위치를 잘못 입력하셨습니다.";
$pm10ValueH1.innerHTML = "";
$dataTimeH1.innerHTML = "";
$search.focus();
}focus()를 사용하여 다시 검색을 도와줌
2.4 미세먼지농도 색깔로 표시
2.1 번 if문안에 색상을 변경하는 if문을 작성
//미세먼지 농도에 따라 h1 컬러변경
if (match.pm10Value > 0 && match.pm10Value <= 30) {
$pm10ValueH1.style.color = "blue";
} else if (match.pm10Value > 30 && match.pm10Value <= 80) {
$pm10ValueH1.style.color = "green";
} else if (match.pm10Value > 80 && match.pm10Value <= 150) {
$pm10ValueH1.style.color = "orange";
} else {
$pm10ValueH1.style.color = "red";
}
$search.value ="";console.log(match.pm10Value); //64 이런식으로 나오기 때문에
조건문으로 범위를 지정하였다.
function displayChange() {
$mainDiv.style.display = "block";
$loadingDiv.style.display = "none";
}function display()함수를 만들어 fetch바로밑에서 함수를 부르도록하여 api로딩이 완료될때까진 로딩중이라는 div를보여주고 검색하는화면은 가려놨다.
우측상단에 시계는 new Date()함수와 setInterval함수를 사용하여 작성함.
날씨와 현재온도는 동일하게 fetch함수를 써서 api를 가져온 후 geolocation으로 작성함.
후기
fetch()함수와 json으로 변환하는 부분에대해서 많이 알게되었고
json파일의 형식은 같을테니 다른 정보앱을 만들수 있을거 같다.
검색기능보단 현재위치를 연동해 자동적으로 보여주는 기능을 메인으로 새로만들어 수정해봐야겠다.
미노