[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 14일차 - Firebase & Authentication

강경서·2023년 7월 6일

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

28/50

🔥 Firebase

Firebase 는 개발자가 모바일 및 웹 애플리케이션을 모두 쉽게 생성, 실행 및 확장할 수 있도록 도와줍니다. 실시간 데이터베이스, 인증, 스토리지, 호스팅 및 기타 기능을 제공합니다. 즉 백엔드 기능을 클라우드 서비스 형태로 제공해줍니다.

Firebase 시작하기

Firebase console에서 프로젝트를 추가함으로서 간단하게 Firebase를 시작할 수 있습니다. 그리고 SDK 설치 및 Firebase 초기화 과정을 거쳐 Firebase의 하위 패기지를 사용할 수 있습니다.

npm install firebase

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

소프트웨어 개발 키트(SDK)는 개발자를 위한 플랫폼별 구축 도구 세트입니다.

Firebase Authentication

Firebase 인증을 사용하면 사용자가 이메일 주소와 비밀번호 로그인 및 제휴 ID 제공업체(예: Google 로그인, Facebook 로그인)를 비롯한 1개 이상의 로그인 방법을 사용해 앱에 로그인할 수 있습니다.

Authentication SDK 추가 및 초기화

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Firebase 인증 JS SDK를 추가하고 Firebase 인증을 초기화합니다.

신규 사용자 가입

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

신규 사용자가 자신의 이메일 주소와 비밀번호를 사용해 앱에 가입할 수 있는 양식을 만듭니다. 사용자가 양식을 작성하면 사용자가 입력한 이메일 주소와 비밀번호의 유효성을 검사한 후 createUserWithEmailAndPassword 메서드에 전달합니다.

기존 사용자 로그인

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

기존 사용자가 자신의 이메일 주소와 비밀번호를 사용해 로그인할 수 있는 양식을 만듭니다. 사용자가 양식을 작성하면 signInWithEmailAndPassword 메서드를 호출합니다.

인증 상태 관찰자 설정 및 사용자 데이터 가져오기

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
    // ...
  }
});

로그인한 사용자에 대한 정보가 필요한 앱 페이지마다 전역 인증 객체에 관찰자를 연결합니다. 사용자의 로그인 상태가 변경될 때마다 이 관찰자가 호출됩니다.

onAuthStateChanged 메서드를 사용해 관찰자를 연결합니다. 사용자가 로그인되면 관찰자에서 사용자에 대한 정보를 가져올 수 있습니다.

📝 후기

백엔드 기능을 클라우드 서비스 형태로 제공해주는 Firebase를 이용하여 프로젝트를 만들고 Authentication 기능까지 사용해 보았습니다. 빠르게 서비스가 필요하거나 테스트가 필요한 작업에 유용하게 사용이 가능할 것 같았습니다. 인증 기능뿐만 아니라 데이터베이스, 스토리지 등 다양한 기능을 손쉽게 사용할 수 있어 혼자 또는 작은 규모의 프로젝트에서 사용하면 빠르게 완성도 높은 서비스도 배포할 수 있어 보였습니다. 물론 몇몇 기업들은 Firebase만으로 서비스를 제공하는 것으로 보아 큰 규모의 서비스도 충분히 가능해 보였습니다.