앱과 서버 - 날씨 서버 외부 API - 2) API적용

하이루·2021년 10월 25일
0

--> 서버가 제공하는 도메인을 그대로 사용하는 형식으로 진행

API를 통해 날씨 데이터 가져오는 순서

1) 현재 위치(좌표) 데이터 필요, 가져오기
--> 어디의 날씨인지 알아야 하기 때문
https://velog.io/@odesay97/%EC%95%B1%EA%B3%BC-%EC%84%9C%EB%B2%84-%EB%82%A0%EC%94%A8-%EC%84%9C%EB%B2%84-%EC%99%B8%EB%B6%80-API-1-%ED%9C%B4%EB%8C%80%ED%8F%B0-%EC%9C%84%EC%B9%98-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

2) 위치 데이터를 이용하여 현재 위치 날씨 데이터 가져오기

--> Weather API 사용

Weather API 공식문서 : https://openweathermap.org/api

Weather API로 받은 데이터를 읽는 방법 : https://openweathermap.org/current

axios

--> 서버에서 제공하는 도메인 형식의 API 사용을 위한 도구

yarn add axios

--> 도구 설치

axios 사용해보기

1) axios를 import로 불러옴

import * as Location from "expo-location";
import axios from "axios"

2) API 사용에 필요한 데이터와 API 키를 axios.get()함수에 도메인형태로 추가하여, 도메인으로 데이터를 가져옴

  const getLocation = async () => {
    //수많은 로직중에 에러가 발생하면
    //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
    try {
      //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
      await Location.requestPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
      const latitude = locationData['coords']['latitude']
      const longitude = locationData['coords']['longitude']
      const API_KEY = "cfc258c75e1da2149c33daffd07a911d";
      const result = await axios.get(
        `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
      );
      ......

--> 외부 API를 사용하는 작업으로 함수 순서가 뒤섞일 수 있기 떄문에 async, await 선언으로 함수 순서를 고정해줌
--> 현재 스마트폰 위치를 받아서 날씨 API를 실행하기 위해 필요한 데이터를 수집( 현재 위치 )
--> API_KEY를 해당 API를 제공하는 곳에서 미리 받아서 확보해놓음
--> axios.get('해당 API를 사용하기 위해 필요한 데이터와 API_KEY가 포함된 도메인')

http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric

 --> latitude,logitude등의 위치데이터와 API_KEY가 도메인에 포함되어 있음
 

도메인으로 데이터를 주고 받는 API서버에 데이터를 요청

axios.get('필요한 데이터와 API키가 포함된 도메인')

3) 도메인을 통해 API에서 제공 받은 데이터뭉치(JSON형태)에서 필요한 데이터를 추출함

 const temp = result.data.main.temp; 
 const condition = result.data.weather[0].main
 

--> 데이터는 딕셔너리가 여러겹으로 이루어진 경우가 많음
따라서 위의 코드처럼 필요한 데이터를 찾기 위해 데이터의 구조를 파악하여 접근해야함

temp = result 변수(API로부터 데이터를 받아 저장한 변수, JSON형태)의 data딕셔너리에 있는 main키의 값(딕셔너리)에 있는 temp키의 값(데이터--> 온도)

 --> 이런 느낌으로 API에게 받은 데이터에서 필요한 정보까지 파내려가야함
      --> 가장 상단에 있는 API 데이터 읽는 방법에 대한 공식문서를 참고하는 등의 방법 사용
profile
ㅎㅎ

0개의 댓글