#02 React 프로젝트에서 Firebase 환경 설정하기

---

FireBase 주요 서비스 기능 (Authentication , Firestore , Storage )

---

(1) Firebase 프로젝트 추가

1. Firebase console 검색 후 로그인: https://console.firebase.google.com/

 

2. 프로젝트 추가 - 프로젝트 이름 지정 - 애널리틱스 미사용 클릭 - 프로젝트 만들기

 

3. </> : 웹 클릭 - 앱 등록 (호스팅은 미체크 : 다른거 쓸 예정) - npm 사용 클릭 후 콘솔로 이동

 

4. 프로젝트 개요 오른쪽 톱니바퀴 - 프로젝트 설정 클릭- SDK 확인 가능  -끝.

 

 

(2) visual code에서 firebase에서 설치

1. vs코드 터미널 (CRA로 리액트 프로젝트 생성) : yarn create react-app [폴더명] 

2. vs코드 터미널 (npm 또는 yarn으로 추가) : yarn add firebase 

3. [src폴더] 안에 "firebase.js"파일 생성 + SDK내용 붙여넣기 (파이어베이스 홈페이지 - 프로젝트 개요 - 프로젝트 설정) 

[ firebase.js]

// Import the functions you need from the SDKs you need

import { initializeApp } from 'firebase/app';

// 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

const firebaseConfig = {

    apiKey: '~~~~~~',

    authDomain: '~~~~~~',

    projectId: '~~~~~~',

    storageBucket: '~~~~~~',

    messagingSenderId: '~~~~~~',

    appId: '~~~~~~',

};

// Initialize Firebase

export const app = initializeApp(firebaseConfig);

▶export 시켜주기

 

[ App.js]

import { useEffect } from 'react';

import { app } from './firebase';

const App = () => {

    useEffect(() => {

        console.log('app', app);

    }, []);

    return <div>firebase</div>;

};

export default App;

▶ import후 useEffect를 사용해서 콘솔로 찍어보면 값 확인 가능

 

끝.

 

---

▼(회원가입 기능 구현) ▼

#03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현)

---