자바스크립트로 만드는 실시간 채팅 앱 (Part 3)

자바스크립트로 만드는 실시간 채팅 앱 (Part 3)

Part 2에서 Socket.IO를 활용하여 실시간 메시지 송수신 기능을 구현하였다면, 이번 Part 3에서는 채팅 UI를 개선하고 배포 방법을 다루려고 한다. 이 과정을 통해 채팅 앱을 제작하고 공유할 수 있다.


UI 개선과 배포는 채팅 앱을 실용적으로 만드는 중요한 단계이다. Part 3에서는 메시지 스타일을 개선하고 사용자 이름을 추가하며, 무료 배포 플랫폼을 활용하여 앱을 온라인에 공개한다. 자


UI를 개선하고 배포를 실습하며, 자바스크립트의 비동기 처리와 이벤트 핸들링이 실무에서 어떻게 활용되는지 알아본다. 차분히 진행하며 실습을 시작한다.

UI Improvement and Deployment Overview

채팅 UI 개선

Part 2의 UI를 개선하려고 한다. 사용자 이름 입력 필드를 추가하고 메시지 스타일을 조정한다. index.html 파일을 다음 코드로 수정한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 채팅 앱</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        #chat-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        #messages {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
        }
        #messages p {
            margin: 5px 0;
            padding: 8px;
            background: #e9ecef;
            border-radius: 3px;
        }
        #message-form {
            display: flex;
            gap: 10px;
        }
        #username-input, #message-input {
            padding: 5px;
        }
        #username-input {
            width: 100px;
        }
        #message-input {
            flex-grow: 1;
        }
        button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="messages"></div>
        <form id="message-form">
            <input type="text" id="username-input" placeholder="이름">
            <input type="text" id="message-input" placeholder="메시지를 입력하세요">
            <button type="submit">보내기</button>
        </form>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        const form = document.getElementById('message-form');
        const usernameInput = document.getElementById('username-input');
        const messageInput = document.getElementById('message-input');
        const messages = document.getElementById('messages');

        socket.on('connect', () => {
            console.log('서버에 연결됐습니다!');
        });

        socket.on('chat message', (data) => {
            const item = document.createElement('p');
            item.textContent = `${data.username}: ${data.message}`;
            messages.appendChild(item);
            messages.scrollTop = messages.scrollHeight;
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (usernameInput.value && messageInput.value) {
                const data = {
                    username: usernameInput.value,
                    message: messageInput.value
                };
                socket.emit('chat message', data);
                messageInput.value = '';
            }
        });
    </script>
</body>
</html>
간단한 채팅 앱

사용자 이름 입력 필드가 추가되었으며, 메시지는 p 태그로 스타일링된다. scrollTop 속성은 새 메시지가 표시될 때 자동으로 스크롤을 조정한다. 이는 사용자 경험을 개선하는 요소이다.

CSS는 메시지에 배경색과 둥근 테두리를 적용하여 채팅 앱의 시각적 요소를 강화한다. 간단한 스타일링을 통해 UI를 향상시킬 수 있다.

Enhanced UI

서버 코드 수정

클라이언트에서 사용자 이름과 메시지를 객체로 전송하므로, 서버에서도 이를 처리할 수 있도록 수정한다. server.js 파일을 다음 코드로 업데이트한다:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('사용자가 연결됐습니다!');
    socket.on('chat message', (data) => {
        io.emit('chat message', data);
    });
    socket.on('disconnect', () => {
        console.log('사용자가 연결을 끊었습니다.');
    });
});

http.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});

data 객체를 수신하여 모든 클라이언트에 브로드캐스트한다. 서버를 재시작(Ctrl+C 후 node server.js)하여 변경 사항을 적용한다.

이 수정은 사용자 이름과 메시지를 함께 표시하며, 실시간 채팅의 기능을 향상시킨다. 객체 데이터 전송 과정을 실습하며 이해할 수 있다.


배포를 위한 준비

로컬 환경에서 완성된 채팅 앱을 온라인에 배포하려고 한다. 무료 플랫폼인 Render를 활용하여 배포한다.

1. GitHub 업로드

프로젝트를 GitHub에 업로드한다. chat-app 폴더에서 터미널을 열고 다음 명령어를 실행한다:

git init
git add .
git commit -m "Initial chat app commit"
git remote add origin [GitHub Repository URL]
git push -u origin main

[GitHub Repository URL]은 GitHub에서 생성한 새 리포지토리의 URL로 대체한다. Git 명령어는 낯설 수 있으나, 단계별로 진행하면 어렵지 않다.


2. Render 배포

Render 사이트에서 GitHub 계정으로 로그인하고, "New" -> "Web Service"를 선택한다. 아래 설정을 적용한다:

- Runtime: Node

- Start Command: node server.js

무료 플랜으로 "Create Web Service"를 클릭하여 배포를 시작한다. 배포 완료 후 제공된 URL을 통해 접속할 수 있다.


배포 결과 확인

Render에서 제공된 URL을 브라우저에서 열어 확인한다. 다른 사용자와 공유하여 실시간으로 메시지를 주고받을 수 있다. 이는 자바스크립트로 제작한 애플리케이션을 배포한 결과이다.

현재 앱은 기본 기능만 포함하며, 사용자 접속 알림이나 메시지 삭제 기능 같은 추가 개선이 가능하다. 이 단계를 통해 배포 경험을 쌓을 수 있다.

Deployed Chat App

주의할 점

무료 배포 플랫폼은 트래픽 제한이 있다. 코드 수정 후에는 GitHub에 푸시하고 Render에서 재배포한다. 보안은 고려되지 않았으므로 실무에서는 추가 조치가 필요하다.

결론

Part 3에서는 채팅 UI를 개선하고 Render를 통해 배포를 완료하였다. 자바스크립트를 활용한 실시간 채팅 앱을 제작하고 온라인에 공개함으로써, 비동기와 이벤트 처리의 실용성을 확인하였다. 이 시리즈는 초보자를 위한 실습 중심 가이드이다.

저작자표시

'코딩 공부 > 자바스크립트 실습' 카테고리의 다른 글

자바스크립트 AI 챗봇 만들기 part3  (1) 2025.02.28
자바스크립트 AI 챗봇 만들기 Part 2  (0) 2025.02.28
자바스크립트 AI 챗봇 만들기 Part 1  (2) 2025.02.28
자바스크립트로 만드는 실시간 채팅 앱 (Part 2)  (0) 2025.02.26
자바스크립트로 만드는 실시간 채팅 앱 (Part 1)  (0) 2025.02.25

+ Recent posts

티스토리툴바