React Native 프로젝트에서 dev/prod 환경 분리를 .env 파일 기반으로 관리하고 있었는데, iOS 인앱 빌드 과정에서 환경변수가 정상적으로 주입되지 않는 이슈를 겪었다.
iOS에서 스킴을 분리했지만 env 파일 매핑이 빌드에 반영되지 않아, Dev 빌드가 의도와 달리 base(기본) 설정으로 빌드되는 문제가 발생했다.
이슈
기존구조
react-native-config 기반으로 환경변수를 주입하는 방식이었다.
.env.dev
.env.prod
- iOS 스킴 분기 시 env 파일 매핑이 불안정
- CI / 로컬 빌드 환경마다 동작이 달라짐
- 특정 케이스에서 iOS 빌드 후 JS에서 env 값이 비어 있음
dev/prod API가 섞일 수 있고,
실제 배포 환경에서도 예측 불가능한 설정이 들어갈 위험이 있었다.
해결
환경변수를 OS 레벨에서 주입하는 방식 대신, 앱 내부 config 모듈로 구조를 변경했다.
src/config/
├ env.dev.json
├ env.prod.json
├ keys.ts
└ index.ts
동작 방식
- 번들ID 기반으로 현재 환경 판단
- index.ts에서 dev/prod json 자동 선택
- keys.ts로 설정 키를 타입화
const isDev = bundleId.includes('.dev');
export const env = isDev ? devEnv : prodEnv;
Dev 스킴 → dev.json,
Prod 스킴 → prod.json 으로 자동 연결이 된다.
결과
✅ iOS 환경변수 불안정 문제 해결
빌드 방식과 상관없이 항상 동일한 config가 로드된다.
✅ 타입 안정성 확보
json + keys.ts 구조로 IDE 자동완성 가능
✅ 환경 분기 단순화
스킴만 선택하면 환경이 따라온다.
✅ 디버깅 쉬워짐
런타임에서 현재 환경을 바로 확인 가능.
개인적인 생각
.env 방식은 간단하지만, 모바일 환경에서는 빌드 파이프라인, 스킴, CI 등과 엮이면서 생각보다 불안정해질 수 있다고 느꼈다.
특히 iOS는 스킴, 번들ID, xcconfig, Fastlane/CI 등이 모두 맞물려 있어서, 환경변수를 외부에서 주입하는 방식보다 앱 내부에서 명시적으로 관리하는 구조가 더 예측 가능하다고 판단했다.
JSON + config 모듈 방식은 약간의 초기 작업이 필요하지만, 실수 가능성 감소 + 테스트 안정성 증가 + 유지보수성 개선 측면에서 충분히 가치 있는 선택이었다고 생각한다.
