25. [개발] 프로젝트 만들기 - Vue3 프로젝트 실시간 채팅앱 VSignal

실시간 채팅앱 VSignal - 프로젝트 만들기

Vue3와 Firebase를 사용하여 1:1 실시간 채팅앱을 개발합니다.
프로젝트 만들기부터 새로 시작합니다.

 

1. 프로젝트 만들기

npm create vite@latest chat-app --template vue

 

> npx
> create-vite chat-app vue

◇  Select a framework:
   Vue

◇  Select a variant:
    JavaScript

  cd chat-app
  npm install

2. Vuetify 설치

🌟 Vuetify란?

Vuetify는 Vue.js를 위한 Material Design 기반 UI 프레임워크입니다.
Google의 Material Design 가이드라인을 따르는 고급 UI 컴포넌트를 제공해서,
빠르게 반응형(Responsive) & 일관된 디자인을 가진 앱을 만들 수 있습니다.

Vite 6 + Vuetify 3 설정 방법

1. Vuetify 및 Vite 플러그인 설치

아래 명령어를 실행하여 Vuetify와 vite-plugin-vuetify를 설치합니다.

npm install vuetify vite-plugin-vuetify

2. Vite 설정 파일 수정

vite.config.js에서 Vuetify 플러그인을 추가합니다.

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // Vuetify 컴포넌트 자동 임포트 활성화
  ],
});

3. Vuetify 인스턴스 생성 및 적용

Vuetify를 사용하기 위해 Vue 앱에 추가합니다.

(1) Vuetify 설정 파일 생성
src/plugins/vuetify.js 파일을 생성하고 다음 코드를 추가합니다.

// src/plugins/vuetify.js
import 'vuetify/styles';
import { createVuetify } from 'vuetify';

export default createVuetify();

 

(2) Vuetify를 Vue 앱에 등록
src/main.js 파일을 수정하여 Vuetify를 추가합니다.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';

const app = createApp(App);
app.use(vuetify);
app.mount('#app');

4. Material Design Icon

Vuetify를 사용할 때
Material Design Icon을 사용하기 위해서 다음과 같이
Vuetify 아이콘 설정이 필요합니다.

📌 main.js 아래 코드 추가

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import '@mdi/font/css/materialdesignicons.css';

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
});

app.use(vuetify);

main.js

// src/main.js
import { createApp } from 'vue';
import './style.css'
import App from './App.vue';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import '@mdi/font/css/materialdesignicons.css';

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
});

const app = createApp(App);
app.use(vuetify);
app.mount('#app');

Material Design Icons 설치

npm install @mdi/font

3. Firebase 설정

Firebase 콘솔에서 새 프로젝트를 생성한 뒤, Firebase 설정을 .env 파일에 저장합니다.

Firebase 설치

npm install firebase

Firebase 설정

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

4. App.vue

<!-- src/App.vue -->
<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto" max-width="400">
        <v-card-title>Vuetify & Vite</v-card-title>
        <v-card-text>이 프로젝트는 Vite와 Vuetify를 사용하여 만들었습니다.</v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="showAlert">클릭하세요</v-btn>
        </v-card-actions>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup>
const showAlert = () => {
  alert("Vuetify 버튼 클릭!");
};
</script>

🎯 1. Vue Router (페이지 이동 관리)

Vue Router는 싱글 페이지 애플리케이션(SPA) 에서
페이지 간 이동(라우팅) 을 담당하는 라이브러리입니다.

📌 Vue Router의 주요 기능

✅ 페이지 전환(라우팅) 관리
✅ 동적 라우팅 (예: chatroom/:id)
✅ 프로그래매틱 내비게이션 (router.push())
✅ 네비게이션 가드 (페이지 접근 제한 가능)

npm install vue-router

🎯 2. Pinia (상태 관리)

Pinia는 Vue 3 공식 상태 관리 라이브러리로, Vuex보다 더 간결하고 직관적인 API를 제공합니다.

📌 Pinia의 주요 기능

✅ 전역 상태 관리 (Vue 컴포넌트 간 데이터 공유)
✅ 반응형 데이터 (상태 변경 시 자동 업데이트)
✅ 로컬 스토리지 저장 가능
✅ 타입스크립트 지원이 뛰어남

npm install pinia

5. 실행하기

설치가 완료되면 앱을 실행해봅시다.

npm run dev