Firebase 기반 React 애플리케이션 구축: 개발자를 위한 종합 가이드-JS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-11-24 11:58:12

원래의

150명이 탐색했습니다.

Building a Firebase-Powered React Application: A Comprehensive Guide for Developers

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

소개

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

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

전제조건

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

React 및 Firebase에 대한 기본 지식

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

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

환경설정

React 앱 초기화

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

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

로그인 후 복사

프로젝트에 Firebase 추가

Firebase SDK 설치:

npm 설치 Firebase

Firebase 프로젝트 만들기:

Firebase 콘솔로 이동하세요.

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

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

React에 Firebase 통합

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);

로그인 후 복사

건물 특징

인증

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를 사용하세요.

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 호스팅을 사용한 배포