23일차

23일차는 Firebase에 대해 배웠다. Firebase는 엄밀히 따지면 백엔드 부분에 해당한다. 그러나 프론트엔드 개발자라 할 지라도 Firebase를 사용하면 아주 쉽게 서버를 다룰 수 있게 해준다.

그래서 이번 시간에 Firebase를 배우고 이를 활용하는 시간을 가졌다.

gitHub : https://github.com/leeyulgok/5-Day2

Firebase

공식 홈페이지 : https://firebase.google.com/docs?authuser=0&hl=ko

Firebase란? Google에서 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼이다. 간단하게 얘기해서 서버(백엔드)의 기능을 제공해주는 곳이다.

핵심기능

1. 실시간 데이터베이스 : 실시간으로 데이터를 동기화할 수 있는 JSON 기반의 클라우드 데이터베이스.
2. 인증 : 사용자 인증을 간편하게 처리.
3. 호스팅 : 정적 웹 페이지를 호스팅하기 위한 간단하고 안정적인 웹 호스팅 서비스를 제공
4. 스토리지 : 사용자가 업로드한 파일(이미지, 동영상 등)을 저장하고 관리.
5. 클라우드 메시징 : 애플리케이션 사용자에게 푸시 알림을 보낼 수 있는 기능을 제공.

로그인 기능 만들어보기

Firebase로 로그인 기능을 만들었다. 임의의 회원가입 폼을 만들고 Firebase에 저장하도록 했다. 순서를 하나하나 밟아보도록 하겠다.

Firebase 부분

1. 프로젝트/웹 앱 만들기

가장 처음에는 회원가입과 로그인을 빼고, 진행하면 Firebase 프로젝트를 만들어야 한다. 우선 기본적인 프로젝트를 만들면, 앱을 만들 수 있는데 웹 프로젝트를 진행할 거기 때문에 웹 앱으로 만들면 기본적인 셋팅은 끝난다.

2. Authentication 로그인 제공 만들기.

다음은 빌드에서 Authentication에 들어가서 로그인 제공 부분을 만들어야 한다.

Firebase를 사용하면 사진처럼 많은 로그인 제공업체를 이용할 수 있다. 여기서는 이메일/비밀번호를 만들어서 만들었다. 여기까지 하면 Firebase 셋팅은 끝이다.

코드 부분

1. Firebase Config

이 부분을 진행하려면 웹 앱을 만들 때, 기본 SDK를 받는다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged
} from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
 	""
};

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

export { createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged};
export default auth;

이런 식으로 받는데, 여기서 추가로 받은 부분이 'firebase/auth' 부분이다. auth 부분을 사용하면 로그인, 회원가입 등의 인증을 쉽게 사용할 수 있다.

https://firebase.google.com/docs/auth/web/start?hl=ko&authuser=0

자세한 건 여기의 공식 문서를 확인하면 된다.

2. Auth.js

import { useEffect, useState } from "react";

import auth, {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
} from "../firebase/firebaseConfig";

import Home from "./Home";

const Auth = ({ isLoggedIn }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setLoginState(true);
      } else {
        setLoginState(false);
      }
      setBtnToggle(true);
    });
  }, []);

  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      let data;
      if (회원가입 || 로그인) {
        data = await createUserWithEmailAndPassword(auth, email, password);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (error) {
      console.log(error);
    }
  };
};

export default Auth;

컴포넌트 부분을 빼고 보면, Auth.js는 위와 같다. 불필요한 부분을 빼고 인증에 관련된 코드만 넣었다. 이 코드를 보면 흐름은, 회원가입과 로그인으로 나뉜다. 생략된 폼은 다음과 같다.

회원가입의 경우는 email과 password를 받아서 onSubmit을 통해 Firebase의 createUser... 함수로 가서 회원가입을 확인한다.

로그인의 경우도 마찬가지로 값을 받고, signIn... 함수로 가서 로그인을 확인한다.

그래서 로그인과 회원가입이 성공하면, 이런 화면이 뜨고 Firebase에서 user부분을 보면,

이렇게 유저가 등록되어 있는 걸 알 수 있다.

정리하기

Firebase로 아주 쉽게 로그인/회원가입을 진행해봤다. 쉽게 백엔드를 진행할 수 있어 매우 좋은 경험이었다. 이 이외에도 더 다양하고 많은 기능을 갖고 있는 플렛폼이 Firebase이기 때문에 다양한 기능을 찾아 활용해보는 시간을 가지면 좋을 거 같다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프