[RN] 리액트 네이티브에서 환경 변수 처리

환경 변수

SDK의 중요 키 값이나 API URL과 같은 변수값들을 환경변수라고 부르는지 정확히 명칭은 알지못하지만 정의된 말에 따르면 환경변수는
프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임

 

이라고 정의 되어있다. 

RN개발을 진행하면서 중요한 값들을 따로 .env에 정의하고 처리할려고 하는데 리액트 네이티브 공식 문서에 따르면 완벽하게 중요한 값들을 숨길수는 없고 다른 layer를 통해서 값을 받아오는식으로 처리해야한다고 합니다.
설명예시에 따르면, 클라우드 환경에서 람다 함수를 통해서 중요 키 값들을 요청해서 받아오는 방식

현재 개발하면서 중요 키 값들을 받아오는식으로 처리하는 환경은 아니기 때문에 공식문서에서 제안해준 라이브러리를 통해 키값을 설정할려고 합니다. 

1. react-native-dotenv

GitHub - goatandsheep/react-native-dotenv: Load react native environment variables using import statements for multiple env file

2. react-native-config

GitHub - lugg/react-native-config: Bring some 12 factor love to your mobile apps!

위의 두가지 라이브러리중에 react-native-config를 통해 진행하겠습니다. (이유는 더 많은 별을 가지고있고 문서도 많아보여서)

그리고 설명란에 키값들을 완벽하게 보호는 못한다고 적어놓았다..

basically impossible to prevent users from reverse engineering mobile app secrets

Hiding Secrets in Android Apps

react-native-config 적용 방법

1. react-native-config 설치

yarn add react-native-config

 

RN의 버전이 0.6 이상이면 auto linking으로 별도로 react-native link react-native-config와 같은 명령어를 실행할 필요가 없습니다.

2. .env 파일 생성

먼저 .env파일을 생성하고 아래와 같이 중요 키 값들을 설정합니다. (.gitignore에도 처리하는것 잊지맙시다)

KAKAO_SDK = xxxx
...

 

3-1. 안드로이드 적용 방법

- android/setting.gradle에 아래 코드 적용

include ':react-native-config'
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

 

- app/build.gradle에 아래 코드 적용

implementation project(':react-native-config')


- 하단에
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle”

 

이 코드를 적용함으로써 아무래도 android내의 변수설정들을 적용할 수 있는것 같습니다. (AndroidManifest.xml, string.xml)

 

- 이제 .env에서 적은 키 값들을 아래와 같이 활용할 수 있습니다.

- AndroidManifest.xml
<data android:host="oauth"
                android:scheme="@string/KAKAO_SCHEME_KEY" />

- string.xml
<string name="kakao_app_key">@string/KAKAO_APP_KEY</string>

3-2. IOS 적용 방법

- xcode에서 Config파일 생성 후 아래 코드 추가

#include? "tmp.xcconfig"

 

- xcode → product → scheme → edit scheme → build → pre actions → 새로 생성 후 아래 코드 작성

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

4. plist에 적용하기

	<key>KAKAO_APP_KEY</key>
	<string>$(KAKAO_APP_KEY)</string>