코드

// .env
REACT_APP_API_KEY = blabla
REACT_APP_AUTH_DOMAIN = blabla
REACT_APP_PROJECT_ID = blabla
REACT_APP_STORAGE_BUCKET = blabla
REACT_APP_MESSAGING_SENDER_ID = blabla
REACT_APP_APP_ID = blabla

// firebase.js
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

배운점

• create-react-app을 이용해 만든 프로젝트는 .env 파일 변수들 앞에 REACTAPP'SOMETING' 처럼 REACTAPP을 넣어줌
• 보안적으로는 취약함. 어차피 사용자에게 key들이 보여짐. 하지만 github에 노출하기 싫을 때 위처럼 설정
• process.env.'가져올 값' 입력하면 import 없이 사용 가능
• .env 작성 시 값에 따옴표를 넣지 않음
• .gitignore에서 .env 추가