리액트 아웃소싱 프로젝트 시작 (파이어베이스 키 유출 방지) 23.12.05

이제 리액트 심화 주차 과정도 마무리되었고 이제는 아웃소싱 프로젝트가 시작되었다

이번 우리 팀의 프로젝트는 네이버 맵 API를 이용한 책방 투어 웹페이지

전국의 책방 구석구석을 찾아주고 해당 책방의 간단한 정보와 후기를 전달해주는 프로젝트다

이번에도 피그마를 이용해 와이어 프레임 작성후 본격적인 코드작업 시작

나는 이번에 firebase firestore 연동 + CRUD (수정, 삭제)를 맡게되었다

저번에는 아예 못알아 봐서 손도 못댄 부분이였는데 그래도 프로젝트 하번해봤다고

팀원들과 이것저것 논의 하는 수준은 올라왔다 (근데 논의는 해도 코드짜는건 또 별개다)

파이어 베이스 api 키값 입력중

 

파이어 베이스 연동을 위한 api key값들 깃 허브나 배포할때 유출 방지를 위해 .env.local 파일 을만들어 키값을 할당

이러면 배포하거나 깃허브 올릴때에는 .env.local 은 올라가지않고도 파이어 베이스 연동을 할수있다

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FB_API_KEY,
  authDomain: process.env.REACT_APP_FB_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
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

 

firebase.js 파일 에서는 따로 .env.local 를 import 할필요없이 process.env. 를 이용해 REACT_APP_FB_API_KEY 등을 불러올수있다