프로젝트: JavaScript와 Weather API를 사용하여 날씨 앱 구축

프로젝트: JavaScript와 Weather API를 사용하여 날씨 앱 구축

날짜: 2024년 12월 18일

날씨 앱을 구축하는 것은 JavaScript, DOM 조작, 이벤트 처리 및 API 통합에 대한 이해를 확고히 하는 훌륭한 방법입니다. 이 프로젝트에서는 API에서 데이터를 가져와 웹페이지에 동적으로 표시하는 방법을 알려드립니다.

---

사업개요

날씨 앱의 기능

1. 날씨 API(예: OpenWeatherMap)에서 실시간 날씨 데이터를 가져옵니다.
2. 입력 기능: 사용자는 도시 이름을 입력하여 날씨 정보를 검색할 수 있습니다.
3. 동적 UI 업데이트: 온도, 습도, 날씨 조건을 동적으로 표시합니다.
4. 잘못된 도시 이름이나 API 문제에 대한 오류 처리

---

단계별 안내

1. 프로젝트 설정

프로젝트에 필요한 파일 만들기:

• HTML: 레이아웃을 구조화합니다.
• CSS: 앱 스타일을 지정합니다(기본 기능의 경우 선택 사항).
• JavaScript: 대화형 기능을 추가하고 날씨 API를 통합합니다.

---

2. Weather API 키 받기

OpenWeatherMap에 가입하고 API 키를 받으세요. API를 사용하여 날씨 데이터를 가져옵니다.

예제 API URL:

https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric

---

3. 기본 HTML 구조

입력 필드와 날씨 정보를 표시하는 섹션으로 간단한 레이아웃을 만듭니다.

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="stylesheet" href="styles.css">


  <div>




<hr>

<h3>
  
  
  <strong>4. Styling (Optional)</strong>
</h3>

<p>Add some CSS to make your app visually appealing.<br>
</p>

<pre class="brush:php;toolbar:false">#weather-app {
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 50px auto;
  width: 300px;
}

input, button {
  padding: 10px;
  margin: 10px 0;
}

#weather-result {
  margin-top: 20px;
}

---

5. JavaScript 코드 작성

DOM 조작 및 이벤트 처리

JavaScript를 사용하여 사용자 입력을 캡처하고 API에서 데이터를 가져와 결과를 표시합니다.

// JavaScript code for the weather app
const API_KEY = "your_api_key_here"; // Replace with your actual API key

document.getElementById("search-btn").addEventListener("click", () => {
  const city = document.getElementById("city-input").value;
  if (city) {
    fetchWeather(city);
  } else {
    displayError("Please enter a city name.");
  }
});

function fetchWeather(city) {
  const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  fetch(apiURL)
    .then(response => {
      if (!response.ok) {
        throw new Error("City not found");
      }
      return response.json();
    })
    .then(data => displayWeather(data))
    .catch(error => displayError(error.message));
}

function displayWeather(data) {
  document.getElementById("error-message").textContent = "";
  document.getElementById("city-name").textContent = `Weather in ${data.name}`;
  document.getElementById("temperature").textContent = `Temperature: ${data.main.temp}°C`;
  document.getElementById("description").textContent = `Condition: ${data.weather[0].description}`;
  document.getElementById("humidity").textContent = `Humidity: ${data.main.humidity}%`;
}

function displayError(message) {
  document.getElementById("error-message").textContent = message;
  document.getElementById("city-name").textContent = "";
  document.getElementById("temperature").textContent = "";
  document.getElementById("description").textContent = "";
  document.getElementById("humidity").textContent = "";
}

---

6. 앱 테스트

1. 브라우저에서 HTML 파일을 엽니다.
2. 도시 이름(예: '런던')을 입력하고 '검색'을 클릭하세요.
3. 페이지에 날씨 세부정보가 표시되는지 확인하세요.
4. 잘못된 도시와 빈 입력을 테스트하여 오류 메시지가 올바르게 표시되는지 확인하세요.

---

내 GitHub 저장소를 여기를 클릭하세요

7. 나중에 추가할 기능(선택적 개선 사항)

1. 지리위치: 사용자의 위치를 ​​자동으로 감지하고 날씨를 표시합니다.
2. 날씨 아이콘: API 응답의 날씨 아이콘을 사용합니다.
3. 스타일링: 모바일 사용자를 위한 애니메이션이나 반응형 디자인을 추가하세요.
4. 예보: 5일간의 일기예보를 표시합니다.

---

프로젝트 요약

날씨 앱을 구축하려면 다음과 같은 여러 가지 중요한 JavaScript 기술이 통합되어 있어야 합니다.

• API 데이터 가져오기 및 처리.
• DOM을 동적으로 조작합니다.
• 사용자 입력을 처리하고 결과를 대화형으로 표시합니다.

이 프로젝트를 완료하면 더욱 복잡한 JavaScript 애플리케이션을 구축하는 데 자신감을 갖게 될 것입니다.

---

다음 단계: 내일은 JavaScript의 오류 처리 및 디버깅에 집중하여 문제를 효과적으로 식별하고 해결하는 기술을 탐구하겠습니다. 계속 지켜봐주세요!