728x90
리액트 네이티브와 SpringBoot를 이용해 앱/웹을 만드려 하는데, 현재 위치를 가져오는 GPS 기능을 이용하려 한다
react native는 expo와 cli 로 나뉘어지는데, 해당 프로젝트는 cli를 이용해 제작하고 있었다.
expo환경 기준으로는 react-native-geolocation-service 라이브러리를 이용할 수 없고, 별도의 expo용 gps 라이브러리 기능이 있다.
react-native-geolocation-service
프로젝트에 우선 위 라이브러리를 설치한다.
npm react-native-geolocation-service
gps 기능을 이용하기 위해서는 안드로이드/IOS 별로 각각 권한 설정이 필요하다.
android/app/src/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
rn 프로젝트 내부에 있는 android 폴더 내에 app/src에서 설정을 추가한다. androidmanifest는 안드로이드의 앱 설정파일이다. spring에 application.xml 같은 설정파일 중 하나이다.
안드로이드에서 앱을 빌드/실행할 때에 시스탬이 앱의 구성 요소와 권한을 알 수 있도록 정의해주는 역할을 진행한다.
gps 기능을 테스트 진행하기 위해 가벼운 테스트 페이지/코드를 만들어보자
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, // 요청할 권한 종류
{
// 팝업에 표시될 제목과 메시지, 버튼 문구
title: '위치 권한 요청',
message: '이 앱은 GPS를 사용합니다.',
buttonNeutral: '나중에',
buttonNegative: '취소',
buttonPositive: '허용',
}
);
// 사용자가 버튼을 누른 결과를 로그로 출력 (granted 값: granted/denied/never_ask_again)
console.log('Android 권한 결과:', granted);
// 만약 사용자가 "허용"을 눌렀다면
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('위치 권한 허용됨');
return true; // 함수 결과 true 반환
} else {
// 허용 안 했을 경우
console.log('위치 권한 거부됨');
return false; // 함수 결과 false 반환
}
}
버튼을 클릭했을때, 권한을 요청하고 수락하여 현재 위치를 불러온다.
안드로이드 에뮬레이터로 현재 위치를 설정한 후에 해당 기능을 이용하면
위에 동의 UI가 나온 후에 현재 위치가 불러와진다.
728x90
