자바스크립트로 날씨 API 활용하기: 실생활 애플리케이션 만들기

자바스크립트로 하는 날씨 API 활용하기

안녕하세요, 프로그래밍과 실생활의 유용한 적용을 함께 고민하는 여러분! 오늘은 자바스크립트를 사용하여 외부 날씨 API를 호출하고, 간단한 날씨 정보 조회 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 API와 비동기 프로그래밍의 기초를 배우고, 우리 생활 속에서 어떻게 유용하게 활용될 수 있는지를 이해하는 데 초점을 맞추고 있습니다.

들어가며

우리는 일상에서 날씨 정보에 자주 접근합니다. 특히 여행을 계획하거나 외출 전에 날씨를 확인하는 것은 매우 중요한 생활 습관이죠. 오늘 우리가 만들 애플리케이션은 사용자가 입력한 도시의 날씨 정보를 실시간으로 가져오는 간단한 웹 앱입니다. 자바스크립트를 사용하여 API를 호출하는 방법도 배우고, 비동기 처리, JSON 데이터 파싱 등 유용한 기술들을 익혀볼 수 있습니다.

자, 이제 시작해볼까요?

코드 작성하기

먼저, 날씨 API를 호출하여 데이터를 가져오는 코드를 작성해보겠습니다. OpenWeatherMap API를 사용할 것이며, 무료 계정으로 회원가입 후 API 키를 발급받는 것을 추천합니다.

const apiKey = 'YOUR_API_KEY'; // 자신의 API 키를 입력하세요.
const weatherForm = document.getElementById('weather-form');
const weatherResult = document.getElementById('weather-result');

weatherForm.addEventListener('submit', async (event) => {
    event.preventDefault(); // 기본 폼 제출 행동 방지
    const city = document.getElementById('city').value;

    // API 요청 URL 생성
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
        const response = await fetch(url); // API 호출
        if (!response.ok) {
            throw new Error('날씨 정보를 가져오는 데 실패했습니다.');
        }
        const data = await response.json(); // JSON 데이터 파싱
        displayWeather(data); // 날씨 정보를 화면에 표시
    } catch (error) {
        weatherResult.innerText = error.message; // 오류 메시지 표시
    }
});

// 날씨 정보를 화면에 표시하는 함수
function displayWeather(data) {
    const { name, main, weather } = data;
    weatherResult.innerHTML = `
        <h2>${name} 기준</h2>
        <p>온도: ${main.temp} °C</p>
        <p>상태: ${weather[0].description}</p>
    `;
}

코드 설명하기

1. API 키 입력:
   • const apiKey에 OpenWeatherMap에서 발급받은 자신의 API 키를 입력합니다.
2. HTML 요소 선택:
   • weatherForm과 weatherResult는 각각 날씨 검색 폼과 결과를 출력할 공간입니다.
3. 이벤트 리스너 추가:

• 사용자가 폼을 제출하면 입력 폼의 기본 동작을 방지하고, 입력된 도시 값을 받아옵니다.

4. API 요청 URL 생성:
   • fetch 함수를 사용하여 날씨 데이터를 요청합니다. 이 때, 도시 이름과 자신의 API 키를 포함한 URL을 생성합니다.
5. 비동기 처리:
   • await를 사용해 API의 응답을 기다립니다. 만약 에러가 발생한다면 적절한 오류 메시지를 표시하게 됩니다.
6. 데이터 표시:

• 날씨정보를 성공적으로 받아오면, 도시의 이름, 온도, 날씨 상태를 화면에 출력합니다.

예제 실행 결과

자바스크립트 코드를 실행하고, 예를 들어 'Seoul'을 입력하면 아래와 같은 결과를 볼 수 있습니다:

서울 기준
온도: 20 °C
상태: 맑음

추가적으로

이 코드는 날씨 정보를 간단히 조회하는 수준에서 멈추지 않고, 몇 가지 확장을 고려해볼 수 있습니다:

• 더 많은 데이터 제공하기: 습도, 바람 속도 등의 추가 정보를 함께 표시할 수 있습니다.
• 스타일링: CSS를 이용하여 결과를 좀 더 보기 좋게 디자인할 수 있습니다.
• 오프라인 접근: PWA(Progressive Web App)로 발전시켜 오프라인에서도 사용할 수 있는 날씨 앱으로 개선할 수 있습니다.

마무리하며

오늘은 자바스크립트를 사용하여 외부 날씨 API로부터 데이터를 호출하고, 이를 활용하여 간단한 웹 애플리케이션을 만들어보았습니다. 이 프로젝트가 여러분의 웹 개발 스킬을 한층 더 업그레이드하는 데 도움이 되었기를 바랍니다. 추가 질문 사항이나 코드 관련 궁금증은 댓글로 남겨 주세요.

여러분도 자신만의 날씨 애플리케이션을 만들어 보세요! 프로그래밍은 언제나 새로운 도전을 제공하는 흥미로운 여정입니다. 그럼 다음 포스트에서 뵙겠습니다!