React / openweatherapi 사용하기

 

 

어제는 openweathermap API로 현재 내 위치의 5일간의 날씨를 받아오고,

styled-components를 사용해 스타일을 적용하는 과제를 수행했는데

 

연동하는데 시간을 많이 썼어서 이번 기회에 정리해두고자 한다 (예전에 바닐라 자바스크립트로는 받아왔는데도... )

일단 사용해서 작성한 코드를 App.jsx에 한번에 적어놨다

 

 

App.jsx

import { useState, useEffect } from 'react';
import { styled, createGlobalStyle } from 'styled-components';

// styled-components ------------------

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Title = styled.h2`
  text-align: center;
  margin-bottom: 2em;
`;

const WeatherCardContainer = styled.ul`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-items: center;
  width: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 20px;
  gap: 10px;
`;

const WeatherCard = styled.li`
  display: flex;
  width: 200px;
  height: 150px;
  justify-items: start;
  border-radius: 10px;
  border: 1px solid #eee;
  padding: 10px;
  flex-direction: column;
  justify-content: space-around;
`;

const WeatherCardTitle = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  img {
    width: 30px;
  }
`;

const WeatherCardContent = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const GlobalStyle = createGlobalStyle`
  * {
    margin : 0;
    padding : 0;
    box-sizing: border-box;
  }
`;

// styled-components 끝 ------------------

function App() {
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 위치 정보 요청
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        // const { latitude, longitude } = position.coords;
        const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

        // fetch 호출 (Promise 체인 사용)
        fetch(
          `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=kr`,
        )
          .then((res) => {
            if (!res.ok) {
              throw new Error('날씨 데이터를 불러오지 못했습니다.');
            }
            return res.json();
          })
          .then((data) => {
            // 3시간 간격 데이터 중에서 매일 12:00:00 데이터만 필터링
            const dailyForecast = data.list.filter((item) =>
              item.dt_txt.includes('12:00:00'),
            );

            // 원본 데이터에 list를 대체해서 저장
            setWeather({ ...data, list: dailyForecast });
          })
          .catch((err) => {
            setError(err.message);
          });
      },
      (err) => {
        setError(err.message);
      },
    );
  }, []);

  if (error) return <p>{error}</p>;

  return (
    <>
      <GlobalStyle />
      <Container>
        {weather ? (
          <>
            <Title>{weather.city.name} - 5Days Weather</Title>
            <WeatherCardContainer>
              {weather.list.map((item) => (
                <WeatherCard key={item.dt}>
                  <WeatherCardTitle>
                    {item.dt_txt.slice(0, 10)}
                    <img
                      alt={item.weather[0].main}
                      src={`https://openweathermap.org/img/wn/${item.weather[0].icon}.png`}
                    />
                  </WeatherCardTitle>
                  <WeatherCardContent>
                    <div>{item.weather[0].description}</div>
                    <div>{item.main.temp}°C</div>
                  </WeatherCardContent>
                </WeatherCard>
              ))}
            </WeatherCardContainer>
          </>
        ) : (
          <p>데이터를 받아오는 중</p>
        )}
      </Container>
    </>
  );
}

export default App;

 

 

---

 

 

 

1. API 키 발급받기

일단 openweathermap의 공식 홈페이지에 들어가서 회원가입을 해야한다. (이메일 인증 빼고는 번거로운거 없다)

아무튼 회원가입을 하고 메뉴에서 마이페이지(내 이름)을 클릭한다 (로그아웃은 왜 같이 표시해뒀지..)

 

 

 

마이페이지에 들어가서 API keys 탭을 누르면 기본으로 주는 API key가 있다.

가려둔 부분은 내 개인 발급키라서 가려뒀고, 각자 본인의 키를 복사해두면 된다.

 

 

 

1) .env 파일을 만들어 환경변수 관리하기

 

DB 연결시 사용자 비밀번호나 포트번호, 혹은 이런 API의 key값같은 중요한 정보들은 .env파일 (환경변수 파일)에 작성해두면 하드코딩 없이도 불러올 수 있다.

 

.env

• 프로젝트의 루트 디렉토리에 파일 생성하기 
• 파일명을 그냥 .env 로 지어야함 (setting.env 이런거 절 대 안됨 무조건 .env)
• 변수명, 값 사이에 공백이나 따옴표 등이 존재하면 안됨
• Vite로 생성한 프로젝트에서는 변수명의 접두사가 반드시 VITE_로 시작되어야함(CRA는 REACT_APP_로)
• github에 push할 예정이라면 .gitignore 파일에 .env를 반드시 추가할 것. (애초에 숨기려고 작성한건데 .env가 같이 올라가면 그냥 파일 하나 더 만든 사람이 되기 때문이다...)

// VITE로 생성한 프로젝트
VITE_WEATHER_API_KEY=abcdefghijklmnop
// CRA로 생성한 프로젝트
REACT_APP_WEATHER_API_KEY=abcdefghijklmnop

 

 

그렇게 만든 환경변수는 다음과 같이 접근할 수 있다.

나는 vite로 프로젝트를 생성했기 때문에 CRA 버전은 주석처리,,

 

 

// Vite 프로젝트일 때
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

// CRA 프로젝트일 때
// const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

 

 

---

 

 

2.  위치 가져오기 

function App() {
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 위치 정보 요청
    navigator.geolocation.getCurrentPosition(
    // position <- GeolocationPosition 타입의 객체
      (position) => {
        // 구조 분해 할당 문법
        const { latitude, longitude } = position.coords
        
        // 생략......
        
        },
      (err) => {
      // 실패 시 전달받은 에러객체의 메시지를 setError로 설정해줌
        setError(err.message);
      },
    );
  }, []); // 마운트 시 한번만 실행

 

Geolocation API

웹 브라우저에서 사용자의 동의 하에 위치 정보에 접근할 수 있는 API로, 사용자의 현재 위치를 가져올 수 있게 한다.

비동기적으로 동작하며, HTTPS 환경에서만 작동한다.

 

 

navigator.geolocation

 

브라우저가 지원하는 Geolocation 객체를 반환하는 속성으로, geolocation이 존재할 경우 위치 정보가 사용이 가능함

 

• navigator → 브라우저에 대한 정보를 담은 전역 객체 (navigator.userAgent, navigator.language, navigator.onLine 등)
• geolocation → 위치를 다루는 서브 객체
• (자세한 정보는 MDN 에서)

 

getCurrentPosition()

 

장치의 현재 위치를 가져오는 메서드

파라미터로는 (success, error, options)가 있다. options는 선택값이라 회색으로 (사실 error도 선택값이지만 보통 같이 처리하니까..)

• success : GeolocationPosition 객체를 유일한 매개변수로 받는 콜백함수
• error : GeolocationPositionError 객체를 유일한 매개변수로 받는 콜백함수

---

 

position 내에는 coords 객체가 들어있는데 이 안에 latitude와 longitude 값이 들어있다.

이를 구조 분해 할당 문법을 사용해 한줄로 축약할 수 있다.

const latitude = coords.latitude;
const longitude = coords.longitude;
// =
// latitude랑 longitude라는 속성 이름을 정확히 일치시켜서 꺼내옴 (같은 이름의 변수로 복사하는것)
const { latitude, longitude } = coords;

 

 

---

 

 

3. 날씨 데이터 요청

 

위치를 받아왔다는 전제 하에 날씨 데이터를 요청할 수 있으므로 날씨 데이터는 위치데이터를 성공적으로 받아왔을 때 이루어진다.

 

  (position) => {
    const { latitude, longitude } = position.coords;
    const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

    // fetch 호출
    fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=kr`,
    )
      // 
      .then((res) => {
        if (!res.ok) { // res의 상태가 ok가 아니라면
          // 바로 첫번째 catch 블록으로 전달됨
          throw new Error('날씨 데이터를 불러오지 못했습니다.');
        }
        return res.json(); // 성공시 json 파싱 객체 반환
      })
      .then((data) => {
        // 3시간 간격 데이터 중에서 매일 12:00:00 데이터만 필터링
        const dailyForecast = data.list.filter((item) =>
          item.dt_txt.includes('12:00:00'),
        );

        // 원본 데이터에 list를 대체해서 저장
        setWeather({ ...data, list: dailyForecast });
      })
      .catch((err) => {
        setError(err.message);
      });
  },

 

 

API 호출 시 필요한 값 (더 자세한 내용은 공식 사이트 참고)

매개변수	제공 해야 할 값 (value)
lat	위도 위치
lon	경도 위치
appid	고유 API 키
lang	매개변수 lang을 사용하여 해당 언어로 출력을 얻을 수 있음 (기본값 영어) 한국어 : kr
unit	화씨 온도 units=imperial 섭씨 온도 units=metric (섭씨 온도 사용할거임!)

 

 

받아온 api의 각 데이터는 아래와 같은 구조로 이루어져 있다.

일단 5일 간의 데이터를 받아와야하는데 받아오는 시간 기준을 정오 (12:00)로 잡았으므로 date를 나타내는 속성인 dt_txt에서 12:00:00을 포함하고 있는 객체만 필터링했다.

이제 아래 속성으로 값을 가져와 브라우저에 그려줘야 한다.

 

{
  "cod": "200",
  "message": 0,
  "cnt": 40,
  "list": [
    {
      "dt": 1745334000,
      "main": {
        "temp": 13.48,
        "feels_like": 12.35,
        "temp_min": 13.48,
        "temp_max": 13.48,
        "pressure": 1009,
        "sea_level": 1009,
        "grnd_level": 992,
        "humidity": 56,
        "temp_kf": 0
      },
      "weather": [
        {
          "id": 801,
          "main": "Clouds",
          "description": "약간의 구름이 낀 하늘",
          "icon": "02n"
        }
      ],
      "clouds": {
        "all": 18
      },
      "wind": {
        "speed": 1.11,
        "deg": 266,
        "gust": 1.34
      },
      "visibility": 10000,
      "pop": 0,
      "sys": {
        "pod": "n"
      },
      "dt_txt": "2025-04-22 15:00:00"
    }
  ],
  "city": {
    "id": '우리 동네라서 생략..',
    "name": "우리 동네라서 생략..",
    "coord": {
      "lat": "우리 동네라서 생략..",
      "lon": "우리 동네라서 생략.."
    },
    "country": "KR",
    // 생략
  }
}

 

 

---

 

 

4. 브라우저에 표시

아이콘을 표시하는 방법은 공식사이트의 해당 부분을 참고

weather에 값이 있을 경우 (잘 받아왔을 경우) 값을 뿌려주고 있고 그게 아닐 경우 데이터를 받아오는 중의 메시지를 표시해주고 있다.

// 만약 error가 null이 아니라면 에러 메시지만 화면에 렌더링
  if (error) return <p>{error}</p>;

  return (
    <>
      <GlobalStyle />
      <Container>
        {weather ? (
          <>
            <Title>{weather.city.name} - 5Days Weather</Title>
            <WeatherCardContainer>
              {weather.list.map((item) => (
                <WeatherCard key={item.dt}>
                  <WeatherCardTitle>
                    {item.dt_txt.slice(0, 10)}
                    <img
                      alt={item.weather[0].main}
                      src={`https://openweathermap.org/img/wn/${item.weather[0].icon}.png`}
                    />
                  </WeatherCardTitle>
                  <WeatherCardContent>
                    <div>{item.weather[0].description}</div>
                    <div>{item.main.temp}°C</div>
                  </WeatherCardContent>
                </WeatherCard>
              ))}
            </WeatherCardContainer>
          </>
        ) : (
          <p>데이터를 받아오는 중</p>
        )}
      </Container>
    </>
  );
}

 

 

 

결과 화면

 

 

 

 

 

참고
.env 파일 생성하기 : http://rominlamp.tistory.com/22
https://velog.io/@hoho_0815/env-%ED%8C%8C%EC%9D%BC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
https://ko.vite.dev/guide/env-and-mode
위치 받아오기 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Geolocation-API%EB%A1%9C-%F0%9F%97%BA%EF%B8%8F-%EC%9C%84%EB%8F%84-%EA%B2%BD%EB%8F%84-%EC%96%BB%EA%B3%A0-%E2%9B%85-%EB%82%A0%EC%94%A8-%EC%98%A8%EB%8F%84-%EC%A0%95%EB%B3%B4%EB%A5%BC-%EC%96%BB%EC%96%B4%EC%98%A4%EA%B8%B0
openweathermap API 사용하기 : 
https://jisilver-k.tistory.com/71