Symfony와 MongoDB로 만드는 초간단 실시간 채팅앱! 🚀💬
안녕하세요, 개발 덕후 여러분! 오늘은 정말 핫한 주제로 찾아왔어요. 바로 Symfony와 MongoDB를 활용한 실시간 채팅 애플리케이션 만들기! 🎉 이거 완전 꿀잼 아니겠어요? ㅋㅋㅋ
요즘 채팅 앱이 대세잖아요. 카톡, 라인, 슬랙... 어디서든 채팅이 빠질 수 없죠. 그래서 오늘은 우리도 한번 멋진 채팅 앱을 만들어보려고 해요. 그것도 Symfony라는 강력한 PHP 프레임워크와 MongoDB라는 초쿨한 NoSQL 데이터베이스를 사용해서 말이죠! 😎
이 글을 다 읽고 나면, 여러분도 채팅 앱 개발의 고수가 될 거예요. 어쩌면 여러분이 만든 앱으로 재능넷에서 개발 재능을 뽐낼 수 있을지도 모르겠어요! 재능넷은 다양한 재능을 거래하는 플랫폼이니까, 여러분의 개발 실력을 뽐내기에 딱이겠죠?
자, 그럼 이제 본격적으로 시작해볼까요? 준비되셨나요? Let's go! 🏃♂️💨
1. Symfony와 MongoDB: 완벽한 콤비 💑
먼저, 우리가 사용할 두 가지 핵심 기술에 대해 알아볼게요. Symfony와 MongoDB, 이 둘의 조합이 왜 채팅 앱 개발에 그렇게 좋은지 한번 살펴볼까요?
1.1 Symfony: PHP의 슈퍼히어로 🦸♂️
Symfony는 PHP 프레임워크 중에서도 특히 강력하고 유연한 녀석이에요. 마치 아이언맨의 슈트처럼, 개발자들에게 엄청난 파워를 주죠!
- 컴포넌트 기반 구조: 레고 블록처럼 필요한 기능만 쏙쏙 골라 사용할 수 있어요.
- 높은 성능: 빠른 속도로 실행되어 사용자 경험이 훨씬 좋아져요.
- 강력한 보안 기능: 해커들은 울고 갈 거예요. ㅋㅋㅋ
- 풍부한 문서와 커뮤니티: 막히는 부분이 있어도 금방 해결할 수 있어요!
Symfony를 사용하면, 복잡한 웹 애플리케이션도 마치 케이크 자르듯 쉽게 만들 수 있어요. 실시간 채팅 앱? 식은 죽 먹기죠!
1.2 MongoDB: NoSQL의 끝판왕 👑
MongoDB는 NoSQL 데이터베이스 중에서도 특히 인기 있는 녀석이에요. 왜 그런지 한번 볼까요?
- 유연한 스키마: 데이터 구조를 마음대로 바꿀 수 있어요. 진화하는 앱에 딱이죠!
- 뛰어난 확장성: 사용자가 폭증해도 걱정 없어요.
- 빠른 쿼리 속도: 채팅 메시지를 실시간으로 주고받을 수 있어요.
- 풍부한 기능: 실시간 분석, 전문 검색 등 다양한 기능을 제공해요.
MongoDB를 사용하면, 채팅 메시지를 저장하고 불러오는 게 정말 쉬워져요. 마치 마법처럼요! ✨
1.3 Symfony + MongoDB = 완벽한 케미 💖
이 두 기술을 합치면 어떻게 될까요? 바로 채팅 앱 개발의 드림팀이 탄생하는 거죠!
Symfony의 강력한 백엔드 + MongoDB의 유연한 데이터 저장 = 최고의 실시간 채팅 앱
Symfony가 전체적인 앱의 구조와 로직을 담당하고, MongoDB가 채팅 메시지를 빠르고 효율적으로 저장하고 검색해줘요. 이 조합으로 우리는 정말 멋진 채팅 앱을 만들 수 있답니다!
자, 이제 기본적인 이해는 됐죠? 그럼 이제 본격적으로 개발을 시작해볼까요? 다음 섹션에서는 개발 환경 설정부터 차근차근 알아볼 거예요. 기대되지 않나요? 저는 너무 신나요! 🤩
2. 개발 환경 설정: 우리의 작업실을 꾸며볼까요? 🛠️
자, 이제 본격적으로 채팅 앱을 만들어볼 텐데요. 그 전에 먼저 우리의 개발 환경을 세팅해야 해요. 마치 요리를 시작하기 전에 주방을 정리하는 것처럼요! 😉
2.1 PHP 설치하기 🐘
Symfony는 PHP 기반이니까, 당연히 PHP가 필요하겠죠? PHP 7.2.5 이상의 버전을 설치해주세요.
# Ubuntu에서 PHP 설치하기
sudo apt-get update
sudo apt-get install php php-cli php-fpm php-json php-common php-mysql php-zip php-gd php-mbstring php-curl php-xml php-pear php-bcmath
윈도우 사용자라면 PHP를 공식 사이트에서 다운로드받아 설치하면 돼요. 맥 사용자는 Homebrew를 이용해 설치할 수 있어요.
2.2 Composer 설치하기 🎼
Composer는 PHP의 의존성 관리 도구예요. 패키지 설치를 쉽게 해주는 마법사 같은 존재죠!
# Composer 설치하기
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer
이렇게 하면 Composer가 설치돼요. 이제 우리는 필요한 패키지를 쉽게 설치할 수 있어요!
2.3 Symfony CLI 설치하기 🖥️
Symfony CLI는 Symfony 프로젝트를 쉽게 만들고 관리할 수 있게 해주는 도구예요.
# Symfony CLI 설치하기
wget https://get.symfony.com/cli/installer -O - | bash
이 명령어로 Symfony CLI를 설치할 수 있어요. 이제 우리는 Symfony 프로젝트를 쉽게 시작할 수 있답니다!
2.4 MongoDB 설치하기 🍃
이제 우리의 데이터를 저장할 MongoDB를 설치해볼까요?
# Ubuntu에서 MongoDB 설치하기
sudo apt-get install gnupg
wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
sudo apt-get update
sudo apt-get install -y mongodb-org
sudo systemctl start mongod
윈도우나 맥 사용자는 MongoDB 공식 사이트에서 설치 파일을 다운로드받아 설치하면 돼요.
2.5 개발 환경 확인하기 🕵️♀️
모든 설치가 끝났다면, 제대로 설치됐는지 확인해볼까요?
php --version
composer --version
symfony --version
mongo --version
각 명령어를 실행했을 때 버전 정보가 잘 나온다면 성공이에요! 🎉
축하해요! 🎊 이제 우리의 개발 환경이 완벽하게 세팅됐어요. 본격적인 개발을 시작할 준비가 된 거죠!
다음 섹션에서는 드디어 Symfony 프로젝트를 생성하고, MongoDB와 연결하는 방법을 알아볼 거예요. 정말 기대되지 않나요? 저는 벌써 두근두근해요! 💓
그런데 말이에요, 이렇게 개발 환경을 세팅하는 것도 하나의 큰 재능이 될 수 있다는 거 알고 계셨나요? 재능넷 같은 플랫폼에서는 이런 기술 세팅 노하우도 충분히 가치 있는 재능이 될 수 있어요. 혹시 여러분이 환경 설정에 특별한 노하우가 있다면, 재능넷에서 공유해보는 것도 좋을 것 같아요! 😉
3. Symfony 프로젝트 생성 및 MongoDB 연결: 우리의 앱에 생명을 불어넣어요! 🌱
자, 이제 정말 신나는 부분이 왔어요! 우리의 채팅 앱을 만들기 위한 첫 걸음을 내딛을 시간이에요. Symfony 프로젝트를 생성하고 MongoDB와 연결해볼 거예요. 마치 로봇에 인공지능을 심는 것처럼 신나는 일이죠? ㅋㅋㅋ
3.1 Symfony 프로젝트 생성하기 🎭
먼저, Symfony 프로젝트를 생성해볼까요? 터미널을 열고 다음 명령어를 입력해주세요.
symfony new chat-app --full
이 명령어는 'chat-app'이라는 이름의 새로운 Symfony 프로젝트를 생성해요. '--full' 옵션은 모든 기능을 포함한 완전한 Symfony 애플리케이션을 만들겠다는 뜻이에요.
프로젝트 생성이 완료되면, 생성된 디렉토리로 이동해주세요.
cd chat-app
와우! 이제 우리의 채팅 앱을 위한 기본 구조가 만들어졌어요. 🏗️
3.2 MongoDB ODM 설치하기 🔧
이제 Symfony와 MongoDB를 연결해줄 ODM(Object Document Mapper)을 설치할 거예요. 이건 마치 통역사 같은 역할을 해주는 녀석이에요.
composer require doctrine/mongodb-odm-bundle
이 명령어로 MongoDB ODM 번들을 설치할 수 있어요. 이 번들은 Symfony와 MongoDB 사이의 소통을 도와줄 거예요.
3.3 MongoDB 연결 설정하기 🔌
이제 우리의 Symfony 앱과 MongoDB를 연결해줄 차례예요. .env 파일을 열어 다음 줄을 추가해주세요.
MONGODB_URL=mongodb://localhost:27017
MONGODB_DB=chat_app
이 설정은 로컬에서 실행 중인 MongoDB에 연결하고, 'chat_app'이라는 데이터베이스를 사용하겠다는 뜻이에요.
그 다음, config/packages/doctrine_mongodb.yaml 파일을 열어 다음과 같이 수정해주세요.
doctrine_mongodb:
auto_generate_proxy_classes: true
auto_generate_hydrator_classes: true
connections:
default:
server: '%env(resolve:MONGODB_URL)%'
options: {}
default_database: '%env(resolve:MONGODB_DB)%'
document_managers:
default:
auto_mapping: true
mappings:
App:
is_bundle: false
type: annotation
dir: '%kernel.project_dir%/src/Document'
prefix: 'App\Document'
alias: App
</code>
<p>이 설정으로 Symfony는 MongoDB와 어떻게 소통해야 할지 알게 돼요.</p>
<h3>3.4 연결 테스트하기 🧪</h3>
<p>자, 이제 모든 설정이 끝났어요. 연결이 잘 됐는지 테스트해볼까요?</p>
<p>먼저, 간단한 Document 클래스를 만들어볼게요. <code>src/Document/Message.php</code> 파일을 생성하고 다음 코드를 입력해주세요.</p>
<pre><code>
<?php namespace App\Document;
use Doctrine\ODM\MongoDB\Mapping\Annotations as MongoDB;
/**
* @MongoDB\Document
*/
class Message
{
/**
* @MongoDB\Id
*/
protected $id;
/**
* @MongoDB\Field(type="string")
*/
protected $content;
/**
* @MongoDB\Field(type="date")
*/
protected $createdAt;
public function getId()
{
return $this->id;
}
public function setContent($content)
{
$this->content = $content;
}
public function getContent()
{
return $this->content;
}
public function setCreatedAt($createdAt)
{
$this->createdAt = $createdAt;
}
public function getCreatedAt()
{
return $this->createdAt;
}
}
이제 이 Document를 사용해 MongoDB에 데이터를 저장하고 불러오는 테스트를 해볼게요. src/Controller/TestController.php 파일을 만들고 다음 코드를 입력해주세요.
<?php namespace App\Controller;
use App\Document\Message;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Doctrine\ODM\MongoDB\DocumentManager;
class TestController extends AbstractController
{
/**
* @Route("/test", name="test")
*/
public function index(DocumentManager $dm): Response
{
$message = new Message();
$message->setContent('Hello, MongoDB!');
$message->setCreatedAt(new \DateTime());
$dm->persist($message);
$dm->flush();
$messages = $dm->getRepository(Message::class)->findAll();
return $this->json([
'message' => 'Test successful!',
'data' => array_map(function($msg) {
return [
'id' => $msg->getId(),
'content' => $msg->getContent(),
'createdAt' => $msg->getCreatedAt()->format('Y-m-d H:i:s')
];
}, $messages)
]);
}
}
이제 서버를 실행하고 '/test' 경로로 접속해보세요.
symfony server:start
브라우저에서 http://localhost:8000/test로 접속하면, JSON 응답이 보일 거예요. 이 응답에 우리가 저장한 메시지 정보가 포함되어 있다면, MongoDB 연결이 성공적으로 이뤄진 거예요! 🎉
축하해요! 🥳 이제 우리의 Symfony 앱이 MongoDB와 완벽하게 연결됐어요. 이제 진짜 채팅 앱을 만들 준비가 된 거예요!
와, 정말 대단하지 않나요? 우리가 만든 앱이 이제 데이터를 저장하고 불러올 수 있게 됐어요. 이런 기술력이면 재능넷에서도 충분히 인정받을 수 있을 것 같아요. 혹시 여러분이 만든 프로젝트를 재능넷에서 공유해보는 건 어떨까요? 다른 개발자들에게 영감을 줄 수 있을 거예요! 😊
다음 섹션에서는 실제 채팅 기능을 구현해볼 거예요. 실시간으로 메시지를 주고받는 기능을 만들어볼 텐데, 정말 재미있을 거예요! 준비되셨나요? Let's go! 🚀
4. 채팅 기능 구현: 이제 진짜 대화를 나눠볼까요? 💬
드디어 우리 채팅 앱의 핵심인 채팅 기능을 구현할 시간이 왔어요! 😆 실시간으로 메시지를 주고받는 기능을 만들어볼 텐데, 마치 마법사가 된 것 같은 기분이 들 거예요. 자, 시작해볼까요?
4.1 WebSocket 설정하기 🔌
실시간 채팅을 구현하기 위해서는 WebSocket이 필요해요. WebSocket은 서버와 클라이언트 간에 실시간 양방향 통신을 가능하게 해주는 프로토콜이에요. Symfony에서는 Mercure라는 프로토콜을 사용해 WebSocket과 비슷한 기능을 구현할 수 있어요.
먼저, Mercure 번들을 설치해볼게요.
composer require symfony/mercure-bundle
그리고 .env 파일에 다음 줄을 추가해주세요.
MERCURE_PUBLISH_URL=http://localhost:3000/.well-known/mercure
MERCURE_JWT_SECRET=ChangeThisToASecretKey
이제 Mercure 허브를 실행해야 해요. 터미널에서 다음 명령어를 실행해주세요.
docker run -e JWT_KEY='ChangeThisToASecretKey' -e ALLOW_ANONYMOUS=1 -e CORS_ALLOWED_ORIGINS=* -e PUBLISH_ALLOWED_ORIGINS='http://localhost:3000' -p 3000:80 dunglas/mercure
와우! 이제 실시간 통신을 위한 기반이 마련됐어요. 🎉
4.2 채팅 메시지 엔티티 만들기 📝
이전에 만들었던 Message 엔티티를 조금 수정해볼게요. src/Document/Message.php 파일을 다음과 같이 수정해주세요.
<?php namespace App\Document;
use Doctrine\ODM\MongoDB\Mapping\Annotations as MongoDB;
/**
* @MongoDB\Document
*/
class Message
{
/**
* @MongoDB\Id
*/
protected $id;
/**
* @MongoDB\Field(type="string")
*/
protected $content;
/**
* @MongoDB\Field(type="string")
*/
protected $sender;
/**
* @MongoDB\Field(type="date")
*/
protected $createdAt;
public function getId()
{
return $this->id;
}
public function setContent($content)
{
$this->content = $content;
}
public function getContent()
{
return $this->content;
}
public function setSender($sender)
{
$this->sender = $sender;
}
public function getSender()
{
return $this->sender;
}
public function setCreatedAt($createdAt)
{
$this->createdAt = $createdAt;
}
public function getCreatedAt()
{
return $this->createdAt;
}
}
이제 메시지에 발신자 정보도 포함할 수 있게 됐어요!
4.3 채팅 컨트롤러 만들기 🎮
이제 채팅 기능을 제어할 컨트롤러를 만들어볼게요. src/Controller/ChatController.php 파일을 만들고 다음 코드를 입력해주세요.
<?php namespace App\Controller;
use App\Document\Message;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Doctrine\ODM\MongoDB\DocumentManager;
use Symfony\Component\Mercure\PublisherInterface;
use Symfony\Component\Mercure\Update;
class ChatController extends AbstractController
{
/**
* @Route("/chat", name="chat")
*/
public function index(DocumentManager $dm): Response
{
$messages = $dm->getRepository(Message::class)->findBy([], ['createdAt' => 'DESC'], 20);
return $this->render('chat/index.html.twig', [
'messages' => array_reverse($messages),
]);
}
/**
* @Route("/send", name="send_message", methods={"POST"})
*/
public function sendMessage(Request $request, DocumentManager $dm, PublisherInterface $publisher): Response
{
$content = $request->request->get('content');
$sender = $request->request->get('sender');
$message = new Message();
$message->setContent($content);
$message->setSender($sender);
$message->setCreatedAt(new \DateTime());
$dm->persist($message);
$dm->flush();
$update = new Update(
'http://example.com/chat',
json_encode([
'id' => $message->getId(),
'content' => $message->getContent(),
'sender' => $message->getSender(),
'createdAt' => $message->getCreatedAt()->format('Y-m-d H:i:s'),
])
);
$publisher($update);
return $this->json([
'status' => 'Message sent!',
'id' => $message->getId(),
]);
}
}
이 컨트롤러는 채팅 페이지를 보여주고, 새 메 시지를 보내는 기능을 담당해요. Mercure를 통해 실시간으로 메시지를 전파하는 것도 볼 수 있죠!
4.4 채팅 뷰 만들기 👀
이제 사용자가 실제로 볼 채팅 화면을 만들어볼게요. templates/chat/index.html.twig 파일을 만들고 다음 코드를 입력해주세요.
{% extends 'base.html.twig' %}
{% block title %}Chat Room{% endblock %}
{% block body %}
<div id="chat-container">
<div id="message-container">
{% for message in messages %}
<div class="message">
<strong>{{ message.sender }}:</strong> {{ message.content }}
<small>({{ message.createdAt|date('Y-m-d H:i:s') }})</small>
</div>
{% endfor %}
</div>
<form id="message-form">
<input type="text" id="sender" placeholder="Your name" required>
<input type="text" id="content" placeholder="Type a message" required>
<button type="submit">Send</button>
</form>
</div>
<script>
const url = new URL('http://localhost:3000/.well-known/mercure');
url.searchParams.append('topic', 'http://example.com/chat');
const eventSource = new EventSource(url);
eventSource.onmessage = e => {
const data = JSON.parse(e.data);
const messageContainer = document.getElementById('message-container');
const messageElement = document.createElement('div');
messageElement.className = 'message';
messageElement.innerHTML = `<strong>${data.sender}: ${data.content} <small>(${data.createdAt})`;
messageContainer.appendChild(messageElement);
}
const form = document.getElementById('message-form');
form.addEventListener('submit', e => {
e.preventDefault();
const sender = document.getElementById('sender').value;
const content = document.getElementById('content').value;
fetch('/send', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `sender=${encodeURIComponent(sender)}&content=${encodeURIComponent(content)}`
}).then(() => {
document.getElementById('content').value = '';
});
});
</script>
{% endblock %}
이 뷰는 채팅 메시지를 표시하고, 새 메시지를 입력할 수 있는 폼을 제공해요. 또한 JavaScript를 사용해 실시간으로 새 메시지를 받아 화면에 표시하죠.
4.5 스타일 추가하기 💅
우리의 채팅앱을 조금 더 예쁘게 만들어볼까요? public/css/chat.css 파일을 만들고 다음 CSS를 추가해주세요.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#chat-container {
max-width: 800px;
margin: 20px auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
#message-container {
height: 400px;
overflow-y: auto;
padding: 20px;
}
.message {
margin-bottom: 10px;
line-height: 1.5;
}
#message-form {
display: flex;
padding: 20px;
border-top: 1px solid #eee;
}
#message-form input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
#message-form button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
#message-form button:hover {
background-color: #0056b3;
}
그리고 templates/base.html.twig 파일의 <head> 태그 안에 다음 줄을 추가해주세요.
<link rel="stylesheet" href="%7B%7B%20asset('css/chat.css')%20%7D%7D">
축하합니다! 🎉 이제 우리의 실시간 채팅 앱이 완성됐어요!
서버를 실행하고 http://localhost:8000/chat에 접속해보세요. 실시간으로 메시지를 주고받을 수 있는 멋진 채팅앱이 완성됐을 거예요!
와, 정말 대단하지 않나요? 우리가 직접 만든 실시간 채팅 앱이에요! 이런 프로젝트는 재능넷에서도 충분히 가치 있는 재능이 될 수 있어요. 여러분의 코딩 실력을 뽐내고 싶다면, 이 프로젝트를 재능넷에 공유해보는 것은 어떨까요? 다른 개발자들에게 영감을 줄 수 있을 거예요! 😊
다음 섹션에서는 우리의 채팅앱에 몇 가지 추가 기능을 더해볼 거예요. 사용자 인증, 개인 메시지 기능, 이모지 지원 등 재미있는 기능들이 기다리고 있어요. 준비되셨나요? Let's keep coding! 💻🚀
