[React Native] expo에서 환경변수 추가하기

React Native로 간단한 앱을 만들고 있다.

 

최근에는 개발할 때 주로 Cursor를 사용하고 있다.

https://www.cursor.com/

Cursor

 

 

환경변수를 추가하기 위해 chat에 물어보니 react-native-dotenv 라이브러리를 권장했다.

https://www.npmjs.com/package/react-native-dotenv

react-native-dotenv

 

찾아보니 많이 사용하는 라이브러리같아서 설치하고 각종 설정파일들을 추가했다.

 

expo로 시뮬레이터를 돌려 확인해보니 .env 파일에 추가한 값이 잘 나타나는 것을 확인할 수 있었다.

 

 

그런데, 분명 처음에는 잘 돌아갔는데, 갑자기 에러가 뜨면서 expo가 실행되지 않았다.🫠

 

잠깐 맥북 메모리 이슈로 재부팅을 했는데, 그 사이에 이런 일이.....

 

iOS Bundling failed 9881ms node_modules/expo-router/entry.js (1007 modules)
 ERROR  node_modules/expo-router/_ctx.ios.js: node_modules/expo-router/_ctx.ios.js:Invalid call at line 5: process.env.EXPO_ROUTER_IMPORT_MODE
Fourth argument of `require.context` should be an optional string "mode" denoting how the modules will be resolved.

 

처음에는 expo 설정이 뭔가 꼬였나해서 cache도 지우고, node modules도 다시 설치하고, 구글링도 열심히 해봤지만 해결 방법을 찾을 수 없었다.

 

그러다 혹시나 env 파일 문제인가 해서  react-native-dotenv 설치 이전으로 롤백하니 다시 잘 동작하는 걸 확인할 수 있었다.🤣

 

react-native-dotenv를 사용할 때 babel이나 typescript 환경 설정 등이 필요했는데,

여기서 뭔가 설정을 잘 못했을 수도 있고 버전 이슈일 수도 있다.

 

그러다 갑자기 expo에 환경 변수 설정하는 내용이 없을까 해서 공식문서를 찾아봤다.

 

역시나... 공식문서에는 답이 있었다.

 

https://docs.expo.dev/guides/environment-variables/

Environment variables in Expo

 

그냥 .env 파일을 추가하고, EXPO_PUBLIC으로 시작하는 환경변수를 추가하면 된다.

 

// 환경변수 설정
// .env
EXPO_PUBLIC_API_KEY='hahaha this is api key'

// 사용할 때
const apiKey = process.env.EXPO_PUBLIC_API_KEY

 

react-native-dotenv 설정이 문제일 수도 있지만, EXPO 문서대로 사용하면 라이브러리를 추가할 필요도 없고, 복잡한 설정을 할 필요도 없다.

 

물론, EXPO를 아직 배포하지 않아서 추후에 어떤 이슈가 발생할지 모르지만....

일단 공식문서를 믿고 설정해보았다.

 

 

 

결론::
expo를 사용할 때는 반드시 검색어에 expo를 포함하자.
공식문서를 먼저 확인하자.