[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 30일차 - firebase, 인증 서비스 구현

Firebase란

Firebase는 개발자들이 애플리케이션을 빠르게 개발하고 성공적으로 운영할 수 있도록 구축한 Google의 포괄적인 앱 개발 플랫폼이다. 또한 Firebase는 BaaS(Backend-as-a-Service) 플랫폼으로 프론트엔드에서 백엔드 서버를 구축하지 않고 편리하게 앱 및 웹 애플리케이션을 쉽게 생성하고 실행할 수 있도록 한다.

 

파이어베이스의 핵심적인 기능은 파이어베이스에 연결된 모든 기기가 실시간으로 데이터를 동기화하는 데이터베이스를 제공하는 것이다. 또한 강력한 인증 서비스를 제공하기 때문에 따로 인증 서버를 개발하지 않고 보안성을 갖춘 사용자 인증 서비스를 구현할 수 있다.

 

firebase의 장점

• 실시간 데이터베이스: 실시간 데이터 동기화를 지원하여 실시간 애플리케이션을 구축
• 호스팅 및 배포: 애플리케이션의 웹 콘텐츠를 호스팅하고 쉽게 배포가 가능
• 사용자 인증: 사용자 인증 기능을 간편하게 구현
• 클라우드 기능(Cloud Firestore): 클라우드 환경에서 확장 가능하고 안정적인 애플리케이션을 개발, 클라우드 파이어스토어는 오프라인 상태에서도 데이터를 쓰고 읽고 수신 대기하고 쿼리할 수 있음.

---

Firebase: build 

https://firebase.google.com/products-build?hl=ko

Firebase Products

firebase 사용하기

1. 파이어베이스 공식 홈페이지에 들어간 후 문서 메뉴에서 '기초' 카테고리로 들어간다.

2. 기초 카테고리에서 '웹에 firebase 추가'로 들어가서 '웹'을 클릭. (웹 사이트를 배포할 것이므로)

3. 원하는 프로젝트의 이름을 지정한다.

4. 구글에서 권장하는 설정이므로 동의를 누르고 계속한다.

5. 프로젝트를 모두 만들었으면, 콘솔로 이동하여 내가 만든 프로젝트로 들어간다.

6. 로컬폴더로 저장한 프로젝트를 firebase에 등록하기 위하여 해당 프로젝트에서 앱을 추가한다. (웹 사이트를 빌드하는 것이므로 마찬가지로 '웹' 선택)

7. 웹 앱의 이름을 설정한다. (프로젝트 명과 다르다.), 호스팅 설정은 추후에 다시 가능하므로 일단 해체한 상태로 생성한다.

8. 생성 후에 다음과 같이 apikey와 appId 같은 중요 정보를 준다. (해당 정보를 중요하므로 외부로 노출되지 않도록 조심한다!)

먼저 npm install firebase를 로컬 프로젝트 폴더 터미널에 입력하여 설치한다. 그리고 아래의 중요한 정보를 복사하여 프로젝트 폴더 내에 fConfig.js와 같이 생성하여 붙여넣는다. 

 

9. fConfig.js 파일 안에 필요한 firebase 메소드 export하기

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  ...내가 받은 키 정보
};

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

export default app

---

firebase 인증 기능 사용하기

1. 파이어베이스 공식문서 '빌드'에서 '웹' - '시작하기'로 들어간다.

2. 해당 문서에서 신규 가입자, 기존 가입자 로그인에 필요한 메소드를 찾을 수 있다.

• 신규 가입자 메소드:
• 사용자가 양식을 작성하면 사용자가 입력한 이메일 주소와 비밀번호의 유효성을 검사한 후 createUserWithEmailAndPassword 메서드에 전달한다.

createUserWithEmailAndPassword

• 기존 가입자 메소드:
• 사용자가 양식을 작성하면 signInWithEmailAndPassword 메서드를 호출한다.

signInWithEmailAndPassword

3. fConfig.js 파일에 필요한 메소드들을 import하고 export 한다.

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

...

const auth = getAuth(app);
export {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
};
export default auth;

 

4. 로그인, 회원가입 창에 해당 메소드들을 이용하여 auth data를 들어온다.

const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      let data;
      if (newAccount) {
        data = await createUserWithEmailAndPassword(auth, email, password);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      setIsLogin(true);
    } catch (error) {
      alert("회원가입이 되지 않은 계정입니다.");
      console.log(error);
    }
  };

---

firebase 로그인 유무 확인하기

1. 파이어베이스 공식 홈페이지 '빌드' - '인증' - '웹' - '사용자 관리'로 들어가면 현재 로그인한 사용자를 읽어오는 메소드가 있다.

onAuthStateChanged

2. 해당 데이터도 로그인/회원가입 창에서 데이터를 불러옴으로써 로그인 유무에 따라 브라우저의 내용을 변경한다.

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

 

결과

파이어베이스 로그인 실패

• 회원가입이 되어있지 않은 경우에는 회원가입이 되지 않은 계정이라고 경고문을 띄워주며, 회원가입된 계정은 성공적으로 로그인된 화면으로 변경된다.

파이어베이스 로그인 성공

 

 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

출처 및 참고자료

1. [유데미X스나이퍼팩토리] 10주 완성 리액트 프로젝트 캠프 강의

2. Firebase 문서, https://firebase.google.com/docs/guides?hl=ko 

기초  |  Firebase 문서

3. Cloud Firestore, https://firebase.google.com/docs/firestore?hl=ko