Web/JS

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

가나닩 2024. 10. 13. 23:15

공공데이터포털에서 제공하는 대기오염 예보정보를 활용하고자 하였다. 한국환경공단(에어코리아)에서 제공하고 있는 대기오염 데이터는 특정 날짜로부터 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": "보통"
    ...
}

 

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