환경변수 관리해주는 .env 파일 만들기

환경변수들 관리해주는 .env파일 따로만들어주면, api key등 개인정보를 직접적으로 노출하지 않고 파일 관리가 가능하다.

.env는 파일의 최상단 루트에 만들어줄 것!

🧐.env내에서 환경변수 적는 법

REACT_APP_FIREBASE_API_KEY = ""
REACT_APP_FIREBASE_AUTH_DOMAIN = ""
REACT_APP_FIREBASE_PROJECT_ID =""
REACT_APP_FIREBASE_STORAGE_BUCKET = ""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ""
REACT_APP_FIREBASE_MEASUREMENT_ID = ""
REACT_APP_CLIENT_ID = ""

👉 리액트 내에서는 REACT_APP을 시작으로 적어줄 것
👉 const 등으로 변수를 따로 선언해주지 않음
👉 세미콜론(;) 붙히지 않음

🧐 환경변수 가져오는 법

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

👉 process.env.(저장한 환경변수 이름)