essential
↵ 선택 ↑↓ 탐색 ESC 닫기

검색 결과가 여기에 표시됩니다

essential

PJT_2. Disney Application_3

Firebase는 인증·데이터베이스·호스팅 같은 앱의 필수 백엔드 기능을 서버 없이 바로 쓰게 해주는 Google의 올인원 개발 플랫폼

1. Firebase란 무엇인가?

Firebase는 모바일 및 웹 애플리케이션 개발을 위해 Google이 제공하는 통합 플랫폼이다. 일반적으로 앱을 만들 때 필수로 구현해야 하는 기능들을 이미 완성된 서비스 형태로 제공한다.

대표적인 기능은 다음과 같다.

  • 인증(Authentication)
  • 데이터베이스(Database)
  • 스토리지(Storage)
  • 푸시 알림(Cloud Messaging)
  • 배포 및 호스팅(Hosting)

즉, 👉 “대부분의 앱에서 반복적으로 필요한 기능들을 직접 구현하지 않아도 되게 해주는 플랫폼” 이다.


2. 일반적인 실시간 앱 구조 vs Firebase 사용 구조

2.1 일반적인 Real-Time App 구조

Front-End (React)
        ↓
Back-End (Node.js)
        ↓
Database
        ↓
Socket.IO (실시간 통신)
  • 서버 구축 필수
  • 인증, DB, 실시간 통신 모두 직접 구현
  • 배포 및 운영 비용과 복잡도 ↑


2.2 Firebase를 사용한 Real-Time App 구조

Front-End (React)
        ↓
Firebase (Auth + DB + Hosting)
  • 백엔드 서버 없이도 앱 구성 가능
  • 실시간 데이터 동기화 기본 제공
  • 인증·배포까지 한 플랫폼에서 처리

👉 개인 프로젝트, MVP, 사이드 프로젝트에 특히 강력한 선택지다.


3. Firebase 프로젝트 생성 및 앱 연결

Firebase를 사용하기 위한 기본 절차는 다음과 같다.

  1. Firebase 공식 사이트 접속 👉 https://firebase.google.com/
  2. Google 계정으로 로그인
  3. 새 프로젝트 생성
    • 프로젝트 이름 입력
    • Analytics는 선택 사항
  4. 생성된 프로젝트에 웹 앱 추가

Firebase 콘솔에서 제공하는 SDK 설정 코드를 통해 내 React 앱과 Firebase 프로젝트를 연결한다.

3.1 Firebase 모듈 설치

npm install firebase


3.2 firebase.js 파일 생성

// firebase.js
import { initializeApp } from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/storage";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

const app = initializeApp(firebaseConfig);

export default app;


3.3 앱 엔트리 파일에서 import

import app from "./firebase";

👉 이렇게 하면 앱 전체에서 Firebase를 사용할 준비 완료


4. 로그인 페이지 UI 구성 (React + Styled Components)

Firebase 인증을 붙이기 전에 로그인 화면 UI를 먼저 만든다.

👉 UI와 인증 로직을 분리하는 것이 핵심

Photo of datatype

Separate UI from authentication logic

JayTak

4.1 사용자 경험 (UX) 개선

[분리 안 했을 때]
새로고침 → Firebase 응답 대기 (1-2초) → UI 표시
           └── 이 사이에 빈 화면 😢

[분리 했을 때]
새로고침 → localStorage에서 즉시 UI 표시 (0.01초)
        → Firebase 응답 (백그라운드) → 필요시 업데이트
           └── 바로 프로필 보임 😊


4.2 관심사의 분리 (Separation of Concerns)

// ❌ 분리 안 한 경우 - 모든 게 섞여있음
const Nav = () => {
  // Firebase 인증도 하고
  // UI 상태도 관리하고
  // 스크롤 이벤트도 처리하고...
  // 코드가 복잡해짐!
}

// ✅ 분리한 경우
// 인증 담당
const useAuth = () => { ... }  // 커스텀 훅으로 분리 가능

// UI 담당
const Nav = () => {
  const { user, isLoading } = useAuth();
  // UI만 신경쓰면 됨
}

⬇ 현재코드에서 분리

// 인증 로직 - "진짜" 로그인 상태 확인
useEffect(() => {
  onAuthStateChanged(auth, (user) => {  // Firebase가 판단
    if (user) {
      navigate("/main");
    } else {
      navigate("/");
    }
  })
}, [auth, navigate, pathname])

// UI 로직 - "빠른" 화면 표시
const initialUserData = localStorage.getItem('userData') ?
  JSON.parse(localStorage.getItem('userData')) : {};  // 로컬에서 즉시


[인증 로직]                            [UI 로직]
    │                                    │
    ▼                                    ▼
Firebase 서버에 물어봄              localStorage에서 읽음
    │                                    │
    ▼                                    ▼
"이 사람 진짜 로그인됨?"            "저장된 프로필 사진 있나?"
    │                                    │
    ▼                                    ▼
라우팅 결정 (보안)                   화면 표시 (속도)


5. Firebase를 이용한 Google 로그인 구현

5.1 Firebase 초기화 (firebase.js)

// fiberbase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import "firebase/auth"

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "...",
  authDomain: "react-disney-plus-app.firebaseapp.com",
  projectId: "react-disney-plus-app",
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
Photo of datatype

Firebase App Initialization Overview

JayTak


5.2 Auth 모듈 불러오기 (Nav.js)

import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup, signOut } from 'firebase/auth'
Photo of datatype

Firebase Authentication API Overview

JayTak


5.3 로그인 함수 구현

const auth = getAuth();
const provider = new GoogleAuthProvider();

const handleAuth = () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      setUserData(result.user);
    })
    .catch((error) => {
      alert(error.message);
    });
};

(1) firebase.js – Firebase 초기화

​ initializeApp(firebaseConfig) → Firebase 연결 완료

(2) Nav.js – Authentication 모듈 import

​ import { getAuth, … } from ‘firebase/auth’

(3) 컴포넌트에서 인증 기능 사용

​ const auth = getAuth(); → 인증 기능 사용 준비 완료

Photo of datatype

Firebase Authentication Core APIs Overview

JayTak

👉 결론: Firebase Auth 모듈은 firebase/auth 패키지에서 필요한 함수만 골라서 import하고, getAuth()로 인스턴스를 가져와서 인증 기능을 사용합니다!


5.4 Firebase 콘솔에서 Google 로그인 활성화

Firebase Console → Authentication → Sign-in method 👉 Google Provider 활성화 필수


6. Firebase 인증 상태 체크 (자동 로그인 처리)

Firebase의 강력한 기능 중 하나는 “현재 로그인 상태를 실시간으로 감지할 수 있다”는 점이다.

import { onAuthStateChanged } from "firebase/auth";

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      navigate("/main");
    } else {
      navigate("/");
    }
  });
}, [auth, navigate]);
  • 로그인 상태 → main 페이지
  • 로그아웃 상태 → login 페이지

👉 페이지 새로고침에도 로그인 상태 유지 가능


7. 로그아웃 처리 & 사용자 정보 관리

import { signOut } from "firebase/auth";

const handleLogOut = () => {
  signOut(auth)
    .then(() => {
      setUserData({});
      navigate("/");
    })
    .catch((error) => alert(error.message));
};


8. localStorage로 사용자 상태 유지

페이지 새로고침 시 상태가 초기화되는 문제를 해결하기 위해 localStorage를 사용해 userData를 저장한다.

8.1 저장

localStorage.setItem("userData", JSON.stringify(result.user));


8.2 불러오기

const initialUserData = localStorage.getItem("userData")
  ? JSON.parse(localStorage.getItem("userData"))
  : {};

const [userData, setUserData] = useState(initialUserData);

👉 새로고침해도 로그인 상태 유지 가능



Development
React