[React, Firebase] TwitterCloneCoding 0.0 초기 환경 설정 및 firebase 설치

<초기 설정>

1. npx create-react-app [appName]

2. firebase project 만들기

3. terminal 창에 firebase install
> npm install --save firebase

4. src 폴더 내 firebase.js 파일 생성

 

5. firebase SDK의 firebaseConfig 복사하여 아래와 같이 구성

 

firebaseConfig 내부 항목은 혹시 몰라서 가림

import { initializeApp } from "firebase/app";

const firebaseConfig = {
    apiKey: "a",
    authDomain: "b",
    projectId: "c",
    storageBucket: "d",
    messagingSenderId: "e",
    appId: "f"
  };

export default initializeApp(firebaseConfig);

 

 

<환경 변수 사용>

- React.js application 에서 환경 변수를 사용할 때  REACT_APP_'SOMETHING' 의 형태이어야 한다.

 

1. 루트 폴더에 .env 파일 생성

2. .env 파일 내부

REACT_APP_API_KEY="a"
REACT_APP_API_AUTH_DOMAIN = "b"
REACT_APP_API_PROJECTED_ID = "c"
REACT_APP_API_STORAGE_BUCKET = "d"
REACT_APP_API_MESSAGING_SENDER_ID = "e"
REACT_APP_API_APP_ID = "f"

3. 환경변수를 사용한 firebase.js

import { initializeApp } from "firebase/app";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_API_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_API_PROJECTED_ID,
    storageBucket: process.env.REACT_APP_API_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_API_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_API_APP_ID,
  };

export default initializeApp(firebaseConfig);

 

.env 를 사용하는 이유
- gitignore 에 .env를 추가하면 .env는 버전 관리 대상에 포함되지 않게 된다.
이로인해 github의 repository에는 key가 올라가지 않게 된다.

- 그러나 firebase에서 타인이 내 React.js application을 다운받아 빌드할 때 .env의 코드 또한 전달된다. 따라서 이는 보안을 위한 조치는 아니며 github에 key 값이 올라가지 않게하도록 하기 위함이다.