OpenWeatehrMap API

API-KEY 확인

홈페이지에 접속해 회원가입/로그인을 하면 API KEY를 확인할 수 있습니다.

API_KEY를 복사한 다음 프로젝트의 .env 파일에 등록합니다.

저는 Vite를 사용해 프로젝트를 진행중이므로 다음과 같이 작성했습니다.

//Vite를 사용하는 경우, 환경 변수 이름은 `VITE_` 로 시작해야 합니다.
VITE_WEATHER_API_KEY="my_api_key"

//weather widget component에서 import해서 사용합니다.
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

☝🏻 Vite가 아닌 경우

// .env
REACT_WEATHER_API_KEY="api_key"
// weather widget component
const API_KEY = prpcess.env.REACT_WEATHER_API_KEY

API-URL

API 탭에서 사용하려는 Current Weather Data 의 API doc을 확인합니다.

해당 API를 불러오는 url을 확인할 수 있습니다.

API url을 보면 lat, lon, API key 세가지의 값을 넣어야 합니다.

• API key 위치에는 위에서 가져온 API_KEY를 넣어줍니다.

위치 정보 가져오기

url에 넣을 위도와 경도를 접속 시의 위치를 기반으로 하기 위해 위치 정보를 가져옵니다.

HTML Geolocation API를 사용하면 유저의 위치를 가져올 수 있습니다. 이를 활용해 앱 실행시 위치를 가져오도록 useEffect를 작성합니다.

useEffect(() => {
		// 사용자 위치 정보를 비동기적으로 가져오는 함수
    navigator.geolocation.getCurrentPosition((position) => {
      // position 매개 변수는 현재 위치정보를 포함하고 있습니다.
      // position에서 위도값과 경도값을 구합니다.
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
    });
  }, []); // 앱을 처음 실행한 경우에만 동작하도록 합니다.

위에서 얻을 수 있는 lat, lon 값을 기준으로 날씨 정보를 가져옵니다. 이때 위치정보를 허용하지 않을 경우를 대비해 기본값으로 서울특별시 중구의 위도, 경도를 넣어줍니다.

const getWeather = async (lat = 37.5641, lon = 126.9970) => {
	try {
		const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`);
		const data = res.json()
		console.log(data)
	} catch (error) {
		console.error(error)
	}
};

날씨 정보 가져오기

날씨 정보를 가져오는 함수(getWeather())를 위치 정보를 가져오는 함수 안에서 lat, lon 값을 전달하여 호출합니다. console로 날씨 데이터를 확인합니다.

useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      getWeather(lat, lon);
    });
  }, []);

자세하게 확인하면 다음과 같습니다.

{
  "base": "stations",  // 내부 매개 변수
  "clouds": {
    "all": 0  // 흐림(%)
  },
  "cod": 200,  // 내부 매개변수
  "coord": {
    "lon": 126.7298,  // 위치의 경도
    "lat": 37.5126    // 위치의 위도
  },
  "dt": 1718188665,  // 데이터 계산 시간(unix, UTC)
  "id": 1838716,  // 도시id
  "main": {
    "feels_like": 22.42,  // 온도 (기본값 단위 : 켈빈)
    "pressure": 1005,  // 해수면의 대기압(hPa)
    "humidity": 60,  // 습도(%)
    "temp": 22.54,  // 온도 (기본값 단위: 켈빈)
    "temp_min": 20.94,  // 최저기온
    "temp_max": 27.91,  // 최고기온
  },
  "name": "Bucheon-si",  // 도시이름
  "sys": {
    "country": "KR",  // 국가 코드
    "id": 8105,  // 내부 매개변수
    "sunrise": 1718136690,  // 일출 시간(UTC)
    "sunset": 1718189672,  // 일몰 시간(UTC)
    "type": 1,  // 내부 매개변수
  },
  "timezone": 32400,  // UTC 초단위 이동
  "visibility": 10000,  //가시성 (단위 m, 최대 10km)
  "weather": [
    {
      "description": "clear sky",  // 그룹 내 날씨 상태
      "icon": "01d",   // 날씨 아이콘 id
      "id": 800,   // 기상조건 id
      "main": "Clear",  // 날씨 매개변수 그룹(비, 눈, 구름 등)
    }
  ],
  "wind": {
    "deg": 300, // 풍향
    "speed": 3.6,  // 풍속(기본값 단위 : m/s)
  },
}

여기서 사용하고자 하는 데이터를 추출해서 사용합니다.

날씨 state 만들기

저는 name, weather, temp 정보만 사용해 ‘현재 위치’, ‘날씨 온도’, ‘날씨 아이콘’, ‘날씨에 대한 설명’을 포함하는 간단한 위젯을 만들 것 입니다. 필요한 정보를 state로 관리하기 위해 useState를 사용합니다.

const [weather, setWeather] = useState({
	location: '',
	temperature: 0,
	weatherIconUrl: undefined,
	description: '',
});

날씨 데이터 가공하기

날씨 아이콘

그 중 ‘날씨 아이콘’을 가져오기 위해 API doc의 Weather Conditions를 확인합니다. (사이트에서 아이콘 형태를 확인할 수 있습니다.)

위 설명에 따르면 weahter.icon 값을 넣어 img url을 얻을 수 있습니다. url은 다음과 같습니다.

const iconUrl = `https://openweathermap.org/img/wn/${weather.icon}@2x.png`;

날씨에 대한 설명

API doc에 따르면 날씨 설명을 한글로 가져오기 위해 API_URL에 lang=kr을 추가할 수 있다고 나와있습니다. 하지만 번역이 부족하여 구글링한 결과 OpenWeatherMap api 다국어에 한국어 지원을 위한 협업용 파일이라고 날씨 코드에 따른 적절한 설명이 공유되어 있었고, 친절하신 분들이 매핑 객체를 만들어 공유해 주셨습니다.(정말 감사합니다!)

배열안에 객체로 매핑한 js코드도 있지만, 저는 dart map으로 작성해주신 @b0unt9님의 코드를 js로 사용했습니다.

// weatherDescKo.js 파일을 따로 정의
const weatherDescKo = {
    201: '가벼운 비를 동반한 천둥구름',
    200: '비를 동반한 천둥구름',
    ...
    962: '허리케인',
  };

export default weatherDescKo

weatherWidgetComponent에서 import해서 사용합니다.

// weatherWidgetComponent
import weatherDescKo from '../weatherDescKo';

const getWeather = async (lat, lon ) => {
        try {
           ...
           
            const location = data.name;
            // 온도 정보를 가져와 반올림 해줍니다.
            const temperature = Math.round(data.main.temp);
            // icon번호를 가져와 url로 가져옵니다.
            const weatherIcon = data.weather[0].icon;
            const weatherIconUrl = `https://openweathermap.org/img/wn/${weatherIcon}@2x.png`;
            // weather_id를 통해 가져온 weatherDescKo에서 id에 해당하는 설명을 가져옵니다.
            const weatherId = data.weather[0].id;
            const description = weatherDescKo[weatherId];
            
						// 정의한 속성들을 weather state에 반영합니다.
            setWeather({
                location,
                temperature,
                weatherIconUrl,
                description,
            });
        } catch (err) {
            console.log(err);
        }
    };

return문에서 weather state 값을 적절하게 배치합니다.

👀 Reference

• React :: 날씨 앱 만들기
• [React] 리액트로 OpenWeatherMap API 사용하기