JavaScript 날씨 API 활용한 날씨앱 만들기

안녕하세요! 이번 포스트에서는 JavaScript를 활용하여 날씨 앱을 개발하는 방법에 대해 소개하겠습니다. 날씨 애플리케이션은 사용자에게 실시간 기상 정보를 제공하는 유용한 툴입니다. JavaScript와 날씨 API를 이용하여 간단한 날씨 앱을 만드는 과정을 단계별로 살펴보겠습니다.

날씨 API란?

날씨 API는 사용자가 특정 지역의 기상 정보를 요청할 수 있도록 해주는 인터페이스입니다. 다양한 날씨 API 서비스가 존재하며, 이를 통해 실시간 온도, 습도, 강수 확률 등의 정보를 가져올 수 있습니다. 이 글에서는 기상청에서 제공하는 API를 활용할 것입니다.

날씨 앱 만들기 과정

이번 프로젝트는 다음과 같은 단계로 진행됩니다:

• 사용자의 현재 위치 정보 획득 및 좌표 변환
• 현재 시각 및 날짜 정보 가져오기
• API를 통해 날씨 데이터 요청 및 응답 처리
• 받아온 데이터를 사용자에게 보여주기

1단계: 위치 정보 획득

날씨 정보를 정확하게 가져오기 위해서는 사용자의 GPS 좌표가 필요합니다. 이를 위해 JavaScript의 Geolocation API를 활용하여 사용자의 현재 위치를 얻을 수 있습니다. 다음은 Geolocation API 사용 예제입니다.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    console.log("위도: " + latitude + ", 경도: " + longitude);
  }, function(error) {
    console.error("위치 정보를 가져올 수 없습니다: ", error);
  });
} else {
  console.error("이 브라우저는 Geolocation을 지원하지 않습니다.");
}

2단계: 날짜 및 시간 정보 가져오기

기상청 API에 요청하기 위해서는 현재 날짜와 시간을 알아야 합니다. 이 정보를 제공하는 방법은 다음과 같습니다.

let today = new Date();
let year = today.getFullYear();
let month = String(today.getMonth() + 1).padStart(2, '0');
let day = String(today.getDate()).padStart(2, '0');
let hour = String(today.getHours()).padStart(2, '0') + '00'; // HH00 형식
let baseDate = ${year}${month}${day};
let baseTime = hour;

3단계: API 요청하기

이제 날씨 정보를 요청하기 위해 API URL을 구성합니다. 여기서 필요한 파라미터는 다음과 같습니다:

• serviceKey: API 인증 키
• numOfRows: 응답 결과의 개수
• pageNo: 페이지 번호
• dataType: 응답 형식 (주로 JSON)
• base_date: 요청할 날짜
• base_time: 요청할 시간
• nx, ny: 기상청 격자 좌표

이 파라미터를 사용하여 API 요청을 수행합니다. 아래는 JavaScript를 사용해 API 요청을 보내는 예제입니다.

let apiUrl = http://newsky2.kma.go.kr/service/SecndSrtpdFrcstInfoService2/ForecastSpaceData?ServiceKey=YOUR_SERVICE_KEY&nx=${nx}&ny=${ny}&base_date=${baseDate}&base_time=${baseTime}&_type=json;
fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    console.log(data); // 날씨 정보 출력
  })
  .catch(error => {
    console.error("API 요청 오류: ", error);
  });

4단계: 응답 데이터 처리

API로부터 받은 JSON 형식의 응답 데이터를 파싱하여 사용자가 이해할 수 있는 형태로 변환합니다. 날씨 상태를 확인하여 UI에 반영하는 예제는 다음과 같습니다.

function displayWeather(data) {
  let weatherInfo = data.response.body.items.item;
  let weatherText = 현재 온도: ${weatherInfo.T3H}도, 습도: ${weatherInfo.REH}%;
  document.getElementById('weatherOutput').innerText = weatherText;
}
// fetch 요청 이후 displayWeather(data) 호출

결론

이번 포스트에서는 JavaScript와 날씨 API를 이용하여 간단한 날씨 앱을 만드는 과정을 살펴보았습니다. 사용자의 현재 위치 정보를 기반으로 날씨 데이터를 요청하고, 이를 화면에 표시하는 방법을 배웠습니다. 이러한 기초 지식을 바탕으로 더 다양한 기능을 추가하여 발전시킬 수 있습니다.

이제 여러분도 직접 날씨 앱을 만들어 보시기 바랍니다. API를 활용하여 자신만의 정보를 제공하는 앱을 만드는 것은 매우 유익한 경험이 될 것입니다.

날씨 API를 활용한 다양한 예제를 통해 더 풍부한 콘텐츠를 만들어보세요. 감사합니다!

질문 FAQ