React Native - 환경 변수 설정하기(react-native-config 사용과 에러)

📖들어가며..

React Native를 사용하면서 버전관련해 외부 라이브러리와 맞지 않거나 이슈가 있거나 하는 부분들이 있었다.

이번에는 react-native-config를 사용하는 방법과 이유에 대해서 정리하고,

해당 라이브러리를 사용하면서 발견한 에러를 정리하고 기록해보고자 한다.

 

 

 

---

 

React Native 최신 버전을 사용하고 있지 않아요

나는 React Native를 사용하면서 최신 버전을 사용하고 있지않다.

지금 날짜 기준으로 최신 버전은 0.82

나는 0.79.4 버전을 쓰고 있다.

 

이유는 

현재 react-navigation/native 라이브러리를 사용하고 있고,

여기서 Drawer 네비게이션을 사용하고 있다.

그리고 react-native-maps 라이브러리를 이용해서 구글맵을 사용하고 있는데

현재 버전과 관련해서 이슈가 존재한다.

https://github.com/react-native-maps/react-native-maps/issues/5781

[Android] addViewAt: failed to insert view · Issue #5781 · react-native-maps/react-native-maps

 

그래서 최대한 정상적으로 동작하는 버전으로 수행하기 위해서 해당 버전으로 사용하고 있다.

 

 

🤔react-native-config는 무슨 라이브러리?

react-native-config는 React Native 앱에서 환경 변수를 관리하기 위한 라이브러리

주요 기능

환경별 설정 관리

• 개발(development), 스테이징(staging), 프로덕션(production) 등 서로 다른 환경에 맞는 설정값을 분리해서 관리
• API 엔드포인트, API 키, 기능 플래그 등을 환경별로 다르게 설정 가능

네이티브 코드 접근

• JavaScript 코드뿐만 아니라 네이티브 코드(iOS/Android)에서도 환경 변수에 접근 가능
• Info.plist, AndroidManifest.xml 등에서도 변수를 사용 가능

 

🤔react-native-config 왜 쓰는 건데?

환경변수 설정을 위한 라이브러리 중 react native dotenv라는 라이브러리도 있다.

react native dotenv는 설정하기는 간편한데 IOS나 안드로이드 네이티브 코드단까지 환경변수 설정 하는 방법은 나오지 않는다.

만약 타입스크립트에서만 사용하려면 dotenv만 사용해도 된다.

 

 

🤔사용방법은?

1. 설치

npm i react-native-config

2. .env 파일 생성(환경 변수 작성)

3. IOS 설정 파일 수정

npx pod-install ios 명령어 실행

AppDelegate.swift 파일에 코드 추가

 

하지만 공식문서의 코드는 최신 버전이라서 아래 코드로 바꿔야함

 func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
	  //아래처럼 수정
    if let googleApiKey = RNCConfig.env(for: "GOOGLE_MAP_API_KEY"){
      GMSServices.provideAPIKey(googleApiKey)
    }

4. 파일 탐색기에서 Project.xcworkspace 열기

5. New file from Template  클릭

6. headerFile 선택하고 이름을 지정하는데프로젝트 이름-Bridging-Header.h 로 입력해야 함

7. 해당 파일에 코드 추가

#import “RNConfig.h”

8. 이제 이 브릿징 헤더 파일을 프로젝트에 설정하면 됨

 

 

Android 설정 파일 수정

아래 이미지 과정을 진행하면된다.

현재 TroubleShooting으로 특정 코드를 추가해야한다.

-keep class com.mypackage.BuildConfig { *; }

//mypackage가 아니라 내 패키지 이름으로

android/app/proguard-rules.pro 파일에 위 코드 추가

- 프로덕션 환경에서 .env 파일이 안드로이드에서 읽히지않을 때 해당 부분 추가한다고 한다.

AndroidManifest.xml 에 아래코드 추가

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">
      <!--아래처럼 수정-->
       <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="@string/GOOGLE_MAP_API_KEY" />

 

지금은 글로 간단하게 요약했는데 공식문서에 다 나와있으니 그거 보고 하면된다.

사실 중요한 건 설치 과정이 아니기 때문에..!

 

🤔타입스크립트의 환경변수가 타입 추론 되도록 하는 방법?

지금 환경 변수를 사용하려고하면 타입에러가 발생할 것이다.

이를 해결하기 위해서는 아래처럼 정의해줘야 한다.

types/react-native-config.d.ts

declare module 'react-native-config' {
  export interface NativeConfig {
    GOOGLE_MAP_API_KEY?: string; //실제 사용하는 키 작성
  }

  export const Config: NativeConfig;
  export default Config;
}

 

 

🤔react-native-config의 버전1.5.9로 했을 때 에러 발생!

사실 이것 때문에 블로그 글을 작성했다.

만약 위 설치 과정을 그대로 진행하고 실행하면 아래에러가 발생할 것이다.

BUILD FAILED in 3s
error Failed to install the app. Command failed with exit code 1: 
gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an 
exception. * What went wrong: Execution failed for task ':app:buildCMakeDebug[arm64-v8a]'. > 
com.android.ide.common.process.ProcessException: ninja: Entering directory 
C:\Users\User\Documents\GitHub\my-map-react-native\android\app\.cxx\Debug\311b3ep1\arm64-v8a' 
[0/2] Re-checking globbed directories... [1/2] Re-running CMake... -- Configuring incomplete, 
errors occurred! See also "C:/Users/User/Documents/GitHub/my-map-react-native/android/app/.cxx/
Debug/311b3ep1/arm64-v8a/CMakeFiles/CMakeOutput.log". FAILED: build.ninja C:\Users\User\AppData\
Local\Android\Sdk\cmake\3.22.1\bin\cmake.exe --regenerate-during-build -SC:\Users\User\
Documents\GitHub\my-map-react-native\node_modules\react-native\ReactAndroid\cmake-utils\
default-app-setup -BC:\Users\User\Documents\GitHub\my-map-react-native\android\app\.cxx\Debug\
311b3ep1\arm64-v8a C++ build system [build] failed while executing: @echo off "C:\\Users\\User
\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^ -C ^ "C:\\Users\\User\\
Documents\\GitHub\\my-map-react-native\\android\\app\\.cxx\\Debug\\311b3ep1\\arm64-v8a" ^ 
appmodules ^ react_codegen_rnscreens ^ react_codegen_safeareacontext from C:\Users\User\
Documents\GitHub\my-map-react-native\android\app CMake Error at C:/Users/User/Documents/
GitHub/my-map-react-native/android/app/build/generated/autolinking/src/main/jni/
Android-autolinking.cmake:13 (add_subdirectory): add_subdirectory given source 
"C:/Users/User/Documents/GitHub/my-map-react-native/node_modules/react-native-config/
android/build/generated/source/codegen/jni/" which is not an existing directory. 
Call Stack (most recent call first): C:/Users/User/Documents/GitHub/my-map-react-native/
node_modules/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake:100 
(include) CMakeLists.txt:31 (include) CMake Error at C:/Users/User/Documents/GitHub/
my-map-react-native/node_modules/react-native/ReactAndroid/cmake-utils/
ReactNative-application.cmake:103 (target_link_libraries): 
Cannot specify link libraries for target "react_codegen_RNCConfigModule" 
which is not built by this project. Call Stack (most recent call first): 
CMakeLists.txt:31 (include) ninja: error: rebuilding 'build.ninja': 
subcommand failed * Try: > Run with --stacktrace option to get the stack trace. > 
Run with --info or --debug option to get more log output. > Run with --scan to get 
full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 3s.
info Run CLI with --verbose flag for more details.

이 에러는 react-native-config의 CMake 설정이 깨졌을 때 생기는 오류라고 한다.

핵심 메시지를 보면 

add_subdirectory given source .../react-native-config/android/build/generated/source/codegen/jni/ which is not an existing directory.

→ 즉, jni/ 폴더가 없어서 CMake가 빌드 타겟을 찾지 못한 상태

 

근데 아무리 찾아봐도 이런 이슈는 없었고, 다시 삭제했다 설치해도 똑같은 오류가 발생했다.

그래서 버전을 1.5.5로 다운그레이드해서 재설치하니까 정상적으로 동작했다.

 

처음에는 버전 때문이 아닐 수도 있겠다 싶어서 다시 최신 버전을 설치해서 했더니 똑같은 에러가 다시 나타났다.

그러면 일단 버전 문제인거고 어디가 충돌이 났거나 했다는 건데

해당 문제의 원인을 제대로 찾지는 못했다.

 

임시 방편만 찾고 원인은 찾지 못한 것이다.

 

나중에라도 이유를 알기 위해서 블로그에 기록을 하기로 했다..

 

---

 

 

 

📘마치며..

사실 위 에러에 대한 원인을 찾으려다가 시간이 너무 지체되었고, 

react native를 빠르게 배우고자하는 목적이 컷기에 이렇게 기록으로만 남겨두었다.

언젠가는 다시 만날 에러이고, 그 날의 내가 해결하기를 바라면서..