개요

Firebase 는 Google 에서 개발한 클라우드 기반 백엔드 플랫폼으로,
모바일 및 웹 애플리케이션 개발 시 조금 더 쉬운 기능과 서비스를 제공하고 있다.

사용이유 ?

개발자가 어플리케이션을 개발하고 운영하는데 필요한 다양한 서비스를 제공하여
생산성을 높이고 유지보수를 간편하게 해 주는 플랫폼 이다.

  • Fast (쉬운 개발)
    • 제공하는 서비스를 이용하여
  • 안정성
    • serverLess 아키텍쳐를 사용하기 때문에 유지보수 및 확장성에 용이함.
  • 실시간 데이터베이스
    • 데이터의 변경사항을 실시간으로 감지하여 동기화 가능.
  • 호스팅
    • CDN 을 활용하여 보다 빠르게 애플리케이션을 구축하며 정적 파일을 호스팅 할 수 있는 서비스를 제공.
  • 쉬운 배포
    • Firebase CLI(Command Line Interface)를 사용하여 로컬에서 개발한 애플리케이션을 쉽게 배포가능.
  • 확장성
    • 서버리스 아키텍처를 사용하기 때문에 트래픽이 증가하더라도 추가적인 리소스를 필요로하지 않고 확장할 수 있음.

아래는 기초 환경 설정이기 때문에 이미 알고 있다면 다음으로 이동 가능

Firebase 설정

https://firebase.google.com/?hl=ko
이름을 지정하여 프로젝트를 생성한다.

(생성 후)
간단한 회원인증관리를 하기 위해
Authentication - 이메일 / 비밀번호 를 선택한다.

Realtime Database

‘한국’ 지역이 없기 때문에 아시아에 속해있는 ‘싱가포르’ 로 지정한다.

Storage

Realtime Database 와 마찬가지로,
아시아 지역을 설정 해 준다.

코드에 추가하기

‘프로젝트 개요’ 에서
생성한 프로젝트로 접근하여 웹 앱에 추가할 추가 정보를 입력 해 준다.

다음으로,
코드 에디터에 firebase 환경을 추가해 주어야 하기 때문에,

npm i firebase

npm 명령어를 사용하여 설치 해 준다.

아래 있는 제품의 SDK 부분은 firebase 디렉토리를 생성해 하위 파일에 넣어 준다.
/firebase/index.js

SDK 키를 추가 했다면, CLI 를 추가로 설치 해 준다.

npm install -g firebase-tools

배포는 생략.

적용

회원가입 UI 를 구현했다는 가정 하에 진행.
회원가입 로직이 작성되어 있는 상단에 Firebase 와 관련된 정보를 import 해 준다.

postUserData 를 생성해 Firebase 에 생성될 유저정보를 입력 해 준다.
인증 정보를 위해 getAuth(), 입력받는 값으로 email, password

Promise 객체로 값을 입력받기 때문에,
async await 방식을 사용해 비동기 처리로 전환

해당 과정을 거치게 되면,
firebase 에는 새로운 유저가 생성되고,
회원 가입과 동시에 로그인 상태로 변경된다.

가입한 유저의 정보를 Firebase RealTime DB 에 저장하기 위해,
아래 정보를 import 해 준다.

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

유저의 정보가 저장되고자 하는 경로를 입력 해 준다.

await set(ref(getDatabase(), "users/" + user.uid), {
  // 경로 지정
  name: user.displayName,
  avatar: user.photoURL,
});

name 은 회원 가입 시 유저가 설정한 이름이고,
avatar 는 회원 가입 시 생성되는 프로필 이미지이다.

<localhost:3000/join> 으로 접근 했을 때의 보여지는 회원가입 페이지 이다.
test, test@test.com 으로 순차적으로 입력 후 회원가입을 진행하게 되면

설정한 네비게이션 기능으로 인해 /Main 페이지로 이동하게 된다.

그리고, Firebase 를 확인 해 보면
Authentication 내역에 방금 생성한 test 에 대한 정보가 기록되어 있다.

Realtime DB 에도 마찬가지로,
지정해 주었던 /users 경로 아래에 생성한 유저들의 정보가 담기고 있음을 확인할 수 있다.

Avatar

유저 정보에 Avatar 를 넘겨주고 있는데,
이는 간단히 보면 ‘프로필 이미지’ 로,
유저가 생성한 이메일 값을 md5 라는 함수를 사용해 암호화 된 해시 값으로 생성해 준다.

Reference

https://ko.gravatar.com/site/implement/images/