TIL 24.12.02 react-native-expo 환경 변수 추가

문제점

 

현재 앱 개발을 위해서 react-native 를 학습하고 있는데, 조금 더 빠른 개발환경 구축을 위해 expo 를 선택했다.

서버는 일단 appwrite를 이용해서 만들었는데, config를 추가하는 와중에 평소 react 를 개발하던것처럼 REACT_APP 

.env에 환경변수를 작성하고 아무생각없이 process.env 로 불러왔다. (당연 작동안함 ...ㅎㅎ)

 

export const appwriteConfig = {
  endpoint: process.env.REACT_APP_END_POINT,
  platform: process.env.REACT_APP_PLATFORM,
  projectId: process.env.REACT_APP_PROJECT_ID,
  databaseId: process.env.REACT_APP_DATABASE_ID,
  userCollectionId: process.env.REACT_APP_USER_COLLECTION_ID,
  videoCollectionId: process.env.REACT_APP_VIDEO_COLLECTION_ID,
  storageId: process.env.REACT_APP_STORAGE_ID,
};

 

시도해본것

 

1. react-native-dotenv 라이브러리 사용

npm install react-native-dotenv

 

라이브러리를 설치한 후에 , balbel.config.js의 플러그인에 다음과 같이 추가해준다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

 

이후, 다음과 같이 import 해주면 환경변수를 사용할 수 있게 된다.

import {
  REACT_APP_END_POINT,
  REACT_APP_PLATFORM,
  REACT_APP_PROJECT_ID,
  REACT_APP_DATABASE_ID,
  REACT_APP_USER_COLLECTION_ID,
  REACT_APP_VIDEO_COLLECTION_ID,
  REACT_APP_STORAGE_ID,
} from "@env";

export const appwriteConfig = {
  endpoint: REACT_APP_END_POINT,
  platform: REACT_APP_PLATFORM,
  projectId: REACT_APP_PROJECT_ID,
  databaseId: REACT_APP_DATABASE_ID,
  userCollectionId: REACT_APP_USER_COLLECTION_ID,
  videoCollectionId: REACT_APP_VIDEO_COLLECTION_ID,
  storageId: REACT_APP_STORAGE_ID,
};

 

잘 작동하긴 하나, expo 에서 환경변수를 사용하려면 무조건 라이브러리를 설치해야한다는건 좀 아닌것 같아서 보다 정석적인 방식을 찾아보기로했다.

 

해결방안

 

https://docs.expo.dev/guides/environment-variables/

Environment variables in Expo

 

react-native-expo 에서 제공하는 환경변수 셋팅 방법이다. 

 

 

REACT_APP 으로 시작할게 아니라 이름을 EXPO_PUBLIC 으로 시작하라고 안내하고 있다.

이 방식 이후에, env 안에 이름을 싹 변경하고 다시 config 에 적용하니 에러 하나 없이 잘 나온다! 아주 굿.

 

알게된 것

 

무조건 공식문서 잘 찾아보기, 다양한 방식이 있을 수 있으니 여러가지 해보기. 라이브러리를 사용해서 잘 된다고 하더라도 정석적이고 효율적인 방식을 찾아보기