본문 바로가기
Web/JS

한국환경공단 대기오염 데이터 활용하기 (parseStringPromise, find, startsWith, padStart)

by 가나닩 2024. 10. 13.

공공데이터포털에서 제공하는 대기오염 예보정보를 활용하고자 하였다. 한국환경공단(에어코리아)에서 제공하고 있는 대기오염 데이터는 특정 날짜로부터 4일간의 미세먼지 오염 정도가 어느정도인지를 응답해준다.

 

데이터는 아래와 같은 형태의 XML파일로 제공된다.

<!-- 임의로 작성된 데이터 (예시) -->
<frcstOneDt>2024-10-16</frcstOneDt>
<frcstOneCn>서울 : 낮음, 인천 : 낮음, 울산 : 낮음, ... , 신뢰도 : 높음</frcstOneCn>
<frcstTwoDt>2024-10-17</frcstTwoDt>
<frcstTwoCn>서울 : 보통, 인천 : 낮음, 울산 : 보통, ... , 신뢰도 : 높음</frcstTwoCn>
<presnatnDt>2024-10-13</presnatnDt>
...

각 항목은 다음을 뜻한다.

  • frcstOneDt : 첫번째 예보 날짜
  • frcstOneCn : 첫번째 예보 날짜의 예보 데이터
  • frcstTwoDt : 두번째 예보 날짜
  • frcstTwoCn : 두번째 예보 날짜의 예보 데이터
  • presnatnDt : 요청한 날짜

10월 13일 날짜로 요청하면 3일뒤의 데이터로 시작하여 4일뒤까지의 데이터(3일 뒤 ~ 6일 뒤의 데이터)를 제공해준다.

 

예시에 적힌것처럼 문자열 형태로 제공되어 특정지역의 예보 정보를 활용하려면 문자열 내에서 원하는 데이터를 뽑아내 사용해야 한다.

 

아래와 같은 코드를 사용했다.

 

let day = ...현재 날짜 코드

const result = await parseStringPromise(받은 데이터);

let listArr = ["frcstOneCn", "frcstTwoCn", "frcstThreeCn", "frcstFourCn"];
let dustData = {};

listArr.forEach((val, idx) => {
    let data = result.response.body[0].items[0].item[0][val][0];
    let regions = data.split(", ");
    let ulsan = regions.find((region) => region.startsWith("울산"));
    let localDate = (day + idx).toString().padStart(2, "0");
    dustData[`${month}/${localDate}`] = ulsan.split(" : ")[1];
});

res.json(dustData);

각 줄을 설명하면 다음과 같다.

  • parseStringPromise : XML 데이터를 자바스크립트 객체로 변환해준다.
  • listArr : 각 날짜의 예보정보에 맞는 객체 key값을 넣어두고 반복하여 예보정보를 가져올 수 있도록 한다.
  • result.response.body[0].items[0].item[0][val][0] : 공공데이터로 받은 데이터는 객체 내 배열 형태로 중첩되어 있어 이와같은 코드가 사용되었다. val 부분에 listArr의 값이 들어가 순차적으로 예보 정보를 받게 된다.
    ※ data에는 "서울 : 낮음, 인천 : 낮음, 울산 : 낮음, ... , 신뢰도 : 높음" 문자열이 들어있다.
  • data.split(", "); : ", "을 기준으로 문자열을 나누어 배열로 반환한다.
    ※ regions에는 ["서울 : 낮음", "인천 : 낮음", "울산 : 낮음" ... "신뢰도 : 높음"] 배열이 들어있다.
  • regions.find((region) => region.startsWith("울산")) : regions 배열에서 특정 항목을 찾기위해 find를 활용한다. startsWith를 활용하면 특정 문자열로 시작하는 항목을 찾을 수 있다.
    ※ ulsan에는 "울산 : 낮음" 문자열이 들어있다.
  • (day + idx).toString().padStart(2, "0") : 오늘 날짜에 현재 반복문 인덱스를 더하여 예보 날짜와 매치한다.
    ※ 오늘이 13일인 경우 localDate는 반복문 반복수에 따라 13, 14, 15, 16이 된다.
  • dustData[`${month}/${localDate}`] = ulsan.split(" : ")[1] : 비어있는 dustData에 오늘 날짜를 key로 하는 항목을 만든다. value는 ulsan변수에 들어있는 문자열을 " : " 를 기준으로 나누어 뒤쪽의 예보 정보를 사용한다.

 

최종적으로 아래의 데이터를 반환해준다.

{
    "10/16": "낮음"
    "10/17": "보통"
    ...
}

 

해당 데이터를 원하는곳에서 사용하면 된다.