4. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 프로젝트 만들기

실시간 채팅 앱 v-chat 의 프로젝트 만들기

Firebase + Vue 3 기반 1:1 실시간 채팅 앱의 기본 프로젝트를 만들고 다음의 각 라이브러리를 설치합니다.

 

1 Vite + Vue 3 + Vuetify 프로젝트 생성
2 Vuetify 설치
3 Firebase SDK 설치
4 Pinia 설치

 

main.js에 설치된 각 라이브러리 사용 설정을 합니다.

프로젝트 만들기

Firebase + Vue 3 기반 1:1 실시간 채팅 앱의 기본 프로젝트 생성 단계입니다.
먼저 로컬 개발 환경에 필요한 설정부터 시작합니다.

✅ 1단계: 프로젝트 생성 및 기본 설정

1.1 Vite + Vue 3 + Vuetify 프로젝트 생성

npm create vite@latest v-chat --template vue
cd v-chat
npm install

1.2 Vuetify 설치

npm install vuetify@next

Vuetify 설정에서 아이콘 옵션 추가

npm install @mdi/font

1.3 Firebase SDK 설치

npm install firebase

1.4 Pinia 설치

npm install pinia

main.js

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';  // Pinia import
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi' // 추가
import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi', // 기본 아이콘 셋을 mdi로 설정
    aliases,
    sets: {
      mdi,
    },
  },
});

const app = createApp(App);

app.use(createPinia());  // Pinia 플러그인 사용
app.use(vuetify);

app.mount('#app');

Vite에서 @ 경로 별칭이 설정되어 있는지 확인

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

✅ 2단계: Firebase 설정

1. Firebase Console에서 새 프로젝트 생성
2. Authentication, Firestore, Storage 활성화
3. 보안 규칙 설정
4. src/firebase.js 파일 생성

환경 변수 - .env

firebase.js

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

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);
const storage = getStorage(app);

export { auth, db, storage };