프론트엔드 노트에 오신 것을 환영합니다! 이번 포스트에서는 Vue.js를 활용하여 실시간 채팅 애플리케이션을 만드는 방법을 단계별로 알아보겠습니다. 이 튜토리얼을 통해 Vue.js의 기본적인 개념과 함께 웹 소켓(WebSocket)을 이용한 실시간 데이터 전송에 대해 배워볼 수 있습니다.

1. 프로젝트 설정

먼저 Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다. 터미널을 열고 아래의 명령어를 입력하세요.

npm install -g @vue/cli
vue create vue-chat-app

프로젝트 생성 과정에서 기본 설정을 선택하거나 필요에 따라 옵션을 변경합니다. 생성이 완료되면 프로젝트 폴더로 이동합니다.

cd vue-chat-app

2. 필요한 패키지 설치

실시간 채팅을 구현하기 위해 socket.io-client 패키지를 설치합니다. 이 패키지는 클라이언트와 서버 간의 실시간 통신을 가능하게 해줍니다.

npm install socket.io-client

3. 서버 구축

이제 서버를 구축해보겠습니다. 간단한 Node.js 서버를 설정하여 클라이언트와 소통할 수 있도록 합니다. 프로젝트 루트에 server.js 파일을 생성하고 아래의 코드를 추가합니다.

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('새로운 클라이언트가 연결되었습니다.');

    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('클라이언트가 연결을 끊었습니다.');
    });
});

server.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

서버를 실행하려면 터미널에서 아래 명령어를 입력합니다.

node server.js

4. Vue 컴포넌트 생성

이제 Vue 애플리케이션의 구조를 만들겠습니다. src/components 폴더에 Chat.vue 파일을 생성하고 아래의 코드를 추가합니다.

<template>
  <div>
    <ul id="messages">
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="메시지를 입력하세요" />
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      socket: null,
    };
  },
  created() {
    this.socket = io('http://localhost:3000');
    this.socket.on('chat message', (msg) => {
      this.messages.push({ id: this.messages.length + 1, text: msg });
    });
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.socket.emit('chat message', this.newMessage);
        this.newMessage = '';
      }
    },
  },
};
</script>

<style>
#messages {
  list-style-type: none;
  padding: 0;
}
</style>

이 코드는 기본적인 채팅 인터페이스를 제공합니다. 사용자가 입력한 메시지를 서버로 전송하고, 서버에서 다시 클라이언트로 전송된 메시지를 수신하여 화면에 표시합니다.

5. App.vue 수정

이제 src/App.vue 파일을 수정하여 Chat 컴포넌트를 포함시킵니다.

<template>
  <div id="app">
    <h1>실시간 채팅 애플리케이션</h1>
    <Chat />
  </div>
</template>

<script>
import Chat from './components/Chat.vue';

export default {
  components: {
    Chat,
  },
};
</script>

<style>
#app {
  max-width: 600px;
  margin: auto;
}
</style>

6. 애플리케이션 실행

이제 모든 준비가 끝났습니다. Vue 애플리케이션을 실행하기 위해 터미널에서 다음 명령어를 입력합니다.

npm run serve

브라우저에서 http://localhost:8080에 접속하면 실시간 채팅 애플리케이션을 확인할 수 있습니다.

마무리

이제 Vue.js를 사용하여 간단한 실시간 채팅 애플리케이션을 구축하는 방법을 배웠습니다. 이 튜토리얼을 통해 Vue 컴포넌트, WebSocket 통신 및 기본적인 서버 구축에 대한 이해를 높였기를 바랍니다. 이 기본 구조를 바탕으로 사용자 인증, 메시지 저장, 다양한 UI 개선 등을 추가하여 더 발전된 애플리케이션으로 확장해보세요!