[ ReactNative / expo ] .env를 설정해 볼까요?
글을 쓰는 저는 한 번도 ReactNative를 만저본 적이 없다. 다만 React를 해봤으니,
괜찮지 않을까 라는 아니란 생각에 출발한 프로젝트였다.
결론부터 말하면,
이 글은 여전히 .env 설정과 sensitive Info 등록을 고민중에 있는 글임을 밝힙니다.
앱은 Ai + Expo 코드를 작성했다.
많은 코드는 Ai와 함께 코드를 작성했고 많은 component 코드는 문제가 없었다.
그런데, 광고를 넣기 위해서 데이터를 Ai에게 요청하면서 문제가 발생했다.
Ai가 출력하는 코드는 문제가 없다고 생각했다. 이유는 내가 React 기반 코드를
작성해본 사람이기 때문이다.
1. expo .env는 next js와 같이 전용 접두어가 있다.
2. 필요하다면 Ai 말고 "검색"을 통해 데이터를 찾아야 한다.
ReactNative, Google Mobile Ads 사용에 따른 .env 설정
환경은 expo : SDK52 version
차마시는 것을 좋아해 시작해 본 앱.
AI는 아직 완벽하지(?) 않다.
대다수 많은 코드가 Ai에서 가져왔다. 그래도 잘 돌아갔다. 적어도 코드는.
문제는 .env 작성해서 꼬인거 같다. 개인적으로 나의 프롬프트 작성에서도
문제가 있었을 지 모르겠지만 최근 데이터 또는 적은 양(?)의 언어는 살짝
아쉬움이 있지 않을까 한다.
APPlE에서는 매년 돈을 내야한다.
모바일에 광고를 다는 건 비용측면이다. APPLE은 App만 출시해도 매년 99달러를
가져간다. 반면, Andriod는 25달러만 최초비용으로 지불하면 된다.
광고없이는 매년 지출하는 Apple의 비용을 커버하기 조금은 버거울 것이다. 그렇게 광고를
시작해보기로 결정했다.
.env 파일 생성에 따른 주변 config 변경
안전한 google-mobile-ads를 위해 .env를 통해 KEY값을 전달 하려고 준비.
babel.config.js를 바로 아래와 같이 설치할 것을 AI가 제안.
expo용 .env 작성 방법은 아래에 있다.
// google-mobile-ads, npm 설치
npm i react-native-google-mobile-ads
Node.js 환경에 맞춰서 app.json → app.config.js으로 변경
이유는 process.env.EXPO_PUBLIC_ANDROID_ADMOB_APP_ID,
process.env.EXPO_PUBLIC_IOS_ADMOB_APP_ID를 불러오기 위해서.
// app.config.js 로 명칭 변경
import 'dotenv/config';
// AdMob 테스트 ID들을 상수로 정의const TEST_ANDROID_ADMOB_ID = "ca-app-pub-3940256099942544~3347511713";const TEST_IOS_ADMOB_ID = "ca-app-pub-3940256099942544~1458002511";
// 환경 설정 함수const getEnvironmentConfig = () => {if (process.env.NODE_ENV === 'development') {return {androidAdmobAppId: TEST_ANDROID_ADMOB_ID,iosAdmobAppId: TEST_IOS_ADMOB_ID,environment: 'development'};}
// production 환경return {androidAdmobAppId: process.env.EXPO_PUBLIC_ANDROID_ADMOB_APP_ID || TEST_ANDROID_ADMOB_ID,iosAdmobAppId: process.env.EXPO_PUBLIC_IOS_ADMOB_APP_ID || TEST_IOS_ADMOB_ID,environment: 'production'};};
const envConfig = getEnvironmentConfig();
export default {"expo": {"name": "teadiary",..
"ios": {...},
"android": {...},
"plugins": ["expo-router","expo-tracking-transparency",...],["react-native-google-mobile-ads",{"androidAppId": envConfig.androidAdmobAppId,"iosAppId":envConfig.iosAdmobAppId,"userTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."}]]}};
작성해야 한다.
// babel.config.js 첫번째 시도
export default function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
};
};
허나 위처럼까지 필요없다.
// 두 번째 시도
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo']
};
};
Expo 용 .env 작성 팁
expo .env도 별반 다를게 없다. 다만 모바일에서는 env 정보가 공개되기때문에 사용하지
않는다. 다시 말해 중요한 정보는 넣지 않는것이 중요하다.
expo용 접두사가 있다는 것을 명심하자.
// .env
EXPO_PUBLIC_API_URL=https://staging.example.com
EXPO_PUBLIC_API_KEY=abc123
// post.tsx
import { Button } from 'react-native';
function Post() {
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
async function onPress() {
await fetch(apiUrl, { ... })
}
return <Button onPress={onPress} title="Post" />;
}
공문 내 내용
Do not store sensitive info, such as private keys, in EXPO_PUBLIC_ variables. These variables will be visible in plain-text in your compiled application.
https://docs.expo.dev/guides/environment-variables/
요약 + 결론,
나는 최초에 Ai를 따라 했고 google-mobile-ads 를 첨부하기 전까지는
문제 없이 진행을 했다. .env를 넣은 후 아예 작동이 되지 않았다.
.env를 넣고 최초에는 문제가 없었다. 왜냐하면 cache가 존재해서였다.
문제는 그 다음날 부터였다.
웬걸, 앱은 더 이상 simulator을 통해서 작동하지 않았다.
그냥 아래와 같은 이미지만 계속 작동할 뿐이였다. (물론 여기까지 나오기 위해
다양한 작업을 했던 거 같다. 예를 들어, splash-icon에서 더 이상 이동 안됨)
.env의 작성 방식이 문제라는 걸 이해한 건 약 한 달이 지난 후였다.
expo에 대한 정보가 아직 부족한 거 같다. 하여 기록을 해놓으면 누군가...?
나와 유사한 부분에서 조금이나마 실마리를 갖길 바라는 마음에 기록해 본다.
희망사항
안전성에 완전함이 깃들진 못하지 않았나 생각이 든다. 그 부분을 유의해 참조하시길.
한 번쯤 앱이라는 것을 만들어보고 싶었고 더불어 내가 지속적으로 사양해 보고싶다.
더 나아가 사람들이 사용해서 피드백도 얻고 싶다.
참조
https://docs.page/invertase/react-native-google-mobile-ads
https://www.npmjs.com/package/react-native-google-mobile-ads