[#63] 날씨 오픈 API 연동

OpenWeatherMap(오픈 웨더 맵)

https://openweathermap.org/

Current weather and forecast - OpenWeatherMap

 

1️⃣ 로그인 및 API Key 발급

 

2️⃣ VSCode 확장 프로그램 thunder client로 API 테스트

https://api.openweathermap.org/data/2.5/weather?lat=44.34&lon=10.99&appid={API_KEY}

 

3️⃣ 환경 변수 설정

• 루트에 .env.local 파일 생성 및 .gitignore 등록

VITE_WEATHER_API_KEY=발급받은_키값

⚠️ Vite는 반드시 VITE_로 시작해야 환경 변수를 인식할 수 있음

 

4️⃣ API 연동 코드 작성

4-1. 기본 설정

• Vite에서는 환경변수를 가져올 때 process.env가 아니라 import.meta.env 사용

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'

4-2. 좌표로 날씨 정보 가져오기

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 (err) {
    console.log('좌표로 날씨 정보 가져오기 실패: ', err)
  }
}

4-3. 현재 위치 기반으로 날씨 정보 가져오기

• navigator.geolocation.getCurrentPosition API를 사용해 브라우저에서 사용자 위치를 요청

export const getCurrentData = async () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      async position => {
        try {
          const { latitude, longitude } = position.coords
          const res = await getWeatherByCurrentLocation(latitude, longitude)
          resolve(res)
        } catch (err) {
          console.log('좌표로 날씨 정보 가져오기 실패: ', err)
          reject(err)
        }
      },
      err => {
        console.log('위치 정보 가져오기 실패: ', err)
        reject(err)
      }
    )
  })
}

4-4. 도시명으로 날씨 정보 가져오기

export const getCountryData = async city => {
  try {
    const res = await axios.get(
      `${BASE_URL}?q=${city}&appid=${API_KEY}&lang=kr&units=metric`
    )
    return res.data
  } catch (err) {
    console.log('도시명으로 날씨 정보 가져오기 실패: ', err)
  }
}

 

5️⃣ WeatherPage 컴포넌트 구현

5-1. useSearchParams를 이용해 URL에 따른 날씨 데이터 보여주기

const [searchParams, setSearchParams] = useSearchParams()
const city = searchParams.get('city')
const [weatherData, setWeatherData] = useState(null)

useEffect(() => {
  const fetchWeatherData = async () => {
    try {
      let data
      if (city) {
        data = await getCountryData(city)
      } else {
        data = await getCurrentData()
      }
      setWeatherData(data)
    } catch (err) {
      console.log('날씨 데이터 가져오기 실패: ', err)
    }
  }
  fetchWeatherData()
}, [city])

5-2. 도시 변경 핸들러

const handleChangeCity = city => {
  city === 'current' ? setSearchParams({}) : setSearchParams({ city })
}