React Native에서 환경 변수 안전하게 관리방법

1) react-native-dotenv 설치

npm install react-native-dotenv

----

yarn add react-native-dotenv

2) Babel 설정 파일 업데이트

babel.config.js를 다음과 같이 수정

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blocklist: null,
          allowlist: null,
          safe: false,
          allowUndefined: true,
          verbose: false,
        },
      ],
    ],
  };
};

핵심은 plugins 에 dotenv를 넣어주는것! 즉 아래 코드를 넣어주는거라고 생각하면 된다

plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blocklist: null,
          allowlist: null,
          safe: false,
          allowUndefined: true,
          verbose: false,
        },
      ],
    ],

3) .env 파일 생성

API_KEY=your_api_key_here
API_URL=https://api.example.com

4) 환경 변수 사용하기

import { API_KEY, API_URL } from '@env';

console.log(API_KEY);
console.log(API_URL);

5) .env 파일 Git에서 제외하기

.gitignore 파일에 .env를 추가한다.

.env

❗️이렇게만 하면 정상적으로 동작하는지 알았지만

내 프로젝트의 경우 TypeScript로 되어있었기 때문에 정상적으로 작동하지 않았다.

Cannot find module '@env' or its corresponding type declarations.ts(2307)

라면서 @env 에 타입이 정의되지 않았다는 오류 메세지가 발생하였다.

다음은 해당 오류 해결하는 방법이다.

 types 폴더에 env.d.ts 파일을 생성

declare module '@env' {
  export const API_KEY: string;
}

다음과 같이 내용을 만들어주면된다.

혹시라도 이렇게 했을때 결과 안된다면 VsCode를 껏다 키는것도 방법이다.