OpenWeather api 오늘의 날씨

OpenWeather api 오늘의 날씨

 

📌프로젝트 목표

api를 사용하여 데이터 요청하는 법을 익히기 위해서 만들었습니다. 

 

💻 사용기술

Design : Figma, Illustrator

Skill : HTML, CSS, JavaScript

github : https://github.com/dpwl35/weather

Demo : https://funny-salmiakki-15a0f6.netlify.app/

Weather

 

📑 구현기능

- 사용자에게 허락 받은 후 현재 위치 값 가져오기

- 데이터를 요청하고 받은 데이터 화면에 표출하기

- Date 객체를 통해 오늘 날짜 표시하기

 

✂ 디자인

사용될 아이콘 디자인.

 

 

❓ 오픈 api란 ? Application Programming Interface

오픈API란 누구나 사용할 수 있도록 공개된 API를 말한다. 데이터를 표준화하고 프로그래밍해 외부 소프트웨어 개발자나 사용자가 바로 개발(어프리케이션)에 활용할 수 있는 형태의 개방 형식. 개방된 오픈API를 이용해 다양하고 재미있는 서비스나 애플리케이션, 다양한 형태의 플랫폼을 개발할 수 있다.

 

OpenWeather KET 받기

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

회원가입 후 API Key를 신청한다. Status는 활성화 상태여야 한다.

 

❌ API Key는 공개된 곳에 올릴 수 없다. 

• git 에 올릴 때는 push되지 않게 env 파일을 생성 후 상수로 api key를 선언 후 내보낸다.
• .gitignore 파일 생성 후 env.js 파일명 넣는다.

 

 

---

완성된 화면

기온별 추천 옷차림이 추가된 화면

 

사용자의 현재 위치 좌표 허락 구하기

Using the Geolocation API 사용

if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}

const getPosition = (position) => {
  console.log(position);
  const {latitude, longitude} = position.coords;
  getCurrentWeather(latitude, longitude);
}

const errorHandler = (error) => {
  console.log(error.message);
}

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(getPosition, errorHandler);
} else {
  console.log('geolocation IS NOT available');
}

Using the Geolocation API를 통해서 console.log에 position을 출력해보면 위도와 경도 값을 알 수 있습니다.

좌표를 얻지 못했을 때의 화면

 

API data 요청하는 법 

1. OpenWeather API 에서 Current Weather Data 사용 요청을 보낼 URL을 설정합니다.

    - 원하는 옵션은 파라미터 규칙을 보고 추가할 수 있습니다.  

2. Using the Fetch API   fetch 메소드를 사용해서 API를 호출합니다. 

fetch(URL)
.then((response) => response.json())
.then((data) => {console.log(data)})

 .then((data) => {
    const city = document.querySelector('.city');
    city.innerText = data.name;
     ...(생략)

api로 받은 데이터를 화면에 넣어줍니다. 

 

 

❗ OpenWeatherMap Api에서는 비가 오지 않을 때 강수량 데이터를 보내지 않는다.

→ 받은 데이터가 'Rain'일 때 강수량을 넣고 비가 오지 않을 때는 - 로 표시하는 코드를 추가합니다. 

비가 내리지 않는 날에 제대로 뜨는지 확인

 

 

날씨 아이콘

api에서 제공해주는 아이콘 →  Weather icons 

제공해주는 아이콘을 사용하지 않고 날씨 아이콘 값과 직접 만든 svg 파일 이름을 똑같이 써서 아이콘을 변경했습니다.  

icon.src = `/icon/${data.weather[0].icon}.svg`

 

Date 

new Date 객체를 통해 오늘 날짜를 표시합니다.

//날짜, 시간
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();

//10월 이전이거나 일이 10일 이전이면 2자리가 되지 않기 때문에
var todayString = todayYear + "-";
if (todayMonth < 10) {
	todayString += "0";
}
todayString += todayMonth + "-";
if (todayDate < 10) {
	todayString += "0";
}
todayString += todayDate;
document.querySelector('.date').innerText = todayString;

10월 이전이거나 일이 10일 이전이면 2자리가 되지 않기 때문에 10월 이전에는 숫자 앞에 0이 붙는 코드를 추가해 10 이전의 숫자는 월이나 날짜를 두자리로 표기되도록 합니다. 

 

 

기온별 추천 옷차림 추가 

 if( 4 >= temp2 ){
      clothes.innerText = '패딩, 두꺼운 코트, 누빔 옷, 기모'
    }else if( 8 >= temp2 ){
      clothes.innerText = '울 코트, 히트텍, 가죽 옷, 기모'
    }
    ...

현재 온도에 따라 기온별 추천 옷차림을 하단에 띄워줍니다. 

 

 

---

 

 

회고록

직접 디자인한 페이지에 데이터를 넣어 보여주는 작업이 재밌었다.

API로 데이터를 받아 화면에 표출하는 건 예전에 궁금해서 봤던 강의가 있었는데 보기만 하고 직접 해보지는 않았었다. 그 후에 회사에서 마지막으로 진행한 프로젝트에서 백엔드에서 만든 API를 받아 그리드에 데이터를 넣어주는 작업을 하다가 집에서 다른 API를 사용한 페이지를 만들어 보고 싶었는데 마침 예전에 만들어둔 날씨 아이콘이 있었고 사람들이 날씨 API를 많이 사용하길래 오늘의 날씨를 알려주는 페이지를 만들게 됐다. 

 

 

프로젝트 진행 후 얻은 것

강수량을 출력할 때 data.rain.1h로 출력해 보니까 [object Object]가 떴다. 객체 안의 객체는 다르게 접근해야 한다는 것을 알게 됐다.