나의 첫 날씨 앱

API 통합으로 간단한 날씨 앱 구축

코딩 기술을 계속 배우고 향상시키면서 실시간 데이터를 얻기 위해 API를 사용하여 기본 날씨 앱을 구축하기로 결정했습니다. 이 프로젝트는 API와 상호 작용하고, 비동기 작업을 처리하고, 사용자 인터페이스를 동적으로 업데이트하는 방법을 이해하는 데 도움이 되었습니다. 이번 블로그에서는 앱을 만드는 데 사용한 코드를 안내해 드리겠습니다.

---

사업개요

날씨 앱은 특정 위치의 날씨 데이터를 가져와 현재 날씨와 3일 간의 일기예보를 표시합니다. WeatherAPI를 사용하여 데이터를 수집하고 JavaScript가 기능을 처리합니다.

---

주요 기능

1. 위치 검색: 사용자는 도시 이름을 입력하여 날씨 데이터를 얻을 수 있습니다.

2. 현재 날씨: 현재 기온, 날씨 등을 표시합니다.

3. 예보: 향후 3일 동안의 일기 예보를 표시합니다.

이 앱을 작동시키는 코드의 핵심 부분을 살펴보겠습니다.

---

1. API를 사용하여 날씨 데이터 가져오기

첫 번째 단계는 WeatherAPI에서 날씨 데이터를 가져오는 것입니다. API 호출을 처리하기 위한 함수를 설정하는 방법은 다음과 같습니다.

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

이 함수는 fetch()를 사용하여 WeatherAPI에 비동기 요청을 보냅니다. 현재 날씨와 3일 일기예보를 검색한 다음 해당 데이터를 displayCurrent() 및 displayForecast() 함수에 전달합니다.

---

1. 사용자 입력 처리

앱은 검색창을 통해 사용자 입력을 수신합니다. 사용자가 위치(예: "런던")를 입력하면 날씨 검색이 시작됩니다.

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

또한 클릭 시 검색을 실행하는 버튼을 추가했습니다.

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

이를 통해 사용자는 검색창에 입력하거나 검색 버튼을 클릭하여 날씨 데이터를 가져올 수 있습니다.

---

1. 현재 날씨 표시

데이터를 가져오면 displayCurrent() 함수가 페이지에 현재 날씨 세부 정보를 표시합니다. 작동 방식은 다음과 같습니다.

함수 displayCurrent(location, currentWeather) {
    if (현재날씨) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        카드HTML = `
            <div>



<p>이 기능은 현재 온도, 날씨 상태, 풍속, 습도 등의 추가 세부정보를 표시하는 카드를 생성합니다. 생성된 HTML을 DOM에 삽입하여 페이지를 동적으로 업데이트합니다.</p>


<hr>

<ol>
<li>3일 예보 표시</li>
</ol>

<p>다음으로 앞으로 3일간의 일기예보를 표시합니다. 이는 displayForecast() 함수에 의해 처리됩니다.<br>
</p>
<pre class="brush:php;toolbar:false">함수 displayForecast(forecastData) {
    ForecastHTML = '';
    for (let i = 1; i 



<p>이 기능은 예측 데이터를 반복하여 다음 이틀 동안의 카드를 생성하여 최고 및 최저 기온, 기상 조건, 아이콘을 표시합니다.</p>


<hr>

<p>결론</p>

<p>API와 상호작용하고, JSON 데이터를 처리하고, 웹페이지를 동적으로 업데이트하는 방법을 배웠기 때문에 이 날씨 앱을 구축하는 것은 저에게 큰 도움이 되었습니다. 이 프로젝트는 비동기 JavaScript, DOM 조작 및 이벤트 처리에 대한 지식을 확고히 하는 데 도움이 되었습니다.</p>

<p>JavaScript와 API를 이제 막 시작했다면 이 날씨 앱은 기술을 연습할 수 있는 간단하면서도 강력한 방법입니다. 오류 처리, 더 자세한 예측 또는 UI의 어두운 모드와 같은 더 많은 기능을 추가하여 이 프로젝트를 확장할 수 있습니다.</p>


<hr>

<p>코드를 자유롭게 시험해보고 필요에 맞게 수정해 보세요. 질문이나 제안 사항이 있으면 알려주세요!</p>