[React Native] 앱에서 .env 파일과 환경 변수 사용

사용하는 이유는 여러가지이다!

첫 번째는 보안, 두 번째도 보안, 세 번째는 협업, 네 번째는 환경별 다른 설정(개발용, 배포용 등) 다섯번째는 여러 서비스 키 관리 등이 있당

---

해당 내용은 앱에서 env 사용하는 경우이므로,

서버나 스크립트에서

import 'dotenv/config';/process.env.KEY,process.cwd(), path.join 등 Node.js API 사용하여

.env 파일을 런타임에 읽어서 process.env에 주입하는 것과는 별개의 방법임!!을

알고 사용하자!

---

우선 react-native-dotenv 패키지가 필요!

 

1. 패키지 설치

npm install react-native-dotenv

 

2. 프로젝트 루트에 .env 파일 생성

AMPLITUDE_API_KEY=2b645b2935a1e99120e0e4222e1af075

 

3. babel.config.js 수정

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
      },
    ],
  ],
};

 

4. 사용

import { AMPLITUDE_API_KEY } from '@env';

React.useEffect(() => {
  const initAmplitude = async () => {
    try {
      await amplitude.init(AMPLITUDE_API_KEY);

 

5. .gitignore에 추가(***중요!!!)

# .env 파일 git에 올리지 않기
.env

 

6. 캐시 클리어 후 재시작

npm start -- --reset-cache

이렇게 안전하게 + 용이하게 관리할 수 있다 :>

---