React Native : API 요청

목표 2개

 

☝🏻 핸드폰에서 권한 허락해서 현재 Location 정보 받아오기

✌🏻 Location 정보 이용해서 날씨 API 요청하기

 

 

 

---

 

 

 

 

 

1. create-expo-app으로 프로젝트 생성

 

 

 

2. 루트폴더에 .env 파일 만들어서 OpenWeather에서 발급 받은 내 api key 저장 

import { OPENWEATHER_API_KEY } from "@env";

민감한 정보는 이렇게 해서 저장한다고 함. 이렇게 하고 .gitignore에 env 써놓으면 git에 안 올라감 wow

(이렇게 하면 안됨. 다음 포스팅 참고) 

 

 

3. 루트폴더에 App.js 파일 만들어서 코드 작성

import * as Location from "expo-location";

이렇게 해야 내 핸드폰에서 위치를 가져오는 작업을 할 수 있음

설명 : 

import * as Location from "expo-location";는 Expo의 expo-location 라이브러리를 가져오는 코드입니다. expo-location은 사용자의 위치 정보를 가져오거나 위치 권한을 요청하는 등의 작업을 도와주는 Expo SDK의 모듈입니다. 이 라이브러리를 사용하면 네이티브 코드와의 복잡한 상호작용 없이 위치 서비스를 쉽게 사용할 수 있습니다.

 

 

 

4. async/await 이용해서 위치 권한 받아오기

const getLocationAndWeather = async () => {
    setLoading(true);
    let { status } = await Location.requestForegroundPermissionsAsync();

    if (status !== "granted") {
      setErrorMsg("Permission to access location was denied");
      setLoading(false);
      return;
    }

    try {
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      await fetchWeather(location.coords.latitude, location.coords.longitude);
    } catch (error) {
      setErrorMsg("Could not get your location");
      setLoading(false);
    }
  };

 

사용자의 위치 권한을 요청하고, 권한이 부여(granted)되면 Location.getCurrentPositionAsync()를 통해 위치 정보를 받아옴

위치를 받으면 fetchWeather 함수를 호출하여 날씨 데이터를 가져옴

 

 

 

5. 받아온 위치(위도/경도) 데이터로 날씨 API 가져오기 

  const fetchWeather = async (latitude, longitude) => {
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${OPENWEATHER_API_KEY}`
      );
      const data = await response.json();
      if (response.ok) {
        console.log(data);
        setWeather(data);
      } else {
        setErrorMsg(`Error: ${data.message}`);
      }
    } catch (error) {
      setErrorMsg("Failed to fetch weather data");
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

fetchWeather 함수는 위치 정보(위도, 경도)를 기반으로 OpenWeatherMap API에서 날씨 데이터를 가져옴