첫번째 프로젝트가 무사히(?) 끝났다.
(물론 추가하고 싶은 기능도 있고, 리팩토링도 더 해야한다고 생각한다..!)
첫번째 프로젝트에서 가장 힘들었던 건 배포하는 과정이었다.
나는 Expo를 이용하여 React Native 기반의 안드로이드 앱을 개발했다.
구글 플레이 스토어에 내가 만든 앱을 등록하려면 build한 앱이 필요하다!
Expo의 장점 중 하나는 Expo CLI인데, 이를 통해 앱 빌드를 할 수 있다!
(초보자는 expo로 앱을 만드는 것이 훨씬 쉬워보인다!)
apk까지는 잘 만들어지지만,
설치해서 실행해보면 splash만 예쁘게(?) 나오고 종료되어 버렸다....
결론적으로는 환경 변수를 설정했던 파일에서 설정을 제대로 안했던 탓이었고,
이를 수정하고 나니 설치도 잘 되고 실행도 잘 된다!ㅎㅎ
나중에 잊어버리지 않기 위해 React Native 환경에서 환경 변수 설정하는 방법을 정리해 둔다.
일단 서버에서의 환경 변수는 dotenv npm을 사용했다.
그러나 expo로 작업했던 client 부분은 다른 방법을 찾아야 했다.
설정
그 중 나는 Environment Management in Expo 라는 블로그를 참고했다.
(react-native-dotenv npm도 검색에 나왔지만,
expo 환경에서 react-native 관련 library를 설치하면 에러가 너무 많아서... 시도하지 않았다.)
아래의 코드는 위에서 언급한 블로그에서 가져왔다. (극히 일부만 수정했다..)
//* environment.js
import Constants from "expo-constants";
const ENV = {
dev: {
apiUrl: localhost,
},
staging: {
apiUrl: "[your.staging.api.here]",
},
prod: {
apiUrl: "[your.production.api.here]",
// Add other keys you want here
}
};
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
// What is __DEV__ ?
// This variable is set to true when react-native is running in Dev mode.
// __DEV__ is true when run locally, but false when published.
if (__DEV__) {
return ENV.dev;
} else if (env === 'staging') {
return ENV.staging;
} else if (env === 'prod') {
return ENV.prod;
}
};
export default getEnvVars;위 코드에서 내가 찾아보고 공부했던 부분을 정리해보면,
1. __DEV__
일단 __DEV__는 Devlopment mode 일 때 무조건 true 값인 변수이다.
따라서 개발하는 과정에서 내가 사용하고자 했던 환경 변수는 ENV.dev 안에 넣어두었다.
조금 더 설명해보자면, (바쁘신 분은 skip!)
__DEV__는 검색하면 React Native 홈페이지에서 Polyfills라는 부분에서 찾을 수 있다.
코린이는 나는 저 홈페이지 내용으로는 이해할 수 없었다..
stackover flow에 누군가 친절히 남겨둔 것이 있었는데,
__DEV__는 global 변수로, 만약 ios simulator나 android emulator로 실행하면 __DEV__값은 true라고 설명해주고 있다.
2. env = staging? prod?
releaseChannel하는 channel이 staging인지 prod인지에 따라 환경 변수를 설정할 수 있다.
expo의 Release Channels 내용을 참고해보면,
앱을 빌드할 때 channel을 함께 입력해주면된다.
expo build:ios --release-channel <your-channel>
expo build:android --release-channel <your-channel>여기서 내가 실수한 부분이다.
나는 expo build:android 로 앱을 빌드하고 있었다.
그러나 나의 environment.js 파일의 코드 상으로는
staging, prod에 따라 환경 변수를 다르게 설정하고 있었다.
build된 앱은 __DEV__가 false가 되기 때문에,
나는 어떠한 환경변수에도 접근이 되지 않아 앱이 종료된 것이었다. 😭
추가적으로 staging, prod라는 단어도 찾아보았다.
개발 환경을 나타내는 단어였는데,
보통 개발 환경은 local, dev, integration, qa, staging, production으로 나눌 수 있다.
staging은 실제 운영 환경과 거의 동일한 환경으로,
운영 환경으로 이전하기 전 비 기능적인(보안, 성능, 장애 등) 부분을 검증하는 환경이다.
production은 실제 서비스 환경이다!
(내용은 개발 환경(dev,stage,qa,production)에서 참고하였다!)
사용
내가 설정한 환경 변수는 사용하고 싶은 파일의 상단에
아래와 같이 코드를 입력 후 사용하면 된다!
import getEnvVars from '../environment';
const { apiUrl } = getEnvVars();👉 포스팅을 하면서 참고한 내용은 모두 링크로 같이 남겨두었습니다. ☺️
