티스토리 뷰

WEB/Vue.js

날씨어플리케이션(1) - OPEN API가져오기

이지홍 2022. 3. 4. 17:38

https://openweathermap.org/current

 

Current weather data - OpenWeatherMap

Access current weather data for any location on Earth including over 200,000 cities! We collect and process weather data from different sources such as global and local weather models, satellites, radars and a vast network of weather stations. Data is avai

openweathermap.org

vue3 기반으로 하는 날씨 어플리케이션을 만들어보자 api는 위의 링크에서 받아왔다. 

1. API 카테고리 클릭

 

current weather data페이지에  API doc 버튼 클릭 후 들어가면 api를 사용하는 방법들이 적혀있다.
api를 호출하는 방법은 by city name 카테고리에 들어가면  q는 도시 이름이고 apiid는 api key이다. 

2. current Weather Data 에서 subscribe 버튼 클릭
-free 의 Get API key 클릭

 

클릭하면 API keys에 key를 받아올 수 있다. (참고로 로그인해야 key 받을 수 있음)

3.로그인하고 아래의 다운로드 창에서 postman 을 사용하는 운영체제에 맞게 다운로드한다.

key값을 받아오는 것 까지 완료했다면 이 API를 실질적으로 프로젝트에서 호출해서 확인하기 전에 Postman을 통해 이 api를 어떤식으로 사용하는건지 확인해보기 위함이다.

Postman

4. current Weather Data 에서 API doc 버튼 클릭 후 by city name 카테고리에서 해당 아래 api 주소 복사

api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

 

저작자표시 비영리 변경금지 (새창열림)

'WEB > Vue.js' 카테고리의 다른 글

만든 Vue 사이트 build & Github Pages로 배포하려면  (0) 2022.03.05
날씨어플리케이션(2) - Postman을 이용하여 api 연동 테스트  (0) 2022.03.04
VUEX (2) - Vuex의 Store Pattern 및 사용법  (0) 2022.02.11
Vue의 repository pattern을 사용하여 API 연동(2)  (0) 2022.02.04
Vue의 repository pattern을 사용하여 API 연동(1)  (0) 2022.02.04