firebase : 백엔드를 많이 건드릴 필요 없이 환경을 조성해주는 라이브러리? 호스팅이나 여타 백엔드 기능들을 제공해준다.

리액트 프로젝트 & 웹 세팅만 배웠으니 일단 해당 내용을 토대로 기재해둔다.

순서

1. react 프로젝트를 만든다
2. firebase 홈페이지 - 시작하기 - 프로젝트 생성
3. 플랫폼 선택
4. Add firebase SDK 하단에서 npm 사용 체크 후 firebaseConfig의 내용 복사
   • apiKey, authDomain 등이 담겨 있음
5. 리액트 앱으로 가서 npm i firebase 실행
6. src폴더에 firebase.tsx 생성 (혹은 firebase.js)
7. firebase.tsx에 복사한 내용 붙여넣기
8. export default firebase.initializeApp(firebaseConfig); 입력
9. 파이어베이스 모듈 임포트 (9.6.1 기준)
   • import firebase from “firebase/compat/app”;
   • import “firebase/compat/auth”;
   • import “firebase/compat/firestore”;
   • import “firebase/compat/storage”;
10. index에 가서 firebase를 임포트한다.

github에 key값 올리지 않게 방지하기

1. 해당 프로젝트 폴더에 .env파일을 만든다
2. .gitignore에 .env를 기재
3. .env에 입력
   • create-react-app을 사용하는 경우에 환경 변수를 써야 한다면 REACT_APP_으로 시작해야함.
   • .env파일은 프로젝트 최상위에 있어야 한다. package.json파일 옆에 있어야 함!!

     REACT_APP_API_KEY=키값
     REACT_APP_AUTH_DOMAIN=키값
     REACT_APP_DATABASE_URL=키값
     REACT_APP_PROJECT_ID=키값
     REACT_APP_STORAGE_BUCKET=키값
     REACT_APP_MESSAGIN_ID=키값
     REACT_APP_APP_ID=키값
     

4. 원래 해당 키 값이 있는 곳 수정

   apiKey: process.env.변수 이름,
   authDomain: process.env.변수 이름,
   ...
   

상단의 조치만 가지고는 key가 노출되는것을 완전히 막을 수는 없음

• firebase는 클라이언트로부터 요청을 받아야 하기 때문 : 어플리케이션을 내려받아야한다는 의미. 이 키 값들은 어떤 식으로든 코드로 올라가 있을 수 밖에 없다.
• 어플리케이션 빌드 - react app으로부터 빌드 - react코드를 js로 변환 하는 과정에서 react앱은 키값들을 실제 값으로 바꾸게 됨.
• 어플리케이션을 실행한다는 것 = 키 값들이 들어가야하는 것이며, 해당 값들이 없으면 firebase에 접근할 수 없는것