[InvestBridge] Firebase&React 연결

지난 포스팅과 이어지는 내용!

지난 포스팅에서 DB를 생성했고 이제 이 DB를 React와 연결해 줄 것이다.

1. 웹 앱에 Firebase 추가

만들어둔 프로젝트로 들어가 웹 앱에 파이어베이스를 추가해주는 과정을 거친다.
앱 생성에 들어가면 처음에 앱 닉네임을 설정해주고, 그 다음으로 넘어가면 Firebase SDK추가가 나온다. 나는 여기서 npm사용을 선택해주었다.

아래 코드들을 프로젝트에 추가해주어야하기 때문에 복사해둔다.

그리고 VS code의 터미널 창에서 리액트 코드가 들어있는 디렉토리로 들어가 npm install firebase 명령어를 입력해준다.

그리고 아까 복사해둔 코드를 src디렉토리에 firebase.config.js 파일을 생성하고 넣어준 후 복사해준다. 다른 분들의 코드를 참고해서 수정을 해주었는데, 우선 아직 이유는 찾지 못했지만

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore ";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

아래 두 부분을 수정해주었는데,

import { getFirestore } from "firebase/firestore ";

이 부분은 아직 이해를 잘 하지 못했고,,,

export const db = getFirestore(app);

이 부분은, export를 사용해서 내보내주어야한다고 했다.

그리고 여기까지만 수정해도 되지만 깃허브에 올라갈 때 저 키 값들이 노출되지 않는것이 좋다고해서, firebaseConfig의 값들을 모두 환경변수 처리를 해주었다.(보안 측면에서 안전하다고 한다.)

환경 변수 처리 하는 법

1. 프로젝트의 루트 디렉토리에 .env파일을 생성해준다.
   
2. .env파일을 작성해준다.
   

※이때 무조건 변수명 앞에

을 붙여줘야한다. 그렇지 않으면 리액트 앱에서는 변수를 불러오지 않는다고 한다.
3. 등록한 변수 사용하기
리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만, .env에 등록된 변수는 별도의 import가 필요하지 않아, 전역 어디서든 process.env.으로 가져와서 사용하면 된다.
4. 이제 이 .env파일이 깃허브에 올라가지 않도록 루트 디렉토리에 .gitignore파일을 생성해주고, .env를 추가해준다.

나는 원래 작성해놓았던 .gitignore파일에서 env부분만 끌어왔다.

이렇게까지하면 파이어베이스와 리액트 연결이 끝나는데, (아직 구현이 다 안되서 제대로 된 건지 테스트는 못해봤다...)

추후 후기로 돌아오겠습니다