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

소개

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

👀 미리보기

weather forecast app preview

🎯 과제

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

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

🏆 성과

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

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

프로젝트 구조 설정

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

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

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

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

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

Initial project structure view

날씨 예보 데이터 가져오기

이 단계에서는 제공된 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 파일에 저장합니다.
웹 페이지를 새로 고치면 대상 이미지에 표시된 것처럼 주간 날씨 예보 정보가 표시됩니다.

Weekly weather forecast display

축하합니다! API 에서 데이터를 가져와 페이지의 HTML 요소에 바인딩하여 날씨 예보 프로젝트를 성공적으로 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

주간 날씨 예보 애플리케이션 개발

소개