React Native 환경변수 관리: react-native-envdot에서 Expo 공식 방식으로 전환

요약

---

react-native-envdot은 라이브러리라서 예상치 않은 문제를 일으킬수있다.

 

나의 경우 welcom to expo 가 보이는 예상치 않은 페이지를 렌더 시켜주어서 걷어내고

 

Expo에서 권장하는 EXPO_PUBLIC_ 를 env에 붙여 사용 추천

 

 

---

 

 

React Native 프로젝트에서 환경변수를 쉽게 다루기 위해 다양한 방법들을 찾아보다가,

 

가장 먼저 눈에 들어온 건 바로 react-native-envdot

 

주간 다운로드 수가 약 14만 건에 달할 만큼 많은 유저들이 사용하여 별 의심 없이 설치를 진행하였다 (실수 😅😂)

 

 

 

설치는 간단했고, 아래 작업들을 순차적으로 진행했었다

• react-native-envdot 설치
• babel.config.js에 관련 플러그인 추가
• TypeScript를 사용하고 있어 env.d.ts 파일 작성 및 tsconfig.json에 include
• ESLint 관련 오류가 발생하여 eslint.config.js에도 설정 추가
• npx expo start -c로 캐시까지 비우며 클린 빌드

잘될거라 기대하며 앱을 구동시켰는데..?

 

빠밤

 

 

왜 너가 계속 나와..?

 

그리하여 무엇이 문제인지 찾고있다가

나와 똑같은 증상을 보인다는 stackoverflow 글을 보고 

react-native-envdot 라이브러리가 문제를 일으킨 다는 사실을 알게되었다...

 

https://stackoverflow.com/questions/78494804/expo-stuck-on-welcome-to-expo-screen

 

그리하여 부랴부랴 다 걷어내고 다른 방법을 찾아보다가 Expo에서 환경변수로 사용시 아래와 같이 하라는 공홈 해결법을 찾게 되었다.!

 

EXPO_PUBLIC_ 를 env에 붙여서 사용하면 가능하다 하여 변경 완료!

 

---

 

공식 홈페이지를 찾으면 이리도 빠르고 설치도 필요없는것을...

오늘도 공식 홈페이지를 안봤던 나를 원망한다..