OpenWeatherMap API

오늘은 OpenWeatherMap API를 사용해서 실시간 수원시 날씨 컴포넌트를 만들었다. 우선 최종 결과는 아래 사진이다.

Footer 부분에 날씨 컴포넌트를 만들어서 넣었다. 오늘은 비가 오기 때문에 날씨가 비가 온다. 지금 부터는 어떻게 만들었는지 기록하려 한다.

gitHub : https://github.com/leeyulgok/yulgok-page

컴포넌트 만들기

API

우선 가장 중요한 건 OpenWeatherMap에서 API를 가져오는 것이다. 이 부분은 부트캠프를 진행하면서 이미 다뤘던 부분이기 때문에 더 다루지는 않을 것이다.

공식 사이트 : https://openweathermap.org/

useFetchWeather이라는 custom Hook을 만들어서 진행했다. 이 부분에 대해 자세한 코드를 알고 싶으면 git을 가보면 좋다. 이렇게 API를 받아오고 데이터를 뿌려봤다.

처음에는 이렇게 나온다. 날씨 같은 경우에는 화씨로 나오기 때문에 섭씨로 바꾸기 위해서 data.main.temp에 273.15를 뺐다.

아이콘

아이콘은 fontawesome 이라는 사이트에서 다운받았다. 지금은 여름이기 때문에 일단 맑음, 맑고 흐림, 흐림, 비 이렇게 4개의 날씨만 다운 받았다.

공식 사이트 : https://fontawesome.com/

그리고 컴포넌트를 만들어서 위의 데이터를 넣기 전에 아래의 사진처럼 하드코딩으로 만들었다.

컴포넌트화 하기

이제는 데이터와 만든 컴포넌트, 개인 프로젝트에 결합하는 작업을 했다.

Weather.jsx

import useFetchWeather from '../../../hooks/useFetchWeather';

import classes from './Weather.module.css';

import Sun from '../../UI/icon/Sun'
import Cloud from '../../UI/icon/Cloud';
import CloudSun from '../../UI/icon/CloudSun';
import Rain from '../../UI/icon/Rain';

const date = new Date();
const month = date.getMonth() + 1;
const day = date.getDate();

const Weather = () => {
    const { data, loading } = useFetchWeather();

    if (loading) return <div>Loading...</div>;
    
    let WeatherIcon;
    switch (data.weather[0].main) {
        case "Clear":
            WeatherIcon = <Sun />;
            break;
        case "Clouds":
            WeatherIcon = <Cloud />;
            break;
        case "Rain":
            WeatherIcon = <Rain />;
            break;
        default:
            WeatherIcon = <CloudSun />;
            break;
    }

    return (
        <div className={classes.weatherContainer}>
            <div className={classes.iconBox}>
                <h3>{month}월{day}일</h3>
                <div>
                    {WeatherIcon}
                </div>
            </div>
            <div className={classes.description}>
                <h4>수원시</h4>
                <hr />
                <p>현재온도: {Math.round(data.main.temp - 273.15)}°C</p>
                <p>최고온도: {Math.round(data.main.temp_max - 273.15)}°C</p>
            </div>
        </div>
    );
};

export default Weather;

코드는 이렇게 나왔다. data.weather[0].main이 OpenWeatherMap에서 날씨를 말해준다. 그래서 날씨에 따라 switch를 걸어줘서 아이콘을 담아 랜더링했다.

날짜 같은 경우는 Date를 사용했고, 다음의 따로 어려운 부분은 없었다. 그래서 가장 처음의 사진처럼 만들 수 있었다.

정리하기

이번에는 지난 번에 사용한 API인 날씨 API를 통해서 날씨 컴포넌트를 만들어봤다. 이렇게 작은 컴포넌트가 모여 날씨 페이지를 만드니 날씨는 어렵지 않게 접수했다는 생각이 든다.

지금 단계는 기초를 다 잡고 확실하게 넘어가는 단계라 생각한다. 그러니 지금 열심히 해두고 다음에는 이를 확실하게 응용해서 더 좋은 웹 사이트를 만들 준비를 해야겠다.