BD 20일차
실시간 채팅 웹사이트 만들기
안녕하세요! 이번 포스팅에서는 실시간 채팅이 가능한 웹사이트를 만드는 방법을 단계별로 알려드리겠습니다. 🛠️
1. 프로젝트 소개
우리가 만들 프로젝트는 간단한 실시간 채팅 웹사이트입니다. 하나의 URL에 여러 사용자가 접속하여 실시간으로 채팅할 수 있는 기능을 구현할 예정입니다. 🚀
2. 개발 도구 준비
코딩을 시작하기 전에 아래 두 가지 프로그램이 필요합니다:
- 아톰(Atom) - 코드 편집기
- 다운로드: https://atom.io
- 설치 방법: 다운로드 후
다음 -> 다음을 클릭하여 설치
- 노드(Node.js) - 서버 실행 도구
- 다운로드: https://nodejs.org
- 안정적이고 신뢰도 높은 LTS 버전 설치 권장
3. HTML 기본 구조 작성
이제 HTML 파일을 생성하고 기본 구조를 작성해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>비밀 채팅</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
<div id="header">비밀 채팅</div>
<div id="chatlist"></div>
<div id="bottom">
<input id="message" placeholder="메시지를 입력해 주세요">
<button id="btn">보내기</button>
</div>
</div>
</body>
</html>4. CSS를 활용한 디자인 적용
#container {
border: 1px solid black;
width: 100%;
}
#header {
text-align: center;
border-bottom: 1px solid black;
font-weight: bold;
}
#chatlist {
height: 500px;
overflow-y: scroll;
}
#bottom {
border-top: 1px solid black;
height: 50px;
}
#message {
width: 80%;
}
#btn {
width: 18%;
float: right;
}5. 자바스크립트를 통한 기능 구현
다음 자바스크립트 코드를 추가하여 채팅 기능을 구현합니다.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', sendMessage);
document.getElementById('message').addEventListener('keydown', function(event) {
if (event.keyCode === 13) sendMessage();
});
});
function sendMessage() {
let message = document.getElementById('message').value;
if (message.trim() !== '') {
let chatList = document.getElementById('chatlist');
let newMessage = document.createElement('div');
newMessage.textContent = message;
chatList.appendChild(newMessage);
document.getElementById('message').value = '';
}
}6. Firebase를 이용한 실시간 데이터 연동
💡 Firebase를 설정하고 데이터를 저장하는 방법을 알아보겠습니다.
- Firebase에 접속하여 새 프로젝트를 생성합니다.
- "실시간 데이터베이스"를 활성화하고, 다음 코드를 추가합니다.
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT.firebaseio.com",
projectId: "YOUR_PROJECT",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
document.getElementById('btn').addEventListener('click', () => {
let message = document.getElementById('message').value;
db.ref('messages').push().set({ text: message });
});
db.ref('messages').on('child_added', (snapshot) => {
let msg = snapshot.val().text;
let chatList = document.getElementById('chatlist');
let newMessage = document.createElement('div');
newMessage.textContent = msg;
chatList.appendChild(newMessage);
});7. Firebase 배포 및 테스트
Firebase CLI로 프로젝트를 배포합니다.
firebase deploy이제 생성된 Firebase URL로 어디서든 접속할 수 있는 실시간 채팅 웹사이트가 완성되었습니다! 🎉
마무리
지금까지 간단한 실시간 채팅 웹사이트를 만들어보았습니다. HTML, CSS, JavaScript, 그리고 Firebase를 활용하여 완성도 높은 실시간 웹 애플리케이션을 구현했습니다.
핵심 요약:
- HTML, CSS로 기본 레이아웃 구성
- 자바스크립트로 기능 추가
- Firebase로 데이터베이스 연동
- Firebase 호스팅을 통해 배포 완료
다음 포스팅에서는 사용자 로그인 기능을 추가해보겠습니다! 👍
