React 프로젝트에 Firebase를 추가한 경험기

🔥 Firebase를 공부하게 된 계기

많은 프로젝트를 진행해보진 않았지만, 부트캠프를 수강하며 "프로젝트를 한다"라는 것은 프론트엔드 수강생과 백엔드 수강생이 서로 함께 하는 걸로 알고 있었다.

따라서 부트캠프 수료 이후 혼자서 프로젝트를 진행하고 싶었지만 아무래도 한계가 있다는 것을 알고 있었는데,

유튜브 알고리즘에 의해 백엔드 개발자 없이 웹 사이트를 만들 수 있는 "파이어베이스" 에 대해 알게 됐고 파이어베이스가 어떤 것인지에 대해 공부하게 됐다.

 

강의를 찾아보니 노마드코더의 파이어베이스로 트위터 클론코딩 강의가 있었고,

내가 구현해보고 싶었던 회원 가입, 소셜 로그인 기능을 알려주는 강의라 일단 들어보기로 했다.

 

2년 전 강의라 버전 8로 강의가 진행되는데, 나는 현재 버전인 버전 9로 진행하느라 공식문서를 보면서 수정했다.

버전 2개의 차이는 공식문서에도 확인할 수 있다.

 

Firebase에서 사용자 관리

⚙️ 구현한 기능

( 코드 스니펫은 Firebase 공식사이트에서 가지고 왔습니다. 프로젝트에 사용된 전체 코드는 없으며 구현하고자 하는 용도에 맞게 수정해야 합니다. )

 

1. 회원가입

 

회원 가입 기능을 구현하기 위해서는 Firebase의 createUserWithEmailAndPassword 메서드를 활용하여 이메일과 비밀번호를 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;
    // ..
  });

 

Javascript를 사용하여 비밀번호 기반 계정을 사용하여 Firebase에 인증

그리고 회원가입한 계정을 로그인 할 경우에는 signInWithEmailAndPassword 메서드를 활용하여 이메일과, 비밀번호를 넘겨준다.

 

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

 

🖥️ 구현 화면

 

 

2. 소셜 로그인

JavaScript로 Google을 사용하여 인증  |  Firebase

소셜 로그인은  Firebase에서 제공해 주는 다양한 플랫폼이 있는데 나는 구글 계정과 깃허브 계정 로그인을 선택했다.

다른 플랫폼은 공식 사이트 탭에서 확인 가능하며, Firebase 프로젝트 콘솔 인증 탭에서 새 제공업체 추가 버튼 누르고 원하는 플랫폼을 선택하면 된다.

 

 

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });

 

🖥️ 구현 화면

 

 

3. 게시글 CRUD

 

게시글은 CRUD에서 텍스트는 FireStore를 사용하여 구현했고,

Cloud Firestore 시작하기  |  Firebase

이미지는 Storage와 FileReader API를 같이 사용하여 구현했다.

FileReader - Web API | MDN

 

import { getStorage, ref, uploadString } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// Raw string is the default if no format is provided
const message = 'This is my message.';
uploadString(storageRef, message).then((snapshot) => {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
const message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message2, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
const message3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message3, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

// Data URL string
const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});

 

🖥️ 구현 화면

 

 

4. 프로필 수정

 

프로필 수정은 인증의 updateProfile 메서드를 사용하여 구현했다.

간단하게 이름 수정하는 것으로만 구현했지만, 이메일 주소 설정, 사용자에게 확인 이메일 보내기, 비밀번호 설정 등 다양한 기능이 있다는 것에 한번 더 놀랐다.

 

Firebase에서 사용자 관리

 

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});

 

🖥️ 구현 화면

 

👋 마치며

백엔드 없이도 근사한 프로젝트를 만들 수 있다는 파이어베이스의 편리함에 한번 더 놀랐으며 (물론 사용료는 조금 비싸긴 하지만..) 무료 요금제 내에서도 다양한 시도를 해볼 수 있어서 재미있게 작업했다. 강의를 들으면서도 이게 된다고? 이게 돼..??라는 생각이 많이 들었던 기억이 있다. 앞으로 간단한 미니프로젝트를 생각해 본다면 파이어베이스를 또 사용해 볼 듯하다.