기상청 API 연동하기: 날씨 데이터를 쉽게 가져오는 방법

혹시 기상청 데이터를 어떻게 활용할 수 있는지 궁금하신가요? 이번 포스트에서는 "기상청 API 통신 구현"이라는 주제로, 기상청 데이터를 불러와서 사용하는 과정을 소개하려고 합니다. 기상 정보는 우리의 일상 생활에 큰 영향을 주기 때문에, 이를 통해 날씨 예보 앱이나 다양한 날씨 관련 서비스를 만들 수 있습니다. 지금부터 구체적인 코드 예시와 함께 설명드리겠습니다.

1. 환경 설정

먼저, 우리는 API 키를 포함한 환경 설정을 해야 합니다. 환경 파일에 필요한 정보를 추가하는 것이 첫 번째 단계입니다.

VITE_SERVICE_KEY="YOUR_SERVICE_KEY"
VITE_END_POINT_URL="http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/"
VITE_ULTRA_SRT_NCST="getUltraSrtNcst"

위의 설정은 기상청 API의 엔드포인트와 인증 키를 정의합니다. YOUR_SERVICE_KEY는 여러분이 기상청 API를 이용하기 위해 발급받은 키로 교체해야 합니다.

2. API 통신 설정

이제 React 컴포넌트에서 기상청 API와 통신하도록 설정할 것입니다. API를 통해 데이터를 받아와 화면에 표시하는 구조를 만들어 보겠습니다.

import React, { useState, useEffect } from "react";

const FetchWeather = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `${process.env.VITE_END_POINT_URL}${process.env.VITE_ULTRA_SRT_NCST}?serviceKey=${process.env.VITE_SERVICE_KEY}&pageNo=1&numOfRows=1000&dataType=json&base_date=20240710&base_time=2000&nx=55&ny=127`
        );
        if (!response.ok) {
          throw new Error("네트워크 응답이 올바르지 않습니다");
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);
  
  if (loading) return <div>로딩중...</div>;
  if (error) return <div>에러: {error}</div>;

  return <div>{JSON.stringify(data, null, 2)}</div>;
};

export default FetchWeather;

이 코드는 process.env를 활용해 환경 변수에 접근하여 API 요청을 만드는 패턴을 보여줍니다. useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 API 요청을 보내고, 데이터를 받아 상태를 업데이트합니다.

3. API 요청 결과 처리

기상청 API 요청에 성공하면 데이터를 data 상태에 저장하고 화면에 JSON 형태로 출력합니다. 로딩 중일 때와 에러가 발생했을 때도 각각의 상태를 표기합니다. 이렇게 하면 사용자에게 현재 상태를 알려줄 수 있습니다.

4. POST 요청 예제

단순히 기상 데이터를 가져오는 것 외에도, 특정 데이터를 서버로 전송하는 POST 요청도 가능합니다.

const PostData = () => {
  const [postData, setPostData] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        body: JSON.stringify({
          title: postData,
          body: postData,
          userId: 1,
        }),
        headers: {
          "Content-Type": "application/json; charset=UTF-8"
        },
      });
      const result = await response.json();
      alert("데이터가 성공적으로 전송되었습니다!");
      console.log("POST 응답:", result);
    } catch (error) {
      console.error("에러:", error);
      alert("데이터 전송 중 오류가 발생했습니다.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={postData}
        onChange={(e) => setPostData(e.target.value)}
        placeholder="전송할 데이터 입력"
      />
      <button type="submit">데이터 전송</button>
    </form>
  );
};

export default PostData;

이 예제에서는 입력한 데이터를 POST 요청을 통해 전송하고, 성공하면 알림창을 띄우도록 했습니다. 이처럼 간단히 POST 요청을 통해 서버와 통신할 수 있습니다.

5. 좌표 변환 유틸리티

기상청의 특정 데이터를 활용하기 위해서는 좌표 변환이 필요할 수 있습니다. 아래는 LCC DFS 좌표 변환을 위한 유틸리티 함수입니다.

export const convertCoordinates = (code, lat, lng) => {
  const RE = 6371.00877; // 지구 반경(km)
  const GRID = 5.0; // 격자 간격(km)
  const SLAT1 = 30.0 * Math.PI / 180.0; 
  const SLAT2 = 60.0 * Math.PI / 180.0;
  const OLON = 126.0 * Math.PI / 180.0;
  const OLAT = 38.0 * Math.PI / 180.0;
  const XO = 43;
  const YO = 136;

  const DEGRAD = Math.PI / 180.0;

  let result = {};
  if (code === "toXY") {
    let ra = Math.tan(Math.PI * 0.25 + lat * DEGRAD * 0.5);
    ra = (RE * Math.cos(SLAT1) / Math.tan(Math.PI * 0.25 + SLAT1 * 0.5)) / ra;
    let theta = lng * DEGRAD - OLON;
    theta = theta * Math.sin(30.0 * DEGRAD);
    result.x = Math.floor(ra * Math.sin(theta) + XO + 0.5);
    result.y = Math.floor(RE * Math.cos(SLAT1) / Math.tan(Math.PI * 0.25 + SLAT1 * 0.5) - ra * Math.cos(theta) + YO + 0.5);
  } else if (code === "toLL") {
    // ... 역변환 로직 ...
  }

  return result;
}

이 함수는 경도와 위도를 좌표로 변환하거나 그 반대로 변환하는 역할을 합니다. 이를 통해 정확한 기상 데이터를 얻을 수 있습니다.

기상청 데이터를 활용한 서비스는 매우 유용하며 이 과정에서 API를 어떻게 활용할지 아는 것은 큰 도움이 됩니다. 지금까지 설명드린 내용을 바탕으로 다양한 날씨 관련 애플리케이션을 만들어 보세요. 실시간으로 기상 정보를 제공하는 앱, 특정 지역의 날씨를 예측하는 사이트 등 많은 가능성이 열려 있습니다.

🔥 해당 포스팅은 Dev.POST 도움을 받아 작성되었습니다.