1. Vue3와 Firebase 프로젝트 - 실시간 채팅앱 VSignal 개발

VSignal - Vue로 개발하는 실시간 채팅앱

새로운 나홀로 프로젝트를 시작합니다.
Vue와 Firebase로 실시간 채팅 앱을 만들어 보려고 합니다.
ChatGPT에게 물어보면서 프로젝트를 진행합니다.

나의 말:

vue3와 vuetify 그리고 firebase로 실시간 채팅앱을 만들고 싶어.

ChatGPT의 말:

좋아! Vue 3 + Vuetify + Firebase 조합이면 UI도 깔끔하고 기능도 강력한 실시간 채팅앱을 만들 수 있어.

프로젝트 기본 설정

1. Vue 3 + Vite 프로젝트 생성
2. Vuetify 설치 및 설정
3. Firebase SDK 설정 (Auth + Firestore + Storage)
4. 라우터 및 상태 관리 설정 (Pinia 또는 Vuex)

우선 프로젝트 세팅부터 도와줄까, 아니면 특정 기능부터 구현하고 싶어? 😊

나의 말:

프로젝트 셋팅 해보자.

ChatGPT의 말:

좋아! Vue 3 + Vite + Vuetify + Firebase 기반으로 프로젝트를 세팅해보자.

1. Vue 3 + Vite 프로젝트 생성

터미널에서 아래 명령어를 실행해:

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

 

🚀 chat-app은 프로젝트 이름이야. 원하는 이름으로 바꿔도 돼.
설치가 끝나면 프로젝트 폴더로 이동:

cd chat-app

2. Vuetify 설치

Vuetify를 추가하려면 아래 명령어 실행:

npm install vuetify

 

그리고 main.js(또는 main.ts)에서 Vuetify를 설정해:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify()

createApp(App).use(vuetify).mount('#app')

3. Firebase 설정

Firebase SDK 설치:

npm install firebase

 

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

env

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

 

Firebase 설정을 적용하려면 firebase.js 파일을 만들어줘.

// 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. 라우터 및 상태 관리 추가 (선택 사항)

Vue Router & Pinia 설치:

npm install vue-router pinia

 

이제 router.js와 store.js를 설정하면 돼.

5. 실행하기

설치가 완료되면 앱을 실행해보자.

npm run dev

 

브라우저에서 http://localhost:5173로 접속하면 기본 Vue 화면이 나올 거야.

 

이제 로그인 기능부터 만들면 될 것 같은데, Firebase Authentication부터 진행할까? 😃

나의 말:

좋아, Firebase Authentication부터 진행해보자.

ChatGPT의 말:

좋아! Firebase Authentication을 설정하고 로그인 기능을 만들어보자.

1. Firebase에서 Authentication 설정

1. Firebase Console로 이동
2.  프로젝트 선택 후 Authentication > 시작하기 클릭
3. "이메일/비밀번호" 로그인 방법 활성화

2. Firebase Auth 기능 구현

Firebase Auth 모듈 설정

firebase.js에서 Firebase Authentication을 추가해줘.

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } 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);

// 회원가입 함수
const register = (email, password) => {
  return createUserWithEmailAndPassword(auth, email, password);
};

// 로그인 함수
const login = (email, password) => {
  return signInWithEmailAndPassword(auth, email, password);
};

// 로그아웃 함수
const logout = () => {
  return signOut(auth);
};

export { auth, db, register, login, logout };

3. 로그인 & 회원가입 UI 만들기

Vuetify를 사용해서 로그인/회원가입 폼을 만들어보자.

<!-- src/views/AuthView.vue -->
<template>
  <v-container class="fill-height d-flex justify-center align-center">
    <v-card class="pa-5" width="400">
      <v-card-title class="text-center text-h5 mb-4">
        {{ isLogin ? "로그인" : "회원가입" }}
      </v-card-title>
      <v-form @submit.prevent="handleSubmit">
        <v-text-field v-model="email" label="이메일" type="email" required />
        <v-text-field v-model="password" label="비밀번호" type="password" required />
        <v-btn type="submit" color="primary" block class="mt-3">
          {{ isLogin ? "로그인" : "회원가입" }}
        </v-btn>
      </v-form>
      <v-btn variant="text" block class="mt-2" @click="isLogin = !isLogin">
        {{ isLogin ? "회원가입 하러가기" : "로그인 하러가기" }}
      </v-btn>
    </v-card>
  </v-container>
</template>

<script>
import { ref } from "vue";
import { register, login } from "@/firebase";

export default {
  setup() {
    const email = ref("");
    const password = ref("");
    const isLogin = ref(true);

    const handleSubmit = async () => {
      try {
        if (isLogin.value) {
          await login(email.value, password.value);
          alert("로그인 성공!");
        } else {
          await register(email.value, password.value);
          alert("회원가입 성공!");
        }
      } catch (error) {
        alert(error.message);
      }
    };

    return { email, password, isLogin, handleSubmit };
  },
};
</script>

4. 라우터 설정 추가

로그인 페이지를 보기 위해 router.js에 추가하자.

// src/router.js
import { createRouter, createWebHistory } from "vue-router";
import AuthView from "@/views/AuthView.vue";

const routes = [
  { path: "/", component: AuthView },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 

그리고 main.js에서 라우터를 추가해야 해.

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import { createVuetify } from "vuetify";
import "vuetify/styles";
import router from "./router";

const vuetify = createVuetify();
createApp(App).use(vuetify).use(router).mount("#app");

5. 실행 및 테스트

터미널에서 프로젝트 실행:

npm run dev

 

이제 브라우저에서 http://localhost:5173로 이동하면 로그인/회원가입 폼이 보일 거야.

 

✅ 완료된 기능:
✔️ Firebase Auth 설정
✔️ 이메일/비밀번호 로그인 & 회원가입
✔️ Vuetify UI 적용

다음 단계: 로그인 후 채팅방 이동

로그인 성공 후 채팅방 페이지로 이동하는 기능을 추가할까? 🚀