[날씨앱] 현재 위치 확인 및 오픈웨더 API 사용하여 날씨 가져오기

FRONTEND/ReactNative

[날씨앱] 현재 위치 확인 및 오픈웨더 API 사용하여 날씨 가져오기

죠으닝 2024. 2. 1. 10:18

https://docs.expo.dev/versions/latest/sdk/location/

Location

A library that provides access to reading geolocation information, polling current location or subscribing location update events from the device.

docs.expo.dev

vscode에서 현재 실행중인 터미널은 놔두고

git bash로 하나 더 열어서 설치한다.

그러면 실행중에도 설치 가능함.

그리고 app.json 에 아래의 플러그인을 추가한다.

{

"expo": {

"plugins": [

[

"expo-location",

{

"locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."

}

]

"name": "my-app",

"slug": "my-app",

"version": "1.0.0",

"orientation": "portrait",

"icon": "./assets/icon.png",

"userInterfaceStyle": "light",

"splash": {

"image": "./assets/splash.png",

"resizeMode": "contain",

"backgroundColor": "#ffffff"

App.js로 돌아가서

expo-location을 import 하고

처음 시작 시 위치정보 가져오게끔 요청을 보낸다.

만약 허용을 하지 않으면 false 로 바꿈

import { StatusBar } from "expo-status-bar";

import { Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";

import * as Location from "expo-location";

import { useEffect, useState } from "react";

//각 스마트폰 화면의 가로 사이즈

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function App() {

const [location, setLocation] = useState();

const [ok, setOk] = useState(true);

const ask = async () => {

const { granted } = await Location.requestForegroundPermissionsAsync();

if (!granted) {

setOk(false);

}

};

useEffect(() => {

ask();

}, []);

아래와 같이 뜬다

앱 사용 중에만 허용 클릭

이제 실제로 로케이션 객체에서 위도, 경도를 가져와 위치 정보를 알아내기.

https://docs.expo.dev/versions/latest/sdk/location/

export default function App() {

const [location, setLocation] = useState();

const [ok, setOk] = useState(true);

const ask = async () => {

const { granted } = await Location.requestForegroundPermissionsAsync();

if (!granted) {

setOk(false);

}

//accuracy 5 -> 정확도 5단계 제일 높음

const {

coords: { latitude, longitude },

} = await Location.getCurrentPositionAsync({ accuracy: 5 });

};

import { StatusBar } from "expo-status-bar";

import { Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";

import * as Location from "expo-location";

import { useEffect, useState } from "react";

//각 스마트폰 화면의 가로 사이즈

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function App() {

const [location, setLocation] = useState();

const [ok, setOk] = useState(true);

const ask = async () => {

const { granted } = await Location.requestForegroundPermissionsAsync();

if (!granted) {

setOk(false);

}

//경도와 위도 값을 가지고 옴

//accuracy 5 -> 정확도 5단계 제일 높음

const {

coords: { latitude, longitude },

} = await Location.getCurrentPositionAsync({ accuracy: 5 });

// 가지고 온 경도, 위도 값에 맍는 위치를 파악할 수 있는 API사용해서 요청

const location = await Location.reverseGeocodeAsync(

{ latitude, longitude },

{ useGoogleMaps: false }

);

console.log(location);

};

콜솔로 위치를 잘 가져왔는데 확인한다.

콘솔은 터미널에서 확인가능하다

위와 같이 현재 위치가 잘 출력된다.

이것을 state로 저장해서 화면에 보여주면 됨

import { StatusBar } from "expo-status-bar";

import { Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";

import * as Location from "expo-location";

import { useEffect, useState } from "react";

//각 스마트폰 화면의 가로 사이즈

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function App() {

const [city, setCity] = useState("Loading...");

const [location, setLocation] = useState();

const [ok, setOk] = useState(true);

const ask = async () => {

const { granted } = await Location.requestForegroundPermissionsAsync(); //위치 정보 사용자 동의 얻기

if (!granted) {

setOk(false);

}

//경도와 위도 값을 가지고 옴

//accuracy 5 -> 정확도 5단계 제일 높음

const {

coords: { latitude, longitude },

} = await Location.getCurrentPositionAsync({ accuracy: 5 });

// 가지고 온 경도, 위도 값에 맍는 위치를 파악할 수 있는 API사용해서 요청

const location = await Location.reverseGeocodeAsync(

{ latitude, longitude },

{ useGoogleMaps: false }

);

console.log(location);

setCity(location[0].city || location[0].district);

};

useEffect(() => {

ask();

}, []);

return (

</View>

{/* //스크롤뷰를 가로로 해서 수평으로 스크롤하고 스크롤바를 삭제함. */}

<ScrollView

horizontal

showsHorizontalScrollIndicator={false}

style={styles.weather}