[ Fire Base / ver. 9.14.0 ] Setup

Firebase 설치시 npm i firebase 를 하면 최신버전이 인스톨된다.

 

npm i firebase@9.14.0 이와 같이 입력하면 버전 9.14.0으로 사용가능 하다.

 

create-react-app 을 사용했을 때 의 기준으로 작성되었다.

 

 

# 사용예시

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { getFirestore } from "firebase/firestore";

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_MESSAGIN_ID,
    appId: process.env.REACT_APP_APP_ID,
};

firebase.initializeApp(firebaseConfig);

export const authService = firebase.auth();
export const dbService = getFirestore();

나의 경우 Fbase.js 라는 js파일을 만들어 주고 사용하고자하는 기능들을 임포트 시킨 후 따로 변수를 지정해주어서

export 해서 필요한 컴포넌트에서 임포트 시켜서 사용하고 있다.

 

 

# Absolute Imports 경로 src고정하는 기능 ( 부가기능 )

import 경로의 경우 Absolute Imports를 사용하고 있기 때문에 초기경로가 모두 src폴더에서 시작한다.

장점으로는 가독성이 좋고, 경로를 직관적으로 볼 수 있어 경로오류를 줄여주므로 작업 속도를 늘려 줄 수 있다.

적용 방법은 src폴더 위치와 동일한 위치에 jsconfig.json 파일을 만들어서 https://create-react-app.dev/docs/importing-a-component/

링크를 통해 Absolute Imports의 코드블럭 내용을 복사하여 해당 파일에 붙여넣기하면 된다.

 

# Fire Base 프로젝트 만들기

파이어베이스 웹사이트에 접속하여 새로운 프로젝트를 만들고자 하는 앱 혹은 웹을 선택하여 생성한다.

이 후 코드블럭에 Firebase configuration 부분을 복사해서 Fbase.js에 붙여넣기 한다.

const firebaseConfig = {
    apiKey: This0is0the0key,
    authDomain: project-111.firebaseapp.com,
    projectId: project-111,
    storageBucket: project-111.appspot.com,
    messagingSenderId: 112114119000,
    appId: 10:3.1415926535:web:a1b1c2d615s6s1s5,
};

위와 같이 오브젝트 리터럴을 가지게 되는데 이 config key들이 노출되면 누구나 해당 키를 연결하여 데이터 베이스를 만질 수 있게 된다.

깃허브에 푸쉬하여 공유할 경우 암호화를 시킬 필요가 있어보인다.

 

# config key 깃허브 푸쉬로부터 암호화 시키기

.gitignore 의 위치와 같은 위치에 .env 파일을 만든 후 아래와 같이 변수를 만들어 준 후 Firebase에서 받은 config key들을 할당해준다.

REACT_APP_API_KEY=This0is0the0key
REACT_APP_AUTH_DOMAIN=project-111.firebaseapp.com
REACT_APP_PROJECT_ID=project-111
REACT_APP_STORAGE_BUCKET=project-111.appspot.com
REACT_APP_MESSAGIN_ID=112114119000
REACT_APP_APP_ID=10:3.1415926535:web:a1b1c2d615s6s1s5

위와 같이 create-react-app에서는 환경변수를 사용할때 REACT_APP_***_*** 이런식으로 변수명을 지정해주어야 적용된다.

지키지 않을경우 절대로 할당값은 적용되지 않는다.

 

이 후에 .gitignore 파일을 열어서 # misc 주석이 달려있는 가장 밑 부분에 .env를 추가해주면 .env는 푸쉬에서 제외된다.

( 웹스톰의 경우 리베이스를 해주어야 된다. )

 

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_MESSAGIN_ID,
    appId: process.env.REACT_APP_APP_ID,
};

이 후 process.env.변수명 을 입력해주어서 암호화 한다.