날씨 예보 앱 | 주간 날씨 업데이트 - 정확한 날씨 정보

소개

이 프로젝트에서는 특정 위치의 주간 날씨 정보를 표시하는 날씨 예보 애플리케이션을 만드는 방법을 배우게 됩니다. 이 프로젝트는 API 에서 날씨 데이터를 가져오고, 응답을 파싱하며, HTML 요소를 동적으로 업데이트하여 사용자에게 날씨 예보를 제공하는 것을 포함합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

jQuery 의 AJAX 기능을 사용하여 API 에서 날씨 예보 데이터를 가져오는 방법
가져온 데이터를 웹 페이지의 해당 HTML 요소에 바인딩하는 방법
주간 날씨 예보 정보를 사용자 친화적인 형식으로 표시하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

사용자에게 주간 날씨 정보를 제공하는 간단한 날씨 예보 애플리케이션을 만들 수 있습니다.
API 에서 데이터를 가져오기 위해 AJAX 요청을 하는 방법을 이해할 수 있습니다.
jQuery 를 사용하여 DOM 을 조작하고 HTML 요소를 업데이트하는 능력을 보여줄 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── images        ## 이미지 리소스
├── js            ## js 파일 및 json 파일 디렉토리
├── index.html    ## 날씨 예보 페이지
├── style.css     ## css 파일

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

✨ 솔루션 확인 및 연습

날씨 예보 데이터 가져오기

이 단계에서는 제공된 API 를 사용하여 W-town 의 주간 날씨 예보 데이터를 가져오는 방법을 배웁니다.

코드 편집기에서 js/index.js 파일을 엽니다.
날씨 예보 데이터를 가져오는 역할을 하는 getweather() 함수를 찾습니다.
getweather() 함수 내에서 jQuery $.get() 메서드를 사용하여 js/weather.json API 엔드포인트에 GET 요청을 보냅니다.

// TODO
$.get("js/weather.json", function (data) {
  // Bind the weather forecast data to the HTML elements
  // ...
});

API 에서 반환된 응답 데이터는 data 매개변수로 콜백 함수에 전달됩니다. 이 데이터에는 주간 날씨 예보 정보가 포함되어 있습니다.

✨ 솔루션 확인 및 연습

날씨 예보 데이터를 HTML 에 바인딩

이 단계에서는 가져온 날씨 예보 데이터를 페이지의 해당 HTML 요소에 바인딩하는 방법을 배웁니다.

$.get() 메서드의 콜백 함수 내에서 데이터를 HTML 에 바인딩하는 코드를 찾습니다.
jQuery 를 사용하여 날씨 아이콘, 날씨 설명, 온도 및 바람 정보와 같은 필요한 HTML 요소를 선택합니다.

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

위의 코드는 주간 날씨 예보 정보를 포함하는 data.result 배열을 반복합니다. 각 항목에 대해 해당 HTML 요소를 선택하고 API 응답의 데이터로 내용을 업데이트합니다.
변경 사항을 js/index.js 파일에 저장합니다.
웹 페이지를 새로 고치면 대상 이미지에 표시된 것처럼 주간 날씨 예보 정보가 표시됩니다.