프론트엔드 노트

React와 Firebase를 활용한 실시간 채팅 앱 만들기 =========

프론트엔드 개발자라면 다양한 웹 애플리케이션을 만들어보고 싶으실 겁니다. 그중 실시간으로 소통할 수 있는 채팅 앱은 매우 흥미로운 프로젝트입니다. 이번 글에서는 React와 Firebase를 활용하여 간단한 실시간 채팅 앱을 만드는 방법을 소개하겠습니다.

프로젝트 세팅

먼저 React 애플리케이션을 생성해야 합니다. 다음 명령어를 통해 Create React App을 사용하여 새로운 프로젝트를 시작합니다.

npx create-react-app chat-app
cd chat-app

이제 Firebase를 프로젝트에 추가해야 합니다. Firebase에 가입하고 새로운 프로젝트를 생성한 후, Firebase Console에서 실시간 데이터베이스를 활성화합니다.

Firebase SDK를 설치합니다:

npm install firebase

Firebase 설정

Firebase 프로젝트의 설정을 src/firebase.js 파일에 추가합니다. 이 파일에서 Firebase의 설정값과 초기화를 진행합니다.

// src/firebase.js
import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);

export const database = firebase.database();

위 설정에서 YOUR_API_KEY 등은 Firebase Console에서 확인할 수 있습니다. 해당 정보를 입력한 후 Firebase와의 연결이 완료됩니다.

채팅 컴포넌트 구현

이제 실제 채팅 기능을 구현할 컴포넌트를 만들어보겠습니다. src/Chat.js 파일을 생성하고 아래의 코드를 추가합니다.

// src/Chat.js
import React, { useEffect, useState } from 'react';
import { database } from './firebase';

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    const messagesRef = database.ref('messages');
    messagesRef.on('value', (snapshot) => {
      const messageData = snapshot.val();
      const messageList = messageData ? Object.values(messageData) : [];
      setMessages(messageList);
    });

    return () => messagesRef.off();
  }, []);

  const sendMessage = (e) => {
    e.preventDefault();
    if (input.trim()) {
      database.ref('messages').push({ text: input });
      setInput('');
    }
  };

  return (
    <div>
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index}>{msg.text}</div>
        ))}
      </div>
      <form onSubmit={sendMessage}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="메시지를 입력하세요"
        />
        <button type="submit">전송</button>
      </form>
    </div>
  );
};

export default Chat;

위 코드에서는 Firebase의 실시간 데이터베이스에서 메시지를 구독하고 업데이트가 있을 때마다 메시지를 화면에 보여주도록 구현하였습니다. 메시지를 입력하고 전송 버튼을 클릭하면 Firebase에 메시지가 저장됩니다.

메인 컴포넌트 설정

이제 src/App.js 파일에서 채팅 컴포넌트를 불러와서 화면에 표시해보겠습니다.

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

const App = () => {
  return (
    <div className="App">
      <h1>실시간 채팅 앱</h1>
      <Chat />
    </div>
  );
};

export default App;

스타일 추가

좀 더 보기 좋은 UI를 위해 CSS를 추가해보겠습니다. src/App.css 파일에 스타일을 추가합니다.

/ src/App.css /
.App {
  text-align: center;
}

.messages {
  border: 1px solid #ccc;
  height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

form {
  display: flex;
  justify-content: center;
}

input {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px;
}

애플리케이션 실행

이제 모든 설정이 완료되었습니다. 아래 명령어로 애플리케이션을 실행해보세요.

npm start

실시간으로 메시지를 보내고 받을 수 있는 간단한 채팅 애플리케이션이 완성되었습니다.

마무리

이번 포스트에서는 React와 Firebase를 활용하여 실시간 채팅 앱을 만드는 방법에 대해 알아보았습니다. 채팅 앱은 기본적인 소통 기능을 제공하는 동시에 실시간 데이터베이스와의 연동을 통해 비동기 프로그래밍을 이해하는 데 큰 도움이 됩니다. 완성된 프로젝트를 바탕으로 추가 기능을 구현해보며 더 나아가 보세요. 예를 들어, 사용자 인증, 메시지에 타임스탬프 추가, 특정 사용자에게만 메시지 전송하는 기능 등을 추가해 볼 수 있습니다. Happy Coding!

실시간 채팅 앱을 React와 Firebase로 간단히 만들어보자