[Firebase Study] Firebase 란? + 사용법

JooSehyun·2023년 4월 20일
0

[Study]

목록 보기
17/28
post-thumbnail

[Firebase Study]

1. Firebase 란?

2. Firebase 사용법


Firebase 란?

파이어베이스는 구글에서 개발이 됐고, 모바일이나 웹어플리케이션을 만들기 위한 플랫폼이다.

대부분의 앱을 만들 때 필요한 부분은

  • 인증
  • 데이터베이스
  • 스토리지
  • 푸시알림
  • 배포 등..

위와 같이 모든 어플리케이션을 만들 때 필요한 부분들을 자동으로 만들어 주는 플랫폼이다.

Firebase의 특징

  • Firebase에서 사용하는 데이터베이슨느 MySQL이나 오라클 같은 관계형 데이터베이스가 아닌 MongoDB 같은 NoSQL 기반의 Document 형식의 빠르고 간편한 데이터베이스이다.
  • RTSP라는 Real Time Stream Protocol 방식을 지원한다.
    (실시간으로 데이터들을 전송해주는 방식, 이 방식 덕분에 실시간 기능이 요하는 채팅 앱이나, 택시앱같은 걸 쉽게 구현이 가능)

Firebase 사용하기

URL : https://firebase.google.com/?hl=ko![](https://velog.velcdn.com/images/nuyhes/post/27e2ee6b-d7a7-4aad-805a-2bb38014707d/image.png)

  1. firebase 검색 및 url 접속 후 시작하기 클릭

  1. 프로젝트 만들기 클릭

  1. 프로젝트 이름 입력 체크박스 체크

  1. 프로젝트를 위한 애널리틱스 (선택) 체크

  1. 애널리틱스 구성 설정

  1. 프로젝트만들기가 된다. 생성되면 계속버튼을 누른다.

  1. 생성된 firebase와 웹프로젝트를 연결해야하는데 홈 화면에서 웹을 눌러준다.

  1. 웹 앱에 firebase 추가 가 나오는데, 여기서 닉네임 작성 후 앱 등록

  1. firebase SDK 추가가 나오는데, script말고 npm 사용으로 한다.

  1. 최상위 경로에서 인스톨한다.
  1. npm install firebase --save 로 설치
  2. src > firebase.js 생성 후

*코드를 작성해준다.

import { initializeApp } from 'firebase/app';
import "firebase/auth"; //인증
import "firebase/database"; //데이터베이스
import "firebase/storage"; //스토리지

const firebaseConfig = {
  apiKey: "AIzaSyB1fL6awRoAhLW4TTC5_JCdW1XgDrIUXV8",
  authDomain: "project-chat-f7b52.firebaseapp.com",
  projectId: "project-chat-f7b52",
  storageBucket: "project-chat-f7b52.appspot.com",
  messagingSenderId: "118617657626",
  appId: "1:118617657626:web:6b846c4aa85b6e7fcc5ca3",
  measurementId: "G-RF8DY5ZXR6"
};

const app = initializeApp(firebaseConfig);

export default app;

const { register, watch, formState: { errors }, handleSubmit } = useForm();

useFrom을 사용하므로 formonSubmithandleSubmit으로 만들어서 변수에 넣어준다. 그리고 그 안에 함수를 생성해서 만들어준다.
예)
<form onSubmit={handleSubmit(onSubmit)}>

handleSubmit(onSubmit) 함수는 아래와 같다

onSubmit 함수👇

const onSubmit = async (data) => {
        try {
            setLoading(true)

            const auth = getAuth();
            let createdUser = await 👉createUserWithEmailAndPassword(auth, data.email, data.password)👈
            console.log('createdUser',createdUser);
            await updateProfile(auth.currentUser, {
                displayName: data.name,
               	photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon`
            })

            //Firebase 데이터베이스에 저장해주기 
            set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
                name: createdUser.user.displayName,
                image: createdUser.user.photoURL
            })

            setLoading(false)
        } catch (error) {
            setErrorFromSubmit(error.message)
            setLoading(false)
            setTimeout(() => {
                setErrorFromSubmit("")
            }, 5000);
        }
    }

원리는 firebase에서 가져온
import { getAuth, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";createdUser 변수를 담아서 보낸다.

  1. 회원가입 페이지를 만들고 있었다. 여기서 submit을 누르게 되면 아래와 같이 오류가 뜬다.

  1. firebase에서 설정이 필요하다

프로젝트 -> Authentication -> Sign-in-method -> 이메일 / 비밀번호 클릭
(로그인 방법을 추가하는곳)

  1. 이메일 사용설정 체크박스를 활성화 후 저장

  1. 사용설정 확인 후 다시 회원가입 페이지에서 해본다.

  1. 회원가입 페이지에서 firebase로 정보를 보내주는지 확인

console.log('createdUser', createdUser) 로 가입 정보가 나오게 된다.

  1. firebase에서도 유저의 정보가 잘 들어왔는지 확인 Authentication > Users 에서 확인

잘 들어와있다.


firebase에 생성한 유저를 데이터베이스에 저장하기

  1. Reacltime Database 클릭

  1. 시작하기 -> 미국 클릭 후 다음

  1. 테스트 모드에서 시작

  1. 데이터 베이스 생성 완료

  1. 이런식으로 테이블로 정보가 들어오게 된다.


저장하는 방법은?

MYSQL

INSERT INTO users(email, displayName, photoURL) 
VALUES(abc@naver.com, abc, gravatar...)

MongoDB

UserModel.create({email:"abc@naver.com",
		displayName: "abc",
        photoURL: "gravatar"})

Firebase

firebase.database().ref("users").child(userId).set({
		name:displayNme,
        avatar:photoURL})

  1. 데이터베이스 저장 코드
set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
  	name: createdUser.user.displayName,
  	image: createdUser.user.photoURL
})
  1. 전체코드
const onSubmit = async (data) => {
        try {
            setLoading(true)
            const auth = getAuth();
            let createdUser = await createUserWithEmailAndPassword(auth, data.email, data.password)
            console.log('createdUser',createdUser);

            await updateProfile(auth.currentUser, {
                displayName: data.name,
                photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon`
            })

            //Firebase 데이터베이스에 저장해주기 
            set(ref(getDatabase(), `users/${createdUser.user.uid}`), {
                name: createdUser.user.displayName,
                image: createdUser.user.photoURL
            })

            setLoading(false)
        } catch (error) {
            setErrorFromSubmit(error.message)
            setLoading(false)
            setTimeout(() => {
                setErrorFromSubmit("")
            }, 5000);
        }
    }
  1. firebase 실시간 데이터베이스

0개의 댓글