Firebase| 시작 전, 초기화 setup하기

파이어베이스를 초기화하는

전용 파일을 만들 것이다.

src 폴더에

service폴더를 만들어놓고

파이어베이스 전용 파일을 만든다.

 

그 다음,

cmd에다가 yarn add firebase해서 

필요한 파이어베이스를 추가해준다.

 

설치가 완료 된 후에

package.json파일로 가서보면

이렇게 파이어베이스가 추가되었을 것이다.

 

 

그리고 이렇게 파이어베이스에서 

주어지는 SDK를 복사해서

우리의 firebase.js 파일에 붙여넣기 해준다.

 

 

그런데 이 코드에는 apikey가 있기때문에

공유할 때 문제가 될 수 있다.

그렇기 때문에 env로 key값을 빼주는 작업을 할 것이다.

 

상위 폴더에 .env파일을 만들어 준다.

 

 

REACT_APP_FIREBASE_

그리고 env파일에서는

항상 REACT_APP_이라는 프리픽스를 붙여주고

하고자하는 이름을 붙여준다.

 

 

REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_DB_URL=
REACT_APP_FIREBASE_PROJECT_ID=

이런식으로 뒤에 이름을 붙이고, = 뒤에는

key값들을 옮겨준다.

 

 

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  };

그리고 기존 firbase.js 파일에있는 key값들은

env에서 값을 읽어온다.

 

 

그리고 이 값을 커밋하면 안되니까

.gitignore 파일에서

#API Keys
.env

이렇게 추가를 해준다.