React-Native를 개발하다가 react-native-config를 이용하여 개발을 진행하는데 .env 파일 설정을 수정 후 설정 정보가 반영되지 않아 고생했던 내용을 정리해보려고 한다.
구글링을 통해서 찾아봤을 때에는 대부분 그냥 내용을 변경하면 적용이 된다고 했는데, React-Native 환경에서는 전혀 적용이 되지 않았다. 이 문제를 해결하기까지 2주는 시간을 투자했던 것 같다.
.env 설정 반영시 체크 사항
우선 .env 설정을 반영하기 전에 다양한 케이스로 간단하게 해결될 수 있으며, 오늘 정리하는 해결 방안을 확인하기 전에 체크 사항을 먼저 확인해 보는 것이 중요하다. 그렇지 않으면 해결 방법을 실행해도 동일하게 반영이 되지 않을 수 있다.
1. 환경 변수 변경사항 확인
.env 파일에 수정한 내용이 실제로 반영되었는지 확인한다. 오타나 잘못된 값이 있는지 확인하는 것이 중요하다.
2. 캐시 제거
어떤 개발 환경이든 항상 캐시 제거는 중요하며, React-Native 앱 역시 빌드된 후에 환경 변수가 캐시될 수 있다. 이 때문에 새로운 환경 변수가 반영되지 않을 수 있다.
3. 파일 경로 문제
.env 파일의 경로가 잘못 설정되어 있어서 변경 사항이 반영되지 않을 수 있다. .env 파일의 경로가 올바른지 다시 한번 확인해 보는 것이 좋다.
4. 라이브러리 버전 문제
사용 중인 react-native-config 라이브러리의 버전이 문제를 일으킬 수 있다. 최신 버전을 사용하는지 확인하고 필요하다면 업데이트하는 것이 좋다.
5. 플랫폼별 설정
iOS와 Android의 환경 변수 설정 방법이 다를 수 있다. 두 플랫폼에 대해 각각 환경 변수가 정확히 설정되었는지 확인해야 한다.
6. 디버그 모드 사용
디버그 모드에서 실행하면 변경사항이 더 빨리 반영될 수 있다. 디버그 모드로 앱을 실행하여 환경 변수가 제대로 적용되는지 확인하는 것이 좋다.
해결 방법
개발 환경은 mac (ios), windows (android) 두 운영체제에서 테스트를 진행하였으며, 방법은 동일합니다.
결과적으로 문제의 원인은 .env 설정 파일을 변경하더라도 react-native-config 라이브러리 자체가 이미 최초 작성된 설정값으로 빌드되어 프로젝트에 적용되어 있어서 .env 설정 파일을 수정했다면 react-native-config 라이브러리 자체를 제거 후 설치를 진행하게 되면 해결이 된다.
1. .env 설정 파일 수정 후 프로젝트 내의 node_modules 폴더 삭제
- mac (ios)
> rm -rf node_modules
- windows (android)
> rmdir /s node_modules2. npm package 재설치
- mac (ios)
> npm install
- windows (android)
> npm install3. pod, gradle 초기화
- mac (ios)
> cd ios
> pod deintegrate
> pod cache clean --all
> cd ..
- windows (android)
> cd android
> gradlew clean
> cd ..4. 프로젝트 실행
- mac (ios)
> react-native run-ios
- windows (android)
> react-native run-androidreact-native-config 라이브러리를 사용하게 되면 초기에 .env 설정 파일의 정보들이 react-native-config에 포함되어 build가 되기 때문에 .env파일만 수정한다고 해서 바로 반영이 되는 구조는 아니었습니다.
그래서 위와 같이 .env 파일 수정 후 react-native-config를 초기화를 시켜준 후 다시 실행하게 되면 정상적으로 처리되는 것을 확인할 수 있습니다.
react-native-config 사용 시 주의사항
react-native-config 라이브러리를 사용하면서 반영되지 않던 부분에 대해서는 해결 방법을 찾았지만, 환경 변수를 설정하는 라이브러리이기 때문에 효과적으로 관리를 하려면 여러 가지 주의사항을 정리하는 것이 좋다.
1. 빌드 후 환경 변수 반영
.env 파일을 수정하더라도 해당 내용이 즉시 앱에 반영되지 않기 때문에 새로운 빌드를 실행하여 변경 사항을 적용
2. 보안
.env 파일에는 보안에 민감한 정보 (개인정보, 토큰)를 포함시키지 않는 것이 좋다. 이 파일은 Github와 같은 버전 관리 시스템에 업로드되지 않도록 관리해야 한다.
3. 환경 변수 사용 시 주의
process.env를 사용하여 환경 변수에 접근할 때 오타나 잘못된 변수명을 사용하지 않도록 주의해야 하며, 오타가 발생하면 환경 변수가 정상적으로 로드되지 않아 예상치 못한 문제가 발생할 수 있다.
4. 디버깅 및 테스트
환경 변수가 제대로 로드되는지 확인하기 위해 디버깅 및 테스트를 수행해야 한다. 실수로 잘못된 환경 변수를 사용하거나 로드되지 않은 경우를 방지할 수 있다.
5. .env 파일 구조
.env 파일 구조는 키-값 쌍 (key-value pair)으로 되어야 한다.
6. 버전 호환성
프로젝트의 React-Native 버전과 react-native-config 라이브러리의 호환성을 확인해야 한다. 가끔 버전 간의 호환성 문제가 발생할 수 있다.
마무리
개인 앱을 만들어보고자 React-Native를 공부하면서 시작했는데, 간단한 앱을 만들려고 했는데 생각보다 많은 부분에서 시간을 많이 허비하게 되었다. 물론 해결 후에는 많은 성장을 할 수 있었는데, 쉽지는 않았던 것 같다. 오늘 해결한 내용은 react-native-config 라이브러리를 삭제 후 재설치해야 하는 번거로움이 있지만, 나중에는 이런 번거로움 없이 처리가 되었으면 좋겠고, 재설치하지 않아도 해결하는 방법이 있는지도 더 찾아봐야 되겠다.
