리팩토링 / 부산에 가면 3. 카카오 맵 & 실시간 날씨 데이터

카카오 맵

Next.js 환경참고과 CRA 환경에서 카카오맵API를 다뤄봤다.

이번 프로젝트의 경우 index.html 파일에 스크립트 태그를 먼저 추가해줘야 한다.

<script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey={appKey}&libraries=services,clusterer"
  ></script>

그리고 KaKao Developers에서
내 어플리케이션 > 앱 설정 > 플랫폼으로 가서 사이트 도메인을 반드시 추가해줘야한다.

발생한 에러

위와 같은 에러를 해결하기 위해 구글링해본바
카카오 맵 API 이용 시, parser-blocking 경고
A Parser-blocking, cross-origin 무슨 에러일까요?

원인
1) 에러 아니고, 알림의 의미이므로 그냥 놔둬도 된다.
2) 경고 메세지는 동작과 무관합니다.

실시간 날씨 데이터

먼저 openweathermap사이트에 회원가입을 한후 API키를 발급 받는다.
실시간 날씨 데이터의 경우

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

위의 양식을 따라 데이터를 입력해준다.
이번 프로젝트의 경우 나는 부산의 행정구역(구청, 군청)의 위도, 경도로 날씨를 조회하였습니다.

아래와 같이 한번의 함수 실행으로 16개의 행정구역의 날씨 정보를 모두 fetch 해오기 위해서
Promise.all()메서드를 사용하였다.

export const getWeatherInfo = async (name, lat, lon) => {
  const weatherKey = process.env.REACT_APP_WEATHER_KEY
  const URL='https://api.openweathermap.org/data/2.5/weather?'
  const { data } = await axios.get(URL+`lat=${lat}&lon=${lon}&appid=${weatherKey}`)
  return {
    name,
    data
  }
}
export const fetchWeather = async () => {
  return await Promise.all(
    VILLAGE.map((villageInfo) =>
    getWeatherInfo(villageInfo.name, villageInfo.lat, villageInfo.lon)
    )
  )
}

또한 날씨 데이터는 icon 프로퍼티를 제공해준다.저 값을 이미지 태그의 src값으로 넣어주면 날씨 아이콘을 제공해준다.

<img src={`http://openweathermap.org/img/w/${weatherData.data.weather[0].icon}.png`} alt={weatherData.name} />