TypeScript / 공공데이터포털 날씨 API 사용하기

공공데이터포털 날씨 API를 활용하여 간단하게 1시간 기온, 하늘상태, 강수상태를 보여주는 코드를 짜봤다.

(참고) 공공데이터포털 날씨 API는 https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15084084에서 사용했다.

API 사용방법은 제공하는 사이트 내에 문서가 있으니 그 문서를 보고 충분히 가져올 수 있다.

[구현화면]

[typeScript code] ※ 코드는 typeScript 코드만 해석(html 생략)

// 현재 날짜 및 발표  시작 자동 설정
const getBaseTime = () => {
    const now = new Date(); // 오늘날짜
    let hours = now.getHours(); // 오늘시간

    // 발표시각
    const baseTimeAPI = ["0200", "0500", "0800", "1100", "1400", "1700", "2000", "2300"];
    let baseTime = baseTimeAPI.find(time => parseInt(time) > hours) || baseTimeAPI[baseTimeAPI.length - 1];

    // 만약 baseTime이 현재 시간을 지나쳤다면, 가장 가까운 이전 시간으로 설정
    if (baseTime === baseTimeAPI[baseTimeAPI.length - 1] && hours < parseInt(baseTimeAPI[0])) {
        baseTime = baseTimeAPI[baseTimeAPI.length - 1]; // 아직 하루가 안 지난 경우 마지막 시간으로 설정
    }

    const baseDate = now.toISOString().split("T")[0].replace(/-/g, "");
    return { baseDate, baseTime };
}

const { baseDate, baseTime } = getBaseTime();

// API 데이터 가져오기
const weatherData = async () => {
    let serviceKey: string = "미공개";
	const apiUrl = `http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst?serviceKey=${serviceKey}&numOfRows=100&pageNo=1&dataType=JSON&base_date=${baseDate}&base_time=${baseTime}&nx=84&ny=96`;

    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data.response.body.items.item;
    } catch (error) {
        console.error("API 호출 에러:", error);
        return null;
    }
}

const weatherDataFilter = (items: any[]) => {
    const weatherInfo: { [key: string]: string | number } = {};

    items.forEach((item) => {
        switch (item.category) {
            case "TMP": // 1시간 기온
                weatherInfo["1시간기온"] = `${ item.fcstValue }°C`;
                break;
            case "SKY": // 하늘 상태
                const skyCode: { [key: string]: string } = { "1": "맑음", "3": "구름 많음", "4": "흐림" };
                weatherInfo["하늘상태"] = skyCode[String(item.fcstValue)] || "알 수 없음";
                break;
            case "PTY": // 강수 형태
                const ptyCode: { [key: string]: string } = { "0": "없음", "1": "비", "2": "비/눈", "3": "눈", "4": "소나기" };
                weatherInfo["강수상태"] = ptyCode[String(item.fcstValue)] || "알 수 없음";
                break;
        }
    });
    return weatherInfo;
}

const displayWeather = async () => {
    const weatherDATA = await weatherData();
    if (!weatherData) return;

    const processedData = weatherDataFilter(weatherDATA);

    const weatherElement = document.getElementById("weatherResult");
    if (weatherElement) {
        weatherElement.innerHTML = `
        <h2>오늘의 날씨</h2>
        <p>1시간기온: ${processedData["1시간기온"]}</p>
        <p>하늘상태: ${processedData["하늘상태"]}</p>
        <p>강수상태: ${processedData["강수상태"]}</p>
        `;
    }
};

displayWeather();

[프로젝트 들어가기 전, 생각]
1) API 형태가 어떻게 생겼는지 문서로 파악 > 내가 필요로 하는 내용이 무엇인지 파악해서 어떤 API를 사용할건지를 파악해야한다는 의미. 해당 API 내에서도 단기예보가 있고 초단기 예보가 있음 API 업데이트 주기도 파악해봐야하고 데이터를 내 코드에서 사용하기 용이한지도 전체적으로 확인해 본뒤 해당 API 중 어떤 API를 사용할지 결정해야함
나 같은 경우엔 단기예보 API 조회해서 사용함
2) API 호출이 어떻게 되는지 확인 > API 호출할때 필요한 게 뭘까?

• 서비스 키
• API 업데이트
  위와 같이 크게 두가지가 필요함

서비스키는 API 제공사이트에서 발급받으면 됨.
API 업데이트 같은 경우엔 API 제공문서를 확인해서 주기를 확인해야함. 그리고 오늘날짜기준으로 API 업데이트 될때마다 json을 불러올 수 있도록 코드를 짜야함. (API 제공문서를 보고 정리하면 됨)
3) 가져온 데이터 값이 어떻게 생겼는지 API 문서로 미리 파악하기
API 문서를 봐도 모르겠으면 그냥 api url로 파악해도 무관

[코드 설계]
TyepScript 함수를 총 4개 생각함
1) API 데이터 가져오는 함수 > weatherData

• 생략
  2) API 데이터 업데이트를 위한 날짜/시간 함수 > getBaseTime
• baseTimeAPI는 아래 이미지(API 문서) 참고
  
  ※ 해당 baseTime에 맞게 호출할 수 있도록 변수 추가
  ※ 그리고 baseTime과 현재시각과 비교해야하므로 오늘 시간을 가져와서 두개를 비교함

3) API 데이터 카테고리 분류하는 함수 > weatherDataFilter

• 내가 원하는 정보(1시간기온, 하늘상태, 강수상태)를 가져오기 위해 json 데이터를 반복문을 돌려서 내가 원하는 정보이면 배열에 담음
  4) html에 API 데이터를 출력하는 함수 > displayWeather
• 생략

[코드가 제대로 되었는지 확인]
json 코드를 확인하면 됨 / json에 있는 코드 그대로 사용하기 때문 (apiUrl 값을 그대로 주소창에 입력하면 json 나옴)
그리고 apiURL 끝에 nx=84&ny=96은 위경도임 > 이것도 문서화되어있으니 원하는 위경도 추가하면 됨. 이걸 사용자 위치에 따라 바뀌게 하려면 추가 코드가 필요함
나는 아주 간단하게 API 사용만 해봄. 추후, react 공부하면서 좀더 깊게 파볼 필요가 있어보임

[느낀점]
퍼블리싱할때, 공공데이터 포털 API 조사한 적이 있음. json 배열을 가져와서 코드화하진 않았지만 되게 어렵다고 느꼈었는데 막상 해보니 그렇게까지 어려운건 아니었다고 꺠달음.

js는 정리만 잘하면 설계가 잘되는 거 같음
실무할때는 남이 짠 코드도 있고 계속 수정사항이 들어오다보니 내가 생각한 설계와 다르게 뒤틀린 적이 허다함. 아니, 허다하다가 아니라 그냥 일상인듯하다. 그런 부분에서 어떻게 하면 좀더 설계하기 쉬울지 공부하면서 꺠달아보고 싶다.

이렇게