[JavaScript] 날씨 앱 만들기(OpenWeatherMap API)

OpenWeather

 

OpenWeatherMap API를 이용하여, JavaScript로 날씨 앱을 만들어 보려고 합니다.

 

Directory 구조

weather-app/
│
├── css/                  
│   └── style.css        
│
├── js/                    
│   ├── api.js            
│   ├── ui.js             
│   └── main.js           
│
├── index.html            
├── .gitignore               
└── README.md

 

css/: 스타일시트 파일들을 포함합니다.
js/: 자바스크립트 파일들을 포함합니다.
api.js: OpenWeatherMap 같은 외부 날씨 API와 통신하는 함수를 포함합니다.
ui.js: DOM 조작과 관련된 코드를 포함하여, 사용자 인터페이스를 업데이트하는 데 사용됩니다.
main.js: 앱의 메인 로직을 포함합니다. 이 파일에서는 앱을 초기화하고, 사용자의 입력을 처리하며, api.js와 ui.js에서 제공하는 함수를 사용합니다.
index.html: 앱의 진입점이며, 사용자 인터페이스를 정의합니다.
.gitignore: Git 버전 관리에서 제외할 파일이나 디렉토리를 지정합니다.
README.md: 프로젝트에 대한 설명, 사용 방법 등을 포함하는 문서입니다.

 

날씨 정보 조회 API (OpenWeatherMap API)

무료 API로 회원가입 시 API key 생성 가능합니다.

URL

위도와 경도

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

Parameters

lat	필수	위도
lon	필수	경도
appid	필수	API key
mode	선택	응답 형식 (xml or html) 기본 값: JSON

 

API 호출 (GET 요청)

 

 

API 관련으로 블로그 글이 생겨 아래 내용은 간략하게 정리 예정입니다. 24.05.07

JavaScript로 API 호출 어떻게 하는 건데?

 

fetch()

JavaScript에서 API 호출하는 가장 기본적인 방법입니다.

// API URL을 `url` 상수에 저장
const url = `https://api.openweathermap.org/....`;

// `fetch` 함수를 사용하여 위에 정의된 URL로 HTTP GET 요청
fetch(url).then(response => {
	// 요청에 대한 응답이 성공인지 확인
	// 응답을 JSON 형태로 변환
	if (response.ok) return response.json();

	// 응답이 성공적이지 않다면, 에러를 발생
	throw new Error('Network Response Error');
}).then(data => {
	console.log(data);
}).catch(error => {
    // 요청 과정에서 발생한 에러를 콘솔에 출력
    console.error('Weather API Error:', error);
});

 

Promise를 지원하여 비동기 코드를 작성하기가 매우 간단하며 Request와 Response와 같은 유용한 API를 제공합니다.

 

Request

Request 객체는 HTTP 요청을 나타냅니다.

const myRequest = new Request('https://api.openweathermap.org/....', {
  method: 'GET', // HTTP 메서드 (GET, POST 등)
  headers: new Headers({ // 요청 헤더
    'Content-Type': 'application/json'
  }),
  mode: 'cors', // 요청 (cors, no-cors, same-origin 등)
  cache: 'default' // 캐시
});

이 객체는 요청할 리소스의 정보와 요청을 구성하는 옵션(메서드, 헤더, 본문 등)을 포함합니다. fetch 함수는 첫 번째 인자로 요청할 리소스의 URL을 받으며, 선택적으로 두 번째 인자로 Request 객체 혹은 요청 옵션 객체를 받아서 요청을 구성할 수 있습니다.

 

Response

// `fetch` 함수를 사용하여 위에 정의된 myRequest로 HTTP GET 요청
fetch(myRequest).then(response => {
	// 요청에 대한 응답이 성공인지 확인
	// 응답을 JSON 형태로 변환
	if (response.ok) return response.json();
    
    // 응답이 성공적이지 않다면, 에러를 발생
	throw new Error('Network Response Error');
}).then(data => {
	console.log(data);
}).catch(error => {
	// 요청 과정에서 발생한 에러를 콘솔에 출력
    console.error('Weather API Error:', error);
});

Response 객체는 HTTP 응답을 나타냅니다. 이 객체는 응답의 상태 정보(상태 코드, 상태 메시지), 헤더, 그리고 본문 데이터를 포함합니다. fetch 함수는 Promise를 반환하며, 이 Promise는 요청의 성공 여부와 상관없이 Response 객체를 resolve합니다. 따라서 응답을 처리하기 위해서는 then() 메서드를 사용하여 Response 객체를 처리해야 합니다.

 

XMLHttpRequest (GET 요청) 추천 X

XMLHttpRequest는 자바스크립트에서 HTTP 요청을 생성하기 위한 오래된 방법 중 하나입니다. 

Promise를 기본적으로 지원하지 않아 비동기 처리가 더 복잡해질 수 있습니다.

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 비동기 GET 요청을 설정
xhr.open("GET", "https://api.openweathermap.org/....", true);

// onreadystatechange 이벤트 핸들러 설정
xhr.onreadystatechange = function () {
  // 요청 완료 and 요청 성공
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 응답을 JSON 형태로 변환
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

// 설정한 요청을 서버로 전송
xhr.send();

 

API 응답

API 응답에 일부 매개변수가 표시되지 않으면 선택한 도시나 위치에 대한 측정 시간 동안 이러한 기상 현상이 발생하지 않았다는 의미입니다. 실제로 측정되거나 계산된 데이터만 API 응답에 표시됩니다.

{
    "coord": {
        "lon": 126.9778,
        "lat": 37.5683
    },
    "weather": [
        {
            "id": 804,
            "main": "Clouds",
            "description": "overcast clouds",
            "icon": "04n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 290.86,
        "feels_like": 290.41,
        "temp_min": 289.91,
        "temp_max": 291.93,
        "pressure": 1014,
        "humidity": 66
    },
    "visibility": 9000,
    "wind": {
        "speed": 3.09,
        "deg": 210
    },
    "clouds": {
        "all": 100
    },
    "dt": 1714847803,
    "sys": {
        "type": 1,
        "id": 8105,
        "country": "KR",
        "sunrise": 1714854740,
        "sunset": 1714904709
    },
    "timezone": 32400,
    "id": 1835848,
    "name": "Seoul",
    "cod": 200
}

 

 

API를 호출하여, 프론트를 구성하는 작업은 추후에 업로드하겠습니다.

 

 

 

참고 자료

https://devlevel1.tistory.com/33

사이드 프로젝트 JavaScript 뭘 만들까?

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/200

200 OK - HTTP | MDN

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch API 사용하기 - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/fetch

fetch() 전역 함수 - Web API | MDN

https://openweathermap.org/api

Weather API - OpenWeatherMap