Expo React Native에서 환경 변수 설정과 Babel

들어가며

최근 React Native 프로젝트에서 구글 소셜 로그인을 구현하면서 환경 변수 설정의 복잡함을 경험했다.
이 과정에서 babel.config.js라는 것을 알게 되었고, 환경 변수 설정의 모든 과정을 기록하고자 한다.

환경 변수 설정의 첫걸음

React Native Expo 프로젝트에서 환경 변수를 설정하는 것은 생각보다 까다로울 수 있다.
내 경우, 구글 소셜 로그인을 위한 클라이언트 ID를 안전하게 관리하고 싶었다.

필요한 패키지 설치

가장 먼저 react-native-dotenv 패키지를 설치했다:

npm install react-native-dotenv

Babel의 등장, babel.config.js

여기서 babel.config.js의 역할이 중요해진다.
이 파일은 Babel 트랜스파일러의 설정 파일로, 우리의 최신 JavaScript 코드를 구형 환경에서도 실행 가능하게 변환해준다.

Babel 설정 예시

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv']
    ]
  };
};

이 설정은 다음과 같은 기능:

• Expo의 기본 프리셋 유지
• react-native-dotenv 플러그인을 추가하여 환경 변수 로딩 지원

실제 환경 변수 설정

프로젝트 루트에 .env 파일을 생성하고 다음과 같이 설정했다:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_IOS_CLIENT_ID=your-ios-client-id

그리고 app.config.js에서는:

module.exports = {
  expo: {
    extra: {
      GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
      GOOGLE_IOS_CLIENT_ID: process.env.GOOGLE_IOS_CLIENT_ID,
    },
  },
};

안전한 환경 변수 사용

실제 사용 시에는 expo-constants를 통해 안전하게 접근한다:

import Constants from "expo-constants";

const clientId = Constants.expoConfig?.extra?.GOOGLE_CLIENT_ID || '';

주의사항

• .env 파일은 .gitignore에 추가하여 깃허브에 올라가지 않도록
• 실제 클라이언트 ID는 절대 하드코딩하지 말 것

마무리

환경 변수 설정 과정은 복잡해 보일 수 있지만, 한 번 제대로 설정하면 매우 안전하고 깔끔한 방식으로 민감한 정보를 관리할 수 있다.

더 알아보기

• Expo 환경 변수 공식 문서
• Babel 공식 문서