[React] Firebase를 활용한 간단한 웹 애플리케이션 만들기

목차

React와 Firebase를 활용한 간단한 웹 애플리케이션 만들기

안녕하세요, 현대 웹 애플리케이션을 개발하는 데 관심 있는 개발자 여러분! 오늘은 React와 Firebase를 결합하여 간단하면서도 강력한 웹 애플리케이션을 만드는 방법을 소개하겠습니다. React는 선언적이고 효율적인 UI를 구축할 수 있게 도와주며, Firebase는 백엔드 서비스 없이도 인증, 데이터베이스, 호스팅 등을 쉽게 구현할 수 있는 플랫폼입니다. 이 두 기술의 조합은 개발 시간을 단축시키고, 애플리케이션을 빠르게 출시할 수 있는 강력한 방법을 제공합니다.

---

프로젝트 설정

1. React 애플리케이션 생성

npx create-react-app my-firebase-app
cd my-firebase-app
npm start

이 명령어를 통해 새로운 React 애플리케이션을 생성하고, 개발 서버를 시작할 수 있습니다.

2. Firebase 프로젝트 설정

• Firebase 콘솔 접속: Firebase Console에 로그인합니다.
• 새 프로젝트 생성: 콘솔에서 '프로젝트 추가'를 선택하여 새 프로젝트를 시작합니다.
• 웹 앱 추가: 프로젝트 대시보드에서 '웹 앱 추가'를 선택합니다.

3. Firebase 구성 및 연동

• Firebase 설치: 프로젝트 폴더에서 Firebase SDK를 설치합니다.

npm install firebase

• Firebase 초기화:

// src/firebase-config.js
import firebase from 'firebase/app';
import 'firebase/auth';  // 인증 서비스
import 'firebase/firestore';  // Firestore 데이터베이스

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"
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
export const firestore = firebase.firestore();

 

애플리케이션 예시: 간단한 To-Do List

1. To-Do List 컴포넌트

// src/ToDoList.js
import React, { useState, useEffect } from 'react';
import { firestore } from './firebase-config';

function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  useEffect(() => {
    const unsubscribe = firestore.collection('tasks').onSnapshot(snapshot => {
      const tasksData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setTasks(tasksData);
    });

    return unsubscribe;
  }, []);

  const addTask = () => {
    firestore.collection('tasks').add({
      text: newTask,
      createdAt: new Date()
    });
    setNewTask("");
  };

  return (
    <div>
      <input value={newTask} onChange={(e) => setNewTask(e.target.value)} />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default ToDoList;

2. App 컴포넌트

// src/App.js
import React from 'react';
import ToDoList from './ToDoList';

function App() {
  return (
    <div className="App">
      <h1>My To-Do List</h1>
      <ToDoList />
    </div>
  );
}

export default App;

 

마무리하며...

React와 Firebase를 사용하여 간단한 웹 애플리케이션을 만드는 방법을 소개했습니다. 이 조합은 개발 프로세스를 단순화하고, 실시간 데이터베이스, 인증 등의 백엔드 기능을 쉽게 구현할 수 있게 해줍니다. 이 기술들을 활용하여 여러분의 다음 프로젝트를 더욱 빠르고 효율적으로 개발해 보세요!

---

Reference:

Firebase 문서

 

React