[React] env란

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

 

2. babel.config.js 파일에서 plugins 항목에 값 넣어주기

module.exports = function () {
  return {
    ...,
    **plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "react-native-dotenv",
        },
      ],
    ],**
  };
};

 

3. 최상단에 .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_환경변수이름 = 값 으로 하면 됩니다.

 

4. 갖다 쓰기

• process.env.변수이름 의 형태로 가져올 수 있다.
• 이 경우 프로젝트에서 자동으로 인식해 .env 파일에서 가져온다.

${process.env.EXPO_PUBLIC_KAKAO_REST_API_KEY}
${process.env.EXPO_PUBLIC_KAKAO_REDIRECT_URI}

 

5. 혹시 모르니 gitignore 확인하기

• gitignore에 .env가 들어있는 지 확인한다. 그래야 깃헙에 안올라가니
• 만일 다른 사람이 env 파일이라고 주면 자신의 .env 파일에 추가한다.

끗