리액트 네이티브에서 Google Map을 사용하려면 react-native-maps 패키지를 주로 사용합니다. 그런데 앱에서 구글 맵을 사용하려면 API key를 등록해야 합니다.
https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
ios의 경우 구글 맵 대신, Apple 맵을 사용한다면 별다른 API key 설정은 필요 없습니다. ios에서도 구글 맵을 사용한다면 key가 필요하구요.
여기서는 안드로이드앱의 경우 API key를 관리하는 방법을 알아봅니다. 보통 API key를 AndroidManifest.xml 파일에 넣고 쓰는데, 매우 좋지 않은 방법입니다. 인터넷에서 자료를 찾아보면 예제로 나온 것들은 다들 AndroidManifest.xml 파일에 키를 직접 하드 코딩했습니다. 왜냐하면 매우 간편하거든요.
그런데, 이렇게 했을 때 문제점은 API key가 노출되어 누구든 가져다 쓸 수가 있다는 겁니다. 즉, 다른 사람 이 만든 앱에 구글 맵이 포함되어 있는데, 노출된 API key를 이용하면, 그 앱에서 발생하는 구글 맵 사용 비용을 내지 않아도 됩니다. 키를 노출 시킨 사람이 대신 내게 되는 것이죠.
그래서 key를 소스 코드에서 감춰야 합니다. 또 하드 코딩하는 것도 좋지 않구요.
키를 감추기 전에 먼저 API key를 생성해야 합니다. 방법은 아래 내용을 참고하세요.
https://developers.google.com/maps/documentation/android-sdk/get-api-key
안드로이드앱의 경우 local.properties라는 파일이 안드로이드앱 최상위 폴더에 있습니다. 없으면 만들면 됩니다.
이 파일의 첫 줄에 다음과 같은 경고문구가 보입니다.
This file must NOT be checked into Version Control Systems,
이 파일은 Git과 같은 소스 버전 컨트롤에 포함시키지 말라고 합니다. 이유는 여기서 APIkey라던지, signing 암호 등을 저장할 것이기 때문입니다. 기타 다른 걸 감추는 용도로 사용해도 됩니다.
여기에 위에서 생성한 키를 저장합니다.
// local.properties
// key and value
google.map.key=AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
안드로이드 프로젝트에는 build.gradle 파일이 두 개 있습니다. 프로젝트 레벨(top-level)에 하나 있고, app 레벨(app 폴더 밑에) 파일이 하나 있습니다. 여기서는 app 레벨 파일을 다음과 같이 수정합니다. 파일 내용 중 android { 바로 위 부분에 다음과 같이 local.properties 파일에 저장한 키를 불러 옵니다. 또 제일 마지막의 manifestPlaceholders = [googleMapApiKey:googleMapApiKey]을 추가하는 것이 중요합니다. 관련하여 공식 홈페이지를 참고하세요. 단순히 key:value 쌍으로 placeholder를 생성하면 됩니다. 여기서는 key, value를 동일한 이름으로 했습니다.
https://developer.android.com/studio/build/manifest-build-variables
// app level build.gradle
/**
* Hide API keys
*/
Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
def googleMapApiKey = properties.getProperty('google.map.key')
android {
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
applicationId "com.etainclub"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 2
versionName "1.1"
multiDexEnabled true
resConfigs "ko", "en"
manifestPlaceholders = [googleMapApiKey:googleMapApiKey]
}
(이하 생략)
먼저 Map에서 위치 정보를 얻기 위해서는 location 접근에 대한 허가가 필요합니다. 아래와 같이 권한을 추가합니다.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
다음으로 build.gradle에서 설정한 key값을 사용합니다. meta-data 태그 부분이 새롭게 추가되었습니다.
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="${googleMapApiKey}"
/>
<activity
(이하 생략)
위 코드의 마지막을 보면 더이상 AndroidManifest.xml에 api key를 하드 코딩하지 않아도 됩니다.
이제 다 됐습니다.
덕분에 도움 주고 받기 이타인클럽앱에 지역 인증 기능이 구현되었습니다. 아래 링크에서 다운로드 받아 설치하실 수 있습니다.
이 글은 여러분의 관심과 응원으로 제작되었습니다.