[개인 Project] expo-location으로 현재위치 받기 + 날씨 데이터 조회

이전에 Geolocation을 사용해서 현재위치 값을 가져올려고 시도했으나 막혔던 적이 있습니다. 이번에 날씨 정보를 얻기 위해 다시 현재 위치 값을 구하는 법을 검색하던 도중 괜찮은 라이브러리를 찾았고 현재위치를 가져오는 것에 성공했습니다. (참고: https://docs.expo.io/versions/latest/sdk/location/)

(호환성ㄷㄷ)

호환이 모든 기기에서 다 되네요. 정말 행복합니다.
한번 따라해 봅니다.

"location" background mode must be specified in Info.plist file. See background tasks configuration guide. (iOS only)

저는 아이폰으로 구동확인을 하기 때문에 Info.plist에 무언가를 적어주어야 한다고 합니다.

import * as Location from 'expo-location';
...
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
...
useEffect(() => {
		(async () => {
			let { status } = await Location.requestForegroundPermissionsAsync();
			if (status !== "granted") {
				setErrorMsg("Permission to access location was denied");
				return;
			}
			let location = await Location.getCurrentPositionAsync({});
			setLocation(location);
		})();
...
	}, []);
	if (errorMsg) {
		text = errorMsg;
	} else if (location) {
		latitude = location.coords.latitude;
		longitude = location.coords.longitude;
		text = JSON.stringify(location);
        //text에 location값이 저장된다.
	}

공식문서를 그대로 따라하면서 제 코드에 맞는 위치에 코드를 붙였더니 정말 위치가 나왔습니다. 이를 활용해서 날씨값도 한번 가져와보겠습니다.

weather.js

export default async function getWeather({ latitude, longitude }) {
	const API_KEY = "4c328c26bba01a4c29e0d2ed2bc4adf1";
	const weather = await fetch(
		`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
	)
		.then((res) => res.json())
		.then((json) => {
			const weatherData = { weather: json.weather, temp: json.main.temp };
			return weatherData;
		});
	return weather;
}

openweathermap api를 사용하여 날씨값을 불러보았습니다.

		//날씨 불러오기
		async function getWeatherData() {
			let getWeatherData = await getWeather(location.coords);
			setWeather(getWeatherData);
		}
		getWeatherData();

useEffect 밖에서 값을 콘솔로 찍어봅니다.

	useEffect(() => {
		(async () => {
			let { status } = await Location.requestForegroundPermissionsAsync();
			if (status !== "granted") {
				setErrorMsg("Permission to access location was denied");
				return;
			}
			let location = await Location.getCurrentPositionAsync({});
			setLocation(location);
		})();
		//날씨 불러오기
		async function getWeatherData() {
			let getWeatherData = await getWeather(location.coords);
			setWeather(getWeatherData);
		}
		getWeatherData();
		//데이터 불러오기
		async function fetchData() {
			const notice = await getPage(1);
			// console.log(notice);
			notice.sort((a, b) => {
				return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
			});
			setNoticeData([...notice]);
		}
		fetchData();
	}, []);
    //여기서 호출!!
	console.log(weather);

아주 잘나오는 것을 확인합니다. 이 값을 날씨탭 아이콘에 맞게 설정하고 클릭하면 온도와 날씨 간단한 정보를 페이지로 나타낼 계획입니다.