[Day63] 날씨 API 연동

🔗 사용 API: OpenWeatherMap

OpenWeatherMap은 전 세계 날씨 정보를 제공하는 무료 API 이다 !

✅ API Key 보안 관리

.env 파일 생성

API Key는 외부에 노출되면 안 되는 민감 정보 → .env 파일에 저장해서 코드에서 분리 관리

VITE_WEATHER_API_KEY = 8b7f7d685453d033636d45

• .env - 기본 파일, 모든 환경에서 로드
• .env.local - 로컬 환경 변수, git에서 무시해야 함
• .env.development - 개발 환경
• .env.production - 프로덕션 환경
• .env.test - 테스트 환경

📌 Vite 환경에서의 주의사항

• VITE_ 접두사는 Vite 환경에서만 필수
  • VITE_API_KEY=abcdef123456 (O)
  • API_KEY=abcdef123456 (X - 클라이언트 코드에서 접근 불가)
• .env.local은 반드시 .gitignore에 추가해서 Git에 올라가지 않도록 관리

📌 환경 변수 사용 예시

const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

export const getWeatherByCurrentLocation = async (lat, lon) => {
  try {
    const res = await axios.get(
      `${BASE_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&lang=kr&units=metric`
    );
    return res.data;
  } catch (error) {
    console.log("날씨 가져오기 실패", error);
  }
};

• import.meta.env.VITE_변수명 으로 사용 가능

---

✅ 공공 API 사용 개요

API 엔드포인트

• 현재 위치 기반:
  https://api.openweathermap.org/data/2.5/weather?lat={위도}&lon={경도}&appid={API_KEY}
• 도시명 기반:
  https://api.openweathermap.org/data/2.5/weather?q={도시명}&appid={API_KEY}

API 호출 코드 구조

📂 useWeatherApi.js

공통 API 호출 함수들을 모아놓은 유틸 파일

import axios from "axios";

const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

// 1. 좌표 기반 날씨 정보
export const getWeatherByCurrentLocation = async (lat, lon) => {
  const res = await axios.get(
    `${BASE_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&lang=kr&units=metric`
  );
  return res.data;
};
// 2. 현재 위치 기반 날씨 정보
export const getCurrentData = async () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      async (pos) => {
        const { latitude, longitude } = pos.coords;
        const res = await getWeatherByCurrentLocation(latitude, longitude);
        resolve(res);
      },
      (err) => reject(err)
    );
  });
};
// 3. 도시명 기반 날씨 정보
export const getCountryData = async (city) => {
  const res = await axios.get(
    `${BASE_URL}?q=${city}&appid=${API_KEY}&lang=kr&units=metric`
  );
  return res.data;
};

🔍 왜 getCurrentData에서 Promise를 새로 만들어야 할까?

getCurrentData 함수에서 Promise를 사용하는 이유는 navigator.geolocation.getCurrentPosition이 Promise를 반환하지 않는 콜백 기반 API이기 때문 !

✅ 문제 상황

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

• 이 API는 성공 시에는 successCallback, 실패 시에는 errorCallback을 실행
• 하지만 비동기 작업임에도 불구하고 Promise를 반환하지 않기 때문에 await으로 사용할 수 없다

✅ 해결 방법: Promise로 감싸기

우리가 원하는 건 아래 코드처럼 getCurrentData를 불러오는 것

const data = await getCurrentData();

이렇게 쓰려면 getCurrentData는 Promise를 반환해야 하므로 감싼다 !

export const getCurrentData = async () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      async (pos) => {
        const { latitude, longitude } = pos.coords;
        const res = await getWeatherByCurrentLocation(latitude, longitude);
        resolve(res); // 성공하면 날씨 데이터 반환
      },
      (err) => reject(err) // 실패하면 에러 반환
    );
  });
};

🔁 흐름 요약

1. 브라우저가 현재 위치 좌표를 가져오기 위해 getCurrentPosition 호출
2. 성공 시 → 좌표 받아서 getWeatherByCurrentLocation으로 날씨 정보 요청
3. 이 모든 흐름을 하나의 Promise로 감싸서 await으로 다룰 수 있게 변환

💡

요약하자면 getCurrentPosition은 오래된 API라서 콜백 패턴을 사용
그래서 async/await 패턴을 쓰려면 이걸 Promise로 감싸면 비동기 흐름에 통합하게 해줌
getCurrentData는 이걸 감싸서, 우리가 편하게 await할 수 있도록 도와주는 함수

---

📂 WeatherPage 컴포넌트

React에서 useSearchParams를 활용해 도시명을 URL로 관리하고,
선택된 도시 또는 현재 위치에 따라 날씨를 보여주는 구조

import React, { useEffect, useState } from "react";
import css from "./WeatherPage.module.css";
import { getCurrentData } from "./useWeatherApi";
import { useSearchParams } from "react-router-dom";
import Button from "../weather/Button";
import { getCountryData } from "./useWeatherApi";

const WeatherPage = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const city = searchParams.get("city");
  const [weatherData, setWeatherData] = useState(null);

  const cityButtons = [
    { id: "current", label: "현재위치" },
    { id: "seoul", label: "서울" },
    { id: "tokyo", label: "도쿄" },
    { id: "new york", label: "뉴욕" },
    { id: "paris", label: "파리" },
  ];
  useEffect(() => {
    const fetchWeatherData = async () => {
      try {
        let data;
        if (city) {
          data = await getCountryData(city);
        } else {
          data = await getCurrentData();
        }
        setWeatherData(data);
      } catch (err) {
        console.err(err);
      }
    };
    fetchWeatherData();
  }, [city]);

  const handleChangeCity = (city) => {
    if (city === "current") {
      setSearchParams({});
    } else {
      setSearchParams({ city });
    }
  };

  return (
    <main className={css.main}>
      <h2>WeatherPage</h2>
      <div className={css.weatherInfo}>
        <p className={css.location}>
          {weatherData?.sys.country} / {weatherData?.name}
        </p>
        <div className={css.temperature}>
          <p>{weatherData?.main.temp} &#8451;</p>
          <p>
            <img
              src={`http://openweathermap.org/img/wn/${weatherData?.weather[0].icon}.png`}
              alt="weather"
            />
          </p>
        </div>
      </div>
      <div className={css.btnList}>
        {cityButtons.map((button) => (
          <Button
            key={button.id}
            city={button.id}
            label={button.label}
            onClick={handleChangeCity}
          />
        ))}
      </div>
    </main>
  );
};

export default WeatherPage;

실행 결과 예시

• 도시 버튼 클릭 → URL에 ?city=tokyo 등 자동 반영
• 현재 위치 클릭 시 geolocation API로 현재 좌표 요청

---

END