[JS]날씨앱을 만들어 보자

기본적인 기능의 앱들을 만들어 보면서 javascript를 학습하기로 했다. 

그 중에서 첫번째로 날씨앱을 만들어 보았다.

 

이 앱은 검색창에 영어로 도시이름을 검색하면 해당 도시의 날씨와 기타 정보들을 확인 할 수 있는 앱이다. 

 

 

초기화면은 다음과 같이 검색할 수 있는 창과 버튼이 있다. 

 

해당 화면에서 올바른 이름으로 입력을 하게 되면 해당 도시의 정보를 확인 할 수 있지만 이름이 잘못되면 

"Invalid city name"이라는 문장이 나타나게 된다. 

 

자 그럼 제대로 작성하여 확인해보자 

Korea에 대한 날씨, 습도, 풍속을 확인 할 수 있다.

---

그렇다면 이것은 어떻게 구현하였을까? 

이것은 Open Weather Map API를 사용하여 해당 내용을 구현할 수 있었다. 

const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

apiUrl변수는 openweathermap api의 기본 URL을 포함한다. 이 API는 도시이름을 입력 받아서 해당 도시의 날씨정보를 JSON형식으로 변환한다. 또한 units=metric을 통해 온도를 섭씨 단위로 가져오도록 설정하였다. 

async function checkWeather(city) {
  const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

이 checkWeather함수는 비동기 함수로 선언이 되었는데 aysnc 키워드는 해당함수가 비동기 작업이며 await키워드를 사용할 수 있게 한다. city라는 매개변수를 전달하여 이를 url에 연결 할 수 있게 했다. 

 

fetch함수 호출 

fetch함수는 네트워크 요청을 수행하여 리소스를 가져오는 웹 API이다. 이 프로젝트에서는 openweathermapAPI에 요청을 보내 날씨 정보를 가져왔다. 

 

URL예시

만약 도시가 seoul이고 api가 yourapikey로 설정되어 있다면 완성된 URL은 다음과 같이 나타난다.

https://api.openweathermap.org/data/2.5/weather?units=metric&q=Seoul&appid=yourApiKey

 

HTTP요청 및 응답처리 

- fetch(apiUrl + city + &appid=${apiKey})는 이 URL로 GET요청을 보낸다. 

- 이 요청이 처리된 후, 서버는 해당 도시의 날씨 정보를 포함한 JSON데이터로 응답을 보낸다.

 

await의 사용 

await키워드는 fetch함수가 완료될 때까지 기다린 후, 결과를 response변수에 할당한다. 

이 과정에서 함수의 실행은 일시 중단되지만, 전체 프로그램이 멈추는 것은 아니다. 다른 코드가 계속 실행될 수 있고 response가 준비되면 함수는 다시 실행을 이어나간다. 

 

Response객체

response변수는 서버로부터 받은 HTTP응답을 나타내는 객체이다. 이 객체에는 응답상태코드, 응답데이터, 헤더 등이 포함된다. 

- 예를 들어 ,response.status는 응답의 http상태로 코드를 변환한다. 

- 이후 코드에서는 response.json()을 사용해 응답 데이터를 JSON으로 변환한다. 

 

API호출 결과 처리 

if (response.status == 404) {
  document.querySelector(".error").style.display = "block";
  document.querySelector(".weather").style.display = "none";
} else {

API호출이 성공하지 않으면 status==404에러 메세지를 보여준다. 에러가 발생하면 날씨 정보를 숨기고, 에러 메시지를 표시한다. 

호출이 성공하면 날씨 정보를 화면에 표시하고 에러 메시지를 숨긴다. 

 

날씨 정보 화면에 표시

var data = await response.json();
console.log(data);
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

response.json()으로 응답 데이터를 JSON형식으로 변환한 후 이를 데이터 변수에 저장한다. 

이를 .city .temp .humidity .wind등의 정보를 HTML요소에 표시한다. 

 

날씨 아이콘 

if (data.weather[0].main == "Clouds") {
  weatherIcon.src = "images/clouds.png";
} else if (data.weather[0].main == "Clear") {
  weatherIcon.src = "images/clear.png";
} else if (data.weather[0].main == "Rain") {
  weatherIcon.src = "images/rain.png";
} else if (data.weather[0].main == "Drizzle") {
  weatherIcon.src = "images/drizzle.png";
} else if (data.weather[0].main == "Mist") {
  weatherIcon.src = "images/mist.png";
}

조건문을 사용하여 data.weather[0].main값에 따라 날씨 상태를 확인하고 이에 맞는 이미지 파일을 weather Icon에 설정한다. 

 

이벤트 리스너 추가

searchBtn.addEventListener("click", () => {
  checkWeather(searchBox.value);
});

그리고 사용자가 검색버튼을 클릭하면 checkweather함수가 실행되어 사용자가 입력한 도시의 날씨 정보를 가져온다. 

 

마지막으로 checkWeather();호출!