[ReactNative] env란

이효린·2023년 9월 25일
0

ReactNative

목록 보기
1/1
post-thumbnail

env란

  • environment variable로 환경변수를 뜻한다.
  • API_KEY, DB관련 정보 등 개발팀 내에서만 알아야 하는 값이 있다.
  • 이때 dotenv 패키지를 사용해 환경변수 파일을 외부에 만들어 필요할 때마다 import해 하드코딩하지 않고 사용할 수 있다.
  • 또한 .env파일을 gitignore에 추가해 github에 올라가지 않도록 설정 가능하다.
  • 팀내에서 공유할 땐 그냥 내 env 파일 긁어서 복붙해서 주거나 slack bot을 이용할 수 있다.

우리 프로젝트에서 어떻게 쓰나

  1. react-native-dotenv 라이브러리 설치
yarn add -D @types/react-native-dotenv
  1. babel.config.js 파일에서 plugins 항목에 값 넣어주기
module.exports = function () {
  return {
    ...,
    **plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "react-native-dotenv",
        },
      ],
    ],**
  };
};
  1. 최상단에 .env 파일 만들고 내용 추가하기
//.env
EXPO_PUBLIC_KAKAO_REST_API_KEY = 어쩌고 저쩌고
EXPO_PUBLIC_KAKAO_REDIRECT_URI = https://moyeota-webview.netlify.app/
EXPO_PUBLIC_환경변수_이름 = 어쩌고 저쩌고
  • 우리는 Expo 환경에서 개발중이기에 env파일 내의 변수 이름 앞에 EXPO_PUBLIC_ 을 붙여주어야 한다.
  • 여담으로 CRA를 이용해 프로젝트를 만든 경우 REACT_APP_환경변수이름 = 값 의 형태로 쓰면 된다.
  • 또 여담인데 vite로 프로젝트를 만들면 VITE_환경변수이름 = 값 으로 하면 된다.
  1. 갖다 쓰기
  • process.env.변수이름 의 형태로 가져올 수 있다.
  • 이 경우 프로젝트에서 자동으로 인식해 .env 파일에서 가져온다.
${process.env.EXPO_PUBLIC_KAKAO_REST_API_KEY}
${process.env.EXPO_PUBLIC_KAKAO_REDIRECT_URI}
  1. 혹시 모르니 gitignore 확인하기
  • gitignore에 .env가 들어있는 지 확인한다. 그래야 깃헙에 안올라가니…
  1. 만일 다른 사람이 env 파일이라고 주면 자신의 .env 파일에 추가한다.

0개의 댓글

관련 채용 정보