🌟 Firebase 키 환경변수 설정

1. twinkle/.evn 생성
2. 비밀로하고 싶은 키 작성

   ❗️CRA로 앱 만들고.env에서 환경변수 사용하려면 변수 이름을 REACT_APP_으로 시작해야 한다.
   REACT_APP_으로 시작하는 환경변수를 찾도록 자동으로 설정되어 있기 때문이다.

REACT_APP_대문자로환경변수이름적고띄워쓰기는_언더바로=비밀키

REACT_APP_API_KEY=키 값
REACT_APP_AUTH_DOMAIN=키 값
REACT_APP_PROJECT_ID=키 값
REACT_APP_STORAGE_BUCKET=키 값
REACT_APP_MESSAGING_SENDER_ID=키 값
REACT_APP_APP_ID=키 값

3. 환경 변수를 사용할 때는 process.env.REACT_APP_API_KEY 이런식으로 사용하면 된다.

import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
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,
};

// Initialize Firebase
export default initializeApp(firebaseConfig);

4. .gitignore에 .env 추가하기
   깃 버전 관리 대상에 불포함되도록 gitignore에 환경변수 넣어 놓은 파일 적어주자.

환경변수를 설정하는건 보안 때문만은 아니라고 한다.

환경변수를 만들고 환경변수가 들어있는 파일을 gitignore에 추가한다고 내 비밀 키값들이 노출되는것을 완전히 막을 수는 없다. 왜냐하면 firebase는 client로부터 요청을 받아야 하기 때문에, 즉 웹사이트에 들어가서 내가 만든 프로젝트인 React.js application을 내려 받아야 하기 때문이다.
내가 CRD로 부터 application을 빌드할 때, CRD는 환경변수 값들을 실제 값으로 바꾼다. 그렇게 해야 firebase에 접근할 수 있기 때문이다.

따지자면 환경변수는 Github에 업로드하기 싫어서 설정해 두는 거라고 하는데...

다른 보안 요소들이 많이 추가될 예정이니까 키값 숨기는거에 몰두할 필요는 없다고 한다.
예를 들어 특정 도메인에서만 이 key를 사용하도록 한다든지 등...