[React Native] 환경변수 사용하여 API KEY 숨기기 (a.k.a. env)

 

 

 

날씨 앱을 제작하면서,

(사실 이전에도 한번 제작했었지만 👀)

 

API KEY 는 잘 꼭 꼭 숨겨두어야 한다고 보았기에,

React Native 앱 제작하면서도 API 연동하는 작업을 보자마자

키 숨기는 방법부터 찾아나섰다.

 

이틀동안 빨간 창 보게 한 dotenv 에 대해 . . 알아보자 ! 😡

 

 

---

 

ENV

웹, 앱 개발을 하다보면 API KEY 뿐만 아니라 포트, DB 관련 정보, 등

개발자만 알아야 하는 값, 즉 Github 과 같은 오픈 소스에 올리면

안 되는 값들이 있다.

 

그 때 그 값들을 저장해 놓는 파일을 .env 에 넣어둔다.

.env (environment) 에는 이름에서 알 수 있듯이, 환경 변수들이 들어간다.

여기서 환경변수는 특정 process를 위한 key-value 형태의 변수이다.

 

Node.js 와 React.js 에서 사용할 수 있으며, 변수를 사용함으로써

보안성 있는 코드를 작성할 수 있게 된다.

이러한 .env 파일은 항상 프로젝트의 최상위 루트에 만들어둔다!

 

 

 

REACT 에서의 ENV

react native 에서의 env 파일 작성법을 다루기 전에,

잠깐 삽질했던 react 에서의 env 파일 사용법에 대해 함께 알아보자 ✍

 

env를 사용하기 위해서는 dotenv 를 우선 설치해주어야 한다.

# dotenv 란? 환경변수를 .env 파일에 저장하고 process.env 로 로드하는 의존성 모듈

 

그리고 아래와 같은 프로세스로 코드를 작성하면

(내가 생각했을 때) 리액트 내에서는 무리없이 동작하는 것 같다.

간략하게 프로세스와 코드로 보면 아래와 같다.

 

• 변수명은 반드시 "REACT_APP_" 으로 시작한다
• 프로젝트 상단에 .env 를 불러준다
• 환경변수를 코드 내에서 사용한다

// install dotenv
npm install --save dotenv

//.env
REACT_APP_API_KEY=YOU_API_KEY

// index.js
require('dotenv').config();
console.log(process.env.REACT_APP_API_KEY) //YOU_API_KEY

 

 

---

 

RN 에서의 ENV

RN 을 따로 구분해둔 이유는 앞서 말하였듯이,

위와 같은 방식으로 진행했을 때 내 RN 프로젝트에서

제대로 동작하지 않았기 때문이다 . . 

 

저 방식 사용법을 잘 몰라서 그럴 수도 있겠지만

아무튼간에 React Native 에서 dotenv 를 사용하는 방법을 찾았다 !

 

react-native-dotenv 를 활용하면 RN 프로젝트에서도

dotenv 를 오류 없이 사용할 수 있다 🤘

 

먼저 다음과 같이 설치를 진행하고

$ npm install react-native-dotenv

 

기본 세팅으로, babel.config.js 파일에 다음과 같이 작성해준다.

module.exports = {
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: 'react-native-dotenv',
      },
    ],
  ],
};

 

이렇게만 사용 세팅은 끝이다!

다음과 같이 프로젝트 내에서 환경변수를 선언하고 자유롭게 사용해보자.

// .env
REACT_APP_API_KEY=YOUR_API_KEY

// App.js
import { REACT_APP_API_KEY } from "react-native-dotenv";
console.log(REACT_APP_API_KEY);

 

 

 

 

 

© 참고

.env 를 사용해야 하는 이유

React 에서 .env 를 이용한 변수 선언 및 사용법

https://www.npmjs.com/package/react-native-dotenv (npm / react-native-dotenv) 

https://github.com/goatandsheep/react-native-dotenv (react-native-dotenv 공식 Github)

react-native-dotenv