FrontEnd/React Native
react-native-config를 환경 별로 설정해보자
Bumang
2024. 11. 1. 15:50
react-native-config 설정을 하게 된 배경
조금 충격적인 이야기겠지만 내가 입사할 당시 앤트타임은 환경 변수 없이
API주소며 여러 인증서 값들이 하드코딩되어 있었다...
난 이걸 react-native-config를 이용해서 마스킹하였고,
또한 debug/release 빌드 시 각기 환경에 맞는 api-key로 들어가게 하였다.
1. .env파일 생성하기
.env
루트단에 .env파일을 생성하였다. 그러나 이 env파일은 iOS빌드 시 마다 값이 바뀐다.
테스트로 빌드하면 테스트 값으로, 상용으로 빌드하면 상용 값으로 계속 스위칭 된다.
BASE_URL=https://...
TOPIC_ALL_USERS=...
GOOGLE_KEY=...
그리고 env폴더를 만들어서 테스트/상용 서버에 각기 넣어줄 환경변수를 작성했는데,
이곳이 gradle빌드할 때 혹은 XCode 빌드할 때 참조하는 실제 파일들이다.
env/.env.production
BASE_URL=... // 상용 BASE URL
TOPIC_ALL_USERS=...// 상용 토픽
GOOGLE_KEY=... // 상용 web client id
env/.env.development
BASE_URL=... // 테스트 BASE URL
TOPIC_ALL_USERS=... // 테스트용 FCM 토픽
GOOGLE_KEY=... // 테스트용 web client id
iOS 설정
1. 새 config 파일 생성
iOS설정 방법을 알아보겠디. XCode에서 새 config파일을 생성한다.
파일 유형들이 되게 많아서 우측 상단 검색창에 Config라고 검색하는 것이 좋다.
Config 파일 생성 후 - 클릭 - 내용에 아래 코드를 추가한다.
#include? "tmp.xcconfig"
3. 프로젝트 info - Configuration 수정하기