React에서 Google Firebase의 Cloud Functions 사용하기

 

Firebase의 Cloud Functions는 서버를 관리하지 않고 백엔드 로직을 실행할 수 있는 강력한 서버리스 서비스입니다. React 애플리케이션과 통합하면 서버 없이도 다양한 기능을 구현할 수 있습니다. 이번 글에서는 React에서 Firebase Cloud Functions를 설정하고 사용하는 방법을 단계별로 설명하겠습니다.

---

1. Cloud Functions란 무엇인가요?

Firebase Cloud Functions는 클라우드 환경에서 실행되는 이벤트 기반의 백엔드 코드입니다.
서버 관리 없이 필요한 로직을 작성하고 Firebase 생태계와 쉽게 통합할 수 있습니다.

주요 특징:

• 서버리스 환경: 별도의 서버 구축 없이 동작.
• Firebase 이벤트 트리거: Firestore, Authentication, Storage 등의 변경 사항에 반응.
• HTTP 요청 처리: API처럼 동작하는 엔드포인트 생성 가능.
• 타사 서비스 통합: 이메일, 결제, 메시징 등 외부 API 호출 지원.

---

2. Firebase Cloud Functions 시작하기

1) Firebase 프로젝트 생성 및 설정

1. Firebase Console에서 새 프로젝트를 생성합니다.
2. Firebase CLI를 설치합니다:

   npm install -g firebase-tools
   

3. Firebase 프로젝트에 로그인하고 초기화합니다:

   firebase login
   firebase init
   

   • Functions 옵션을 선택하세요.
   • JavaScript 또는 TypeScript를 선택할 수 있습니다.

2) React 프로젝트에 Firebase 추가

1. Firebase SDK를 설치합니다:

   npm install firebase
   

2. Firebase 설정 파일을 React 프로젝트에 추가합니다:

   // src/firebaseConfig.js
   import { initializeApp } from "firebase/app";
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID",
   };
   
   const app = initializeApp(firebaseConfig);
   
   export default app;
   

---

3. Cloud Functions 작성 및 배포

1) Cloud Functions 코드 작성

Firebase 초기화 시 생성된 functions/index.js 파일에서 코드를 작성합니다.

HTTP 트리거 함수 예시:

const functions = require("firebase-functions");

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

2) Cloud Functions 배포

작성한 Cloud Functions를 Firebase 서버에 배포합니다:

firebase deploy --only functions

배포가 완료되면 Firebase 콘솔에서 HTTP URL을 확인할 수 있습니다.

---

4. React에서 Cloud Functions 호출하기

React 애플리케이션에서 HTTP 트리거된 Cloud Functions를 호출하려면 fetch 또는 Axios를 사용할 수 있습니다.

React에서 API 호출 예제:

import React, { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    // Cloud Function의 URL
    const fetchMessage = async () => {
      try {
        const response = await fetch(
          "https://us-central1-YOUR_PROJECT_ID.cloudfunctions.net/helloWorld"
        );
        const text = await response.text();
        setMessage(text);
      } catch (error) {
        console.error("Error fetching message:", error);
      }
    };

    fetchMessage();
  }, []);

  return (

Firebase Cloud Functions Demo

{message}

  );
}

export default App;

---

5. Cloud Functions를 활용한 실용적인 예제

1) Firestore 데이터 처리

Firestore에 저장된 데이터를 Cloud Functions로 처리할 수 있습니다.

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.addUserData = functions.https.onRequest(async (req, res) => {
  const userData = req.body;
  try {
    await admin.firestore().collection("users").add(userData);
    res.status(200).send("User data added successfully");
  } catch (error) {
    res.status(500).send("Error adding user data: " + error.message);
  }
});

React에서 이를 호출:

const addUser = async (userData) => {
  try {
    const response = await fetch(
      "https://us-central1-YOUR_PROJECT_ID.cloudfunctions.net/addUserData",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(userData),
      }
    );
    console.log(await response.text());
  } catch (error) {
    console.error("Error:", error);
  }
};

2) 인증 이벤트 처리

Firebase Authentication에서 사용자가 가입할 때 특정 작업을 수행하도록 트리거할 수 있습니다.

exports.sendWelcomeEmail = functions.auth.user().onCreate((user) => {
  console.log(`Welcome email sent to ${user.email}`);
});

3) 스케줄링 작업

정기적으로 실행해야 하는 작업을 스케줄링할 수 있습니다.

exports.scheduledFunction = functions.pubsub
  .schedule("every 24 hours")
  .onRun((context) => {
    console.log("This function runs every day!");
    return null;
  });

---

6. 개발 및 유지보수 팁

1. 테스트 환경 설정
   Firebase Emulator Suite를 활용해 로컬에서 테스트하세요:
2. firebase emulators:start
3. 로그 확인
   Cloud Functions의 실행 로그는 Firebase 콘솔 또는 CLI에서 확인 가능합니다:
4. firebase functions:log
5. 보안 강화
   HTTP 함수 호출 시, 인증 토큰을 활용해 보안을 강화하세요:
6. const decodedToken = await admin.auth().verifyIdToken(req.headers.authorization);
7. 비용 최적화
   Cloud Functions 호출 빈도와 실행 시간을 모니터링해 불필요한 비용이 발생하지 않도록 주의하세요.

---

React와 Firebase Cloud Functions를 활용하면 서버리스 환경에서도 강력한 애플리케이션을 구축할 수 있습니다. 이 가이드를 기반으로 다양한 Cloud Functions를 만들어 React 애플리케이션의 가능성을 확장해보세요!