Colin's Blog
React로 개발한 웹 애플리케이션에 Firebase 사용하기

이번 포스트에서는 React로 개발한 웹 애플리케이션에 Firebase를 사용하는 방법에 대해 알아보겠습니다. Firebase는 백엔드 인프라를 제공하는 플랫폼으로, 데이터베이스, 인증, 스토리지, 애널리틱스 등 다양한 서비스를 제공합니다.

Firebase 프로젝트 설정

먼저, Firebase 콘솔에서 새로운 프로젝트를 생성해야 합니다. 이 프로젝트는 Firebase와의 연동에 필요한 설정 값을 제공합니다. Firebase 콘솔에 로그인한 후, “프로젝트 추가” 버튼을 클릭하여 새로운 프로젝트를 생성하세요.

Firebase SDK 설치

React 프로젝트에서 Firebase를 사용하기 위해서는 Firebase의 JavaScript SDK를 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령을 실행하여 Firebase SDK를 설치하세요.

npm install firebase

Firebase 구성

Firebase SDK를 설치한 후, Firebase를 사용하기 위해 구성해야 합니다. Firebase 모듈을 firebase라는 변수로 import한 후, initializeApp 메서드를 사용하여 Firebase 프로젝트의 구성 값을 전달하세요.

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  // Firebase 프로젝트의 구성 값
};

firebase.initializeApp(firebaseConfig);

구성 값은 Firebase 콘솔에서 확인할 수 있습니다. 프로젝트 설정 페이지로 이동한 후, 프로젝트의 등록된 앱 섹션에서 웹 앱 아이콘을 클릭하여 Firebase 구성 값을 얻을 수 있습니다.

인증 기능 구현

Firebase를 사용하면 손쉽게 사용자 인증 기능을 구현할 수 있습니다. 예를 들어, 이메일과 패스워드를 사용한 회원 가입 및 로그인 기능을 구현해보겠습니다.

// 회원 가입
const email = 'user@example.com';
const password = 'password123';

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // 회원 가입 성공
    const user = userCredential.user;
    console.log('Signed up successfully:', user.uid);
  })
  .catch((error) => {
    // 회원 가입 실패
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error('Signup failed:', errorCode, errorMessage);
  });

// 로그인
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // 로그인 성공
    const user = userCredential.user;
    console.log('Logged in successfully:', user.uid);
  })
  .catch((error) => {
    // 로그인 실패
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error('Login failed:', errorCode, errorMessage);
  });

위 코드는 이메일과 패스워드를 사용하여 회원 가입 및 로그인을 처리하는 예시입니다. createUserWithEmailAndPassword 메서드를 사용하여 사용자를 생성하고, signInWithEmailAndPassword 메서드를 사용하여 로그인할 수 있습니다.

데이터베이스 사용

Firebase는 NoSQL 기반의 실시간 데이터베이스인 Firestore를 제공합니다. 이를 사용하여 데이터를 추가, 수정, 삭제할 수 있습니다.

import firebase from 'firebase/app';
import 'firebase/firestore';

// Firestore 인스턴스 가져오기
const db = firebase.firestore();

// 데이터 추가
const dataToAdd = {
  title: 'New post',
  content: 'This is a new post.'
};

db.collection('posts').add(dataToAdd)
  .then((docRef) => {
    console.log('Document written with ID:', docRef.id);
  })
  .catch((error) => {
    console.error('Error adding document:', error);
  });

// 데이터 읽기
db.collection('posts').get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      console.log(doc.id, '=>', doc.data());
    });
  })
  .catch((error) => {
    console.error('Error getting documents:', error);
  });

위 코드는 Firestore 데이터베이스에 데이터를 추가하고 읽어오는 예시입니다. db.collection('posts').add(dataToAdd)를 사용하여 데이터를 추가하고, db.collection('posts').get()을 사용하여 데이터를 읽어올 수 있습니다.

이렇게 Firebase를 React 프로젝트에 사용하는 방법에 대해 알아보았습니다. Firebase의 다른 기능인 스토리지, 애널리틱스 등도 위와 비슷한 방법으로 사용할 수 있으니, 필요에 따라 적절히 활용해 보시기 바랍니다.

참고 자료

© 2018 Colin. All rights reserved.