Firebase 사용 방법

Firebase란?

Firebase는 구글에서 개발된 플랫폼으로, 모바일과 웹 어플리케이션을 만들기 위한 tool이다.
인증, 데이터베이스, 스토리지, 푸시알람, 배포 등의 구현을 굉장히 쉽게 완성할 수 있게 도와준다.
특히 Firebase는 NoSQL을 기반으로 한 Document 형식의 DataBase를 지원하며, RTSP 방식을 지원하기 때문에 실시간 기능을 가진 어플리케이션을 쉽게 구현할 수 있게 도와준다.

Firebase 사용하기

Firebase를 사용하기 위해서는 우선 Firebase 사이트에 접속하여 프로젝트를 생성해야한다.
아래 링크로 이동하여 프로젝트를 생성해준다. 프로젝트 생성 자체는 그냥 간단하게 메뉴를 따라가기만 하면 된다.
Firebase
프로젝트를 생성한 이후에는 개인이 작성한 코드와 연결을 해줘야한다.

앱 추가 버튼을 클릭하면 아래와 같이 어떠한 어플리케이션과 연결할지 선택하는 창이 뜬다.

웹과 연결하기 위해 웹을 선택하면 아래와 같은 화면을 볼 수 있다.

앱 닉네임을 등록하고, 앱 등록을 하면 Firebase SDK추가에 어플리케이션과 firebase를 연결하기 위한 코드를 확인할 수 있다.

npm install firebase를 터미널에 입력하여 필요한 라이브러리를 설치한 후,

Firebase SDK 내부에 있는 코드를 복사한 후, 해당 내용을 firebase.js 안에 넣고 저장하면 firebase의 기능을 활용할 수 있다.

Firebase를 이용한 회원가입 기능 구현하기

Firebase에서 회원가입 기능을 구현하기 위해서는 createUserWithEmailAndPassword 함수를 활용할 수 있다. (2023-08-12 기준)
firebase.js 에서 아래와 같이 import 해준다.

import { createUserWithEmailAndPassword} from "firebase/auth";

이후 다음과 같이 코드를 작성하면, 이메일과 패스워드를 입력받아 회원 정보를 등록하는 기능을 구현할 수 있다. 여기서 email과 password 부분은 필요에 따라, 자신의 코드 논리 흐름에 따라 사용자로부터 데이터를 입력받아 매개변수로 넘겨주면 된다.

const firebase = getAuth();
let createdUser = await createUserWithEmailAndPassword(firebase, email, password);

입력 받은 회원 정보를 데이터베이스에 등록하기

Firebase를 통하여 데이터베이스에 회원 정보를 쉽게 등록할 수 있다. 구현 방법은 아래와 같다.

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

더 자세한 정보는 firebase 공식 홈페이지에서 확인할 수 있다.

https://firebase.google.com/docs/database/web/read-and-write?hl=ko

회원가입 된 회원의 정보를 가져오기

사이트에서 로그인에 성공한 회원에 한하여 특정 페이지에 접속할 수 있게 구현하고 싶을 수 있다. 이 경우 fireabse의 onAuthStateChanged 함수를 활용할 수 있다.

import { getAuth, onAuthStateChanged } from "firebase/auth";
​
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

위와 같은 방식으로, 특정 user의 인증 상태 변화를 추적할 수 있고, if문 안에 페이지 이동을 지정하면 로그인 후 페이지 이동을 구현할 수 있다.