넷플릭스 클론코딩 8 firebase 설정

src/lib/firebase.prod.js

import Firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

// 1) when seeding the database you'll have to uncomment this!
// import { seedDatabase } from '../seed';

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

const firebase = Firebase.initializeApp(config);
// 2) when seeding the database you'll have to uncomment this!
// seedDatabase(firebase);
// 3) once you have populated the database (only run once!), re-comment this so you don't get duplicate data

export { firebase };

파이어베이스를 사용하기 위한 베이스 코드를 작성

firebase 웹 설정

google firebase에 접속한다.

https://firebase.google.com/

적절히 설정하고 프로젝트를 생성한다.

Firestore Database에 들어간후 데이터베이스 생성버튼을 누른다.

상황에 맞게 일반 혹은 테스트를 선택 후 Cloud Firestore 위치는 서울로 지정하였다.

seed.js 설정

다시 소스 디렉토리로 돌아와서
기본 데이터들을 입력하는 js 파일을 만든다.

/src/seed.js

## 아래 소스링크 참고

파이어베이스 연동 앱 생성

메인 웹페이지 - 내 프로젝트 - 프로젝트 개요 들어간후
</> 버튼을 눌러 앱을 추가한다.

나오는 sdk추가 코드의 const firebaseConfig 함수를 복사한 후 firebase.prod.js 코드의 config 함수에 붙여넣는다

 

다시 웹으로 돌아와서 다음다음다음으로 넘기고 앱 생성을 완료한다.

연동 테스트 및 자료 입력

firebase.prod.js 코드로 돌아와서

'''
## import 부분
import { seedDatabase } from '../seed';

## const firebase = initializeApp(config); 아래
seedDatabase(firebase);
## 추가

를 추가

/src/index.js 코드상단 import 부분에 다음처럼 해서 firebase 사용을 잠깐 실행한다.

// eslint-disable-next-line
import { firebase } from './lib/firebase.prod';

그 후 서버를 실행해 보면 전에 만들어둔 seed.js 가 firebase.prod.js 의 seedDatabase(firebase); 코드로 인해서 데이터베이스에 입력이 된다.

test는 실험해본 것이고 위 코드를 넣고 yarn start를 하면 films 와 series 가 생성이 될 것이다.

*주의 두번 이상 실행이 되면 데이터가 두번 들어갈 수 있으므로 한번 실행 한 후 종료한다.

데이터베이스가 성공적으로 입력이 되었으면
위에서 만든 코드들을 지운다

## import 부분 주석
// import { seedDatabase } from '../seed';

## const firebase = initializeApp(config); 아래 seedDatabase 주석
// seedDatabase(firebase);

연동 마무리 index.js

index.js 를 다음과 같이 수정한다

import React from 'react';
import App from './app';
import 'normalize.css';
import { createRoot } from 'react-dom/client';
import { GlobalStyles } from './global-styles';
import { firebase } from './lib/firebase.prod';
import { FirebaseContext } from './context/firebase';

const rootElement = document.getElementById('root');
createRoot(rootElement).render(
    <>
    <FirebaseContext.Provider value={{ firebase }}>
        <GlobalStyles />
        <App />
    </FirebaseContext.Provider>
    </>
);

그 후 src/context/firebase.js 를 만든다.

import { createContext } from 'react';

export const FirebaseContext = createContext(null);

또한 root .env에 다음과 같이 정리해 두고 환경변수로 받아서 api 키를 숨겨놓았다.

SKIP_PREFLIGHT_CHECK=true
REACT_APP_apiKey=""
REACT_APP_authDomain=""
REACT_APP_projectId=""
REACT_APP_storageBucket=""
REACT_APP_messagingSenderId=""
REACT_APP_appId=""
REACT_APP_measurementId=""

위에서 정한 변수를 src/lib/firebase.prod.js 에 사용

const config = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId ,
  storageBucket: process.env.REACT_APP_storageBucket ,
  messagingSenderId: process.env.REACT_APP_messagingSenderId ,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

영상시간 3:28:00

전체 소스코드
https://github.com/tkfka1/portfolio/tree/08-setting-firebase/netflix