Firebase 기반 React 애플리케이션 구축: 개발자를 위한 종합 가이드

Firebase와 React는 현대 웹 개발 세계에서 역동적인 듀오입니다. Firebase는 백엔드 복잡성을 단순화하는 반면 React는 비교할 수 없는 프런트엔드 효율성을 제공합니다. 이 가이드에서는 Firebase를 React 애플리케이션에 통합하는 방법을 단계별로 살펴보고 개발자에게 자세한 통찰력을 제공합니다.

소개

이 튜토리얼에서는 Firebase와 React를 사용하여 실시간 작업 관리 애플리케이션을 만들어 보겠습니다. 주요 기능은 다음과 같습니다:

인증: 사용자 로그인/가입을 위한 Firebase 인증
데이터베이스: 작업 저장을 위한 Firestore.
호스팅: Firebase 호스팅에 앱 배포

전제조건

따라가려면 다음 사항을 확인하세요.

React 및 Firebase에 대한 기본 지식

Node.js가 설치되었습니다.

Firebase 계정(무료 등급도 괜찮음).

환경설정

1. React 앱 초기화

React 앱 만들기부터 시작하세요.

npx create-react-app task-manager  
cd task-manager  
npm start 

1. 프로젝트에 Firebase 추가

Firebase SDK 설치:

npm 설치 Firebase

Firebase 프로젝트 만들기:

Firebase 콘솔로 이동하세요.

"프로젝트 추가"를 클릭하고 단계를 따르세요.

생성되면 프로젝트 설정 > 일반 > Firebase SDK 스니펫을 클릭하고 구성을 복사하세요.

React에 Firebase 통합

1. Firebase 구성 설정

src/:에 firebase.js 파일을 만듭니다.

import { initializeApp } from "firebase/app";  
import { getAuth } from "firebase/auth";  
import { getFirestore } from "firebase/firestore";  

const firebaseConfig = {  
  apiKey: "YOUR_API_KEY",  
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",  
  projectId: "YOUR_PROJECT_ID",  
  storageBucket: "YOUR_PROJECT_ID.appspot.com",  
  messagingSenderId: "YOUR_SENDER_ID",  
  appId: "YOUR_APP_ID"  
};  

const app = initializeApp(firebaseConfig);  
export const auth = getAuth(app);  
export const db = getFirestore(app); 

건물 특징

1. 인증

Firebase 인증은 사용자 로그인을 단순화합니다. 회원가입 및 로그인 양식을 만들어드리겠습니다.

가입 구성요소

import React, { useState } from "react";  
import { auth } from "../firebase";  
import { createUserWithEmailAndPassword } from "firebase/auth";  

function SignUp() {  
  const [email, setEmail] = useState("");  
  const [password, setPassword] = useState("");  

  const handleSignUp = async () => {  
    try {  
      await createUserWithEmailAndPassword(auth, email, password);  
      alert("User Registered Successfully");  
    } catch (error) {  
      alert(error.message);  
    }  
  };  

  return (  
    <div>  
      <h2>Sign Up</h2>  
      <input  
        type="email"  
        placeholder="Email"  
        value={email}  
        onChange={(e) => setEmail(e.target.value)}  
      />  
      <input  
        type="password"  
        placeholder="Password"  
        value={password}  
        onChange={(e) => setPassword(e.target.value)}  
      />  
      <button onClick={handleSignUp}>Sign Up</button>  
    </div>  
  );  
}  

export default SignUp;  

로그인 구성요소

유사한 접근 방식을 따르되 로그인 기능에는 signInWithEmailAndPassword를 사용하세요.

1. Firestore 데이터베이스 사용자가 작업을 추가, 편집, 삭제할 수 있는 실시간 작업 목록을 만들어 보겠습니다.

작업 추가

import { db } from "../firebase";  
import { collection, addDoc } from "firebase/firestore";  

function AddTask() {  
  const [task, setTask] = useState("");  

  const handleAddTask = async () => {  
    try {  
      await addDoc(collection(db, "tasks"), {  
        name: task,  
        completed: false,  
      });  
      setTask("");  
    } catch (error) {  
      console.error("Error adding document: ", error);  
    }  
  };  

  return (  
    <div>  
      <input  
        type="text"  
        placeholder="Add Task"  
        value={task}  
        onChange={(e) => setTask(e.target.value)}  
      />  
      <button onClick={handleAddTask}>Add Task</button>  
    </div>  
  );  
}  

export default AddTask;

작업 표시

import { useEffect, useState } from "react";  
import { db } from "../firebase";  
import { collection, onSnapshot } from "firebase/firestore";  

function TaskList() {  
  const [tasks, setTasks] = useState([]);  

  useEffect(() => {  
    const unsubscribe = onSnapshot(collection(db, "tasks"), (snapshot) => {  
      setTasks(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));  
    });  
    return () => unsubscribe();  
  }, []);  

  return (  
    <ul>  
      {tasks.map((task) => (  
        <li key={task.id}>{task.name}</li>  
      ))}  
    </ul>  
  );  
}  

export default TaskList;

Firebase 호스팅을 사용한 배포

1. Firebase 도구 설치

npm install -g firebase-tools

1. 호스팅 초기화

다음 명령을 실행하세요:

firebase login  
firebase init hosting 

프로젝트를 선택하세요.

빌드할 빌드 디렉터리를 설정하세요.

1. 구축 및 배포

npm run build
firebase deploy

이제 앱이 Firebase 호스팅에 게시됩니다!

결론

축하합니다! Firebase와 React를 사용하여 인증, 데이터베이스 통합, 호스팅 기능을 갖춘 작업 관리 앱을 구축했습니다. Firebase와 React의 원활한 통합을 통해 강력하고 확장 가능한 애플리케이션이 가능해졌습니다.

인디 혁명에 동참하세요
게임을 선보일 준비가 되셨나요? 시작하는 방법은 다음과 같습니다.

? 인디 게임 쇼케이스를 방문하세요: https://gladiatorsbattle.com/indie-games
? Twitter에서 팔로우하세요: https://x.com/GladiatorsBT

저희와 계속 소통하세요:
? https://discord.gg/YBNF7KjGwx | https://gladiatorsbattle.com/

한 번에 한 게임씩 인디 게임 세계를 더 나은 곳으로 만들어 봅시다. ?✨

위 내용은 Firebase 기반 React 애플리케이션 구축: 개발자를 위한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!