공공데이터포털에서 제공하는 대기오염 예보정보를 활용하고자 하였다. 한국환경공단(에어코리아)에서 제공하고 있는 대기오염 데이터는 특정 날짜로부터 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": "보통"
...
}
해당 데이터를 원하는곳에서 사용하면 된다.
'Web > JS' 카테고리의 다른 글
구조 분해 할당 (0) | 2024.10.25 |
---|---|
배열 내에 참조타입(객체 등)이 있을때 중복 제거하기 (0) | 2024.10.15 |
화살표 함수의 특징 (0) | 2024.09.30 |
JS 모듈을 불러오는 require와 import (0) | 2024.05.20 |
브라우저 저장소 (LocalStorage, SessionStorage, Cookie) (0) | 2024.05.17 |