API

정의

앱에서 서버에 데이터 요청(Request)을 하기 위해서는 정해진 규칙을 사용해야한다.

서버쪽에서 정한 규칙 = API(Application Programming Interface)

특징

• 일반적으로 JSON 형태의 리스트([]), 딕셔너리({}) 복합구조
• 화면이 처음 보여질때 필요한 데이터를 가져올때 필요
• 화면에서 데이터 저장과 관련된 동작을 실행할 때 필요

날씨 API 사용하기

앱 위치 정보 권한 설정

설치코드

expo install expo-location

yarn add axios

예시코드

MainPage.js

.
.
.

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

export default function MainPage({navigation,route}) {
  console.disableYellowBox = true;

  const [state,setState] = useState([])
  const [cateState,setCateState] = useState([])
  const [ready,setReady] = useState(true)

  //날씨 데이터 상태관리 상태 생성!
  const [weather, setWeather] = useState({
    temp : 0,
    condition : ''
  })
  
  useEffect(()=>{
    setTimeout(()=>{
        let tip = data.tip;
        setState(tip)
        setCateState(tip)
        getLocation()
        setReady(false)
    },1000)
  },[])

  const getLocation = async () => {
    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`
      );

      const temp = result.data.main.temp; 
      const condition = result.data.weather[0].main
      
      console.log(temp)
      console.log(condition)

      setWeather({
        temp,condition
      })

    } catch (error) {
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }

.
.
.

사용법 1) 현재 위치 데이터 가져오기

1. expo-location을 설치한다.
2. "expo-location"에서 전부(*)를 Location으로 선언한다.
3. Location을 사용하여 권한과 현재위치를 알 수 있는 함수를 try/catch문으로 작성한다.
   • 에러가 발생할 수 있기 때문에 try/catch를 사용한다.
   • 예시에서는 getLocation이라는 함수를 선언하였다.
   • async와 await를 사용하여 비동기화를 시키고 순서를 지키도록 하였다.
     - 현재위치를 불러오는 함수가 권한을 얻는 함수보다 먼저 실행되는것을 방지!
   • requestPermissionsAsync()를 사용하여 권한에 관한 동의여부를 묻는 팝업창을 실행시킨다.
     - 동의하면 다음 코드로, 비동의하면 종료된다.
   • getCurrentPositionAsync()를 사용하여 현재위치 데이터를 가져온다.
   • 가져온 현재위치 데이터에서 위도와 경도 데이터를 추출한다.
     - const latitude = locationData['coords']['latitude']
     - const longitude = locationData['coords']['longitude']

사용법 2) 현재 위치의 날씨 데이터 가져오기

1. axios를 설치한다.
2. "axios" 라이브러리를 axios로 선언한다.
3. 날씨 API 제공하는 사이트 에서, 현재기온와 현재상태 데이터를 JSON에서 어떻게 가져와야 하는지 확인한다.
   • temp(현재기온): result.data.main.temp
   • contidion(현재상태): result.data.weather[0].main
4. useState를 사용하여 weather 리스트를 선언하고 초기화한다.(temp: 0, condition: '')
5. axios를 사용하여 날씨 데이터를 가져온다.
   • API를 사용하기 위해 부여받은 키값(API_KEY), 앞서 가져온 현재 위도/경도 데이터를 사용!

const result = await axios.get(
        `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
);

6. 현재기온과 현재상태에 해당하는 데이터를 사용한다.

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

예시화면