React Native로 날씨 앱(Weather App) 만들기 (3) - expo location 설치 및 위치 권한 허용

출처 : 노마드코더 - React Native로 날씨앱 만들기

 

<Geolocation 알아보기>

• 참고 : https://facebook.github.io/react-native/docs/geolocation

• 위와 같이 제공하는 메소드들 중에 우린 ‘getCurrentPosition()’이 필요하다.

사용방법

 

 

Step 1) expo-location 설치

• 참고 : https://docs.expo.io/versions/v35.0.0/sdk/location/

vscode 터미널을 새로 열어서

$expo install expo-location

을 입력한다. 노드 버젼으로인해 또 에러가 나서

$ nvm install node

위의 명령어를 먼저 실행한 후 location을 설치할 수 있었다.

 

 

Step 2) expo-location 사용을 위해 import

• App.js 파일에 import 한다.
• expo는 우리가 원하는 기능만을 선택해서 import하여 쓸 수 있게 해 준다.

$ import * as Location from 'expo-location';

• 그 후 ‘getCurrentPositionAsync()’ 가 잘 작동하는지 체크하기 위해 아래와 같이 코드를 수정해본다.

getCurrentPositionAsync(), parameter는 default로

 

그 후 저장을 하면 (cmd+s)

위와 같이 permission error가 뜬다.

 

 

Step 3) Permission Error 해결

• Permission이 resolve 되었을 때는 promise를, denied 되었을 땐 reject를 return 하므로 ‘try-catch’ 구문으로 예외 처리를 해 준다.
• 먼저 Alert를 import 한 후에 아래의 코드와 같이 작성한다.

$ import {Alert} from 'react-native';

 

 

 

 

그 후 저장하면 핸드폰의 expo 앱에서

위와 같은 창이 뜬다. 우리가 보통 어플리케이션을 다운로드한 후 처음 실행했을 때 permission을 구하는 자주보던 익숙한 창이다.

보통 ‘허용’을 클릭하지만 예외가 잘 처리됐나 확인하기 위해 ‘허용 안 함’을 클릭해 보았다.

그럼 위와 같은 창이 뜨게 되고, 예외가 잘 처리되었음을 확인할 수 있다.

ios app은 한 번 ‘허용 안 함’을 누르면 그 다음번에 앱을 실행해도 permission을 구하는 창이 다시는 뜨지 않으므로 폰의 ‘설정 -> expo ->위치 -> 사용하는 동안’ 에 수동으로 체크해줘야한다.

 

 

Step 4) console log에서 현재 위치 가져오기

콘솔 로그를 확인해보면,

첫번째는 response가 없어서 undefined로 찍혔고(필요 없으니 코드를 삭제한다.) 두번째는 Location이 찍혔음을 확인할 수 있다.

우리는 ‘latitude’와 ‘longitude’가 필요한데 원래 디폴트 값은 샌프란시스코라서(apple이기 때문)

위와 같으나, 본인은 현재 나의 위치를 따로 설정해서 latitude는 ‘35.1496’ longitude는 ‘126.9156’으로 뜬다.

본인 현재 위치의 위도 경도 값을 찾는 방법은 아래와 같다.

1. https://ip-api.com/에 접속한다.

2. 시뮬레이터에서 ‘Debug->Location->Custom Location’을 클릭한다.

3. 1번에서 확인한 위도와 경도로 수정해준다.

 

 

Step 5) Location 오브젝트 안의 coords 오브젝트 가져오기

• es6를 써서 coord 오브젝트의 latitude, longitude를 가져와본다.
• 위와 같이 코드를 수정한 결과는 아래와 같다.

latitude, longitude를 성공적으로 가져옴을 확인할 수 있다.

 

 

Step 6) Rename 하기

• 콘솔 로그를 확인하는 것은 더이상 필요하지 않아 코드를 삭제했다.

 

 

Step 7) API 로 전송할 State 가져오기

• 먼저 state를 가져오기 위해 코드를 위와 같이 수정한다. (line 8–10, 16, 26–27)
• line 16이 Location Indicator을 가져온다.