다음 토이프로젝트의 개발 기록이다.

개요

날씨 정보를 받아오기 위해 공공데이터 포털의 기상청 API를 활용하기로 하였다.

공공데이터 포털에서 API 사용 신청

공공데이터 포털

API 테스팅 툴

Thunder Client - Rest API Client Extension for VS Code

809개 요청을 해야 된다고?

정부 24에서 기상청이 제공해주는 API는 단기예보, 중기예보 API 이 두개이다.

단기예보는 base_data 기준 이틀 뒤까지의 정보를 제공하고, 중기예보는 해당 날짜 기준 3일~10일까지의 정보를 제공한다.

그렇기에 3~10일까지의 데이터는 중기예보 API를 이용해 간략한 정보만 알려주고, 오늘~2일까지의 데이터는 좀 더 자세한 정보를 알려주는 것으로 업데이트 하려 하였으나…

뭐가 문제냐?

http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst?serviceKey=2Z194UJg1zEaizlFzp0Yz5nwql6oKpNl2wkM3Eow8FjthKY2IJ/zAt3nzTx4kmdx6lzXthcxntmaYAkLbLAIxg==&dataType=JSON&base_date=20240313&base_time=0500&nx=88&ny=88&numOfRows=1000

				 {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "TMP",
            "fcstDate": "20240313",
            "fcstTime": "2100",
            "fcstValue": "7",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "UUU",
            "fcstDate": "20240313",
            "fcstTime": "2100",
            "fcstValue": "1.3",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "TMP",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "2",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "UUU",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "0.9",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "VVV",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "-0.1",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "VEC",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "276",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "WSD",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "0.9",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "SKY",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "1",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "PTY",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "0",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "POP",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "0",
            "nx": 88,
            "ny": 88
          },
          {
            "baseDate": "20240313",
            "baseTime": "0500",
            "category": "WAV",
            "fcstDate": "20240314",
            "fcstTime": "0200",
            "fcstValue": "0",
            "nx": 88,
            "ny": 88
          },...

문제는 데이터가 날아오는 방식…!

{
  "baseDate": "20240313",
  "baseTime": "0500",
  "category": "VEC",
  "fcstDate": "20240314",
  "fcstTime": "0300",
  "fcstValue": "276",
  "nx": 88,
	"ny": 88
},

이런 포맷의 데이터가 category만 달리한채 10개가 넘게 날아오는데, 문제는 하루 24시간의 1시간마다의 데이터가 존재하기 때문에 하루에 해당하는 데이터만 해도 290개 가량이 되버리는 것이다…!

POP	강수확률	%	8
PTY	강수형태	코드값	4
PCP	1시간 강수량	범주 (1 mm)	8
REH	습도	%	8
SNO	1시간 신적설	범주(1 cm)	8
SKY	하늘상태	코드값	4
TMP	1시간 기온	℃	10
TMN	일 최저기온	℃	10
TMX	일 최고기온	℃	10
UUU	풍속(동서성분)	m/s	12
VVV	풍속(남북성분)	m/s	12
WAV	파고	M	8
VEC	풍향	deg	10
WSD	풍속	m/s	10

interface ITimeData {
  [category: string]: string | number; // Modify the value to allow array or single value
}

interface IParseArr {
  [fcstDate: string]: {
    [fcstTime: string]: ITimeData;
  };
}

interface IItem {
  baseDate: string;
  baseTime: string;
  category: string;
  fcstDate: string;
  fcstTime: string;
  fcstValue: string;
  nx: number;
  ny: number;
}

const params = {
  serviceKey: serviceKey,
  dataType: "JSON",
  base_date: "20240318",
  base_time: "0500",
  numOfRows: "1000",
  nx: 93,
  ny: 89,
};

const isVaildCategory = (category: string) => {
  const vaildCategory = ["SKY", "POP", "PCP", "TMP", "TMN", "TMX"];
  return vaildCategory.includes(category);
};

const getWeatherShort = async (base_date: string): Promise<void> => {
  const url = "/getVilageFcst";
  params.base_date = base_date;
  try {
    const response = await instance.get(url, { params });
    // console.log(response);
    const dataArr = response.data.response.body.items.item;
    const parseArr: IParseArr = {};

    dataArr.forEach((item: IItem) => {
      const { fcstDate, fcstTime } = item;
      if (!parseArr[fcstDate]) {
        parseArr[fcstDate] = {};
      }
      if (!parseArr[fcstDate][fcstTime]) {
        parseArr[fcstDate][fcstTime] = {};
      }
      const { category, fcstValue } = item;

      if (isVaildCategory(category))
        parseArr[fcstDate][fcstTime][category] = fcstValue;
    });
  } catch (e) {
    let message;
    if (e instanceof Error) message = e.message;
    else message = String(e);
    console.error(message);
  }
};

export default getWeatherShort;

이를 위해 객체를 잘 정의해주는 게 중요했는데, IItem 타입으로 날아오는 기상청 데이터를 다음과 같은 객체 형태로 관리하기로 하였다.

IParseArr

• 최상위 계층에 있는 객체.
• fcstDate를 기준으로 분류한다.
• 자식으로 fcstDate 객체를 가진다. key 값은 “20240318” 형태인 string 값.

fcstDate

• 하루에 해당하는 데이터를 가지고 있다.
• fcstTime 객체를 자식으로 가진다. key 값은 “0050” 형태인 string 값.

fcstTime

• 해당 1시간에 해당하는 데이터를 가지고 있다.
• [category: string]: string | number 형태의 구조를 가진 객체이다.
• category가 유효한 문자라면 해당 category를 키로, fcstValue를 값으로 하여 객체 요소를 추가한다.