머리 속에 들어 있는 내용을 정리해야지 하다가 한번에 막 하고 있습니다.
이번에 알아볼 것은 리액트 네이티브 코드에서 API key를 감추는 방법을 알아보겠습니다.
이전 글에서는 안드로이드에서 구글 맵의 API key를 감추는 방법을 살펴봤습니다.
이번에 감출 API는 Google Geocoding API key입니다. geocoding이라는 것은 지도 상의 위도, 경도 값을 가지고 주소를 얻거나 반대로 주소로 부터 위도, 경도 값을 얻는 것을 말합니다.
먼저, react-native-geocoding을 설치합니다.
https://github.com/marlove/react-native-geocoding
안드로이드 앱의 경우와 달리 여기서는 리액트 네이브티 코드에서 API 키를 사용하는 것이므로, 설정이 조금 다릅니다. 설정을 위해 몇 가지 패키지를 설치해야 합니다.
위의 키를 리액트 네이티브 코드, 즉 자바스크립트에서 사용하기 위해서는 프로젝트 최상위 폴더에 .env파일을 만들어서 그곳에 키를 저장해야 합니다. 이를 위해서 react-native-dotenv 패키지를 설치합니다.
https://github.com/zetachang/react-native-dotenv
이렇게 하고, 프로젝트 최상위 폴더에 있는 babel.config.js에 다음과 같이 dotenv 모듈을 추가합니다.
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
};
일부 다른 곳에서는 babel.config.js파일이 아니라 .babelrc 파일에 추가하라고 나옵니다.
babel 설정 파일이 없다면 다음도 설치합니다.
$ yarn add metro-react-native-babel-preset
프로젝트 최상위 폴더에 .env파일을 생성하고 api key를 입력합니다.
// .env
GEOCODING_API_KEY=AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
이타인클럽앱의 경우 다음과 같은 파일 구조가 됩니다.
이제 필요한 부분에 key를 import하여 사용합니다.
// LocationScreen.js
import { GEOCODING_API_KEY } from 'react-native-dotenv';
const initGeocoding = () => {
Geocoder.init(GEOCODING_API_KEY, { language: language });
(생략)
여기서 react-native-geocoding 옵션으로 언어를 설정할 수 있습니다. 위의 경우, 위도, 경도 값으로 주소를 얻는데, 주소를 어떤 언어로 얻을지 선택할 수 있습니다. 이 때, 아래와 같이 i18next 패키지로부터 설정된 언어값을 읽어와서 geocoding의 인자로 전달하면 됩니다.
import i18next from 'i18next';
const language = i18next.language;
.env파일에 감추고자 하는 값들을 넣어서 사용하시면 됩니다.
설정한 키를 .env에서 못찾는 문제가 발생할 수 있습니다. 이 때는 metro 서버의 캐쉬를 삭제하야 다시 실행합니다.
$ yarn start --reset-cache
.env 파일은 git과 같은 버전 컨트롤에 추가하시면 안됩니다!API 키가 들어 있기 때문에, 남이 악용할 수 있습니다. 따라서 .gitignore파일에 .env파일을 추가합니다.
이 글은 여러분의 관심과 응원으로 제작되었습니다.