24. [개발] Vue3 Firebase 프로젝트 - 실시간 1:1 채팅 앱 VSignal 개발 계획

--- 주의 요청 ---

지금까지 ChatGPT에게 질문하여 답을 받은 내용으로 코팅을 진행하여 왔습니다.
그러나 종종 불합리하거나 잘못된 정보들이 있었고,
이들에 대해서 별도로 ChatGPT에게 질문을 해서 답을 받아 수정하고 있습니다.
이렇게 실제 코딩하면서 기능을 구현하고 있어서
개발되는 각 코드나 내용은 블로그 게시글의 내용과 차이가 있습니다.
사실 ChatGPT가 제공하는 코드에 대해서는 "충분한 검증" 이 필요합니다.

 

실시간 1:1 채팅앱 VSignal 개발 계획

이제까지 ChatGPT에게 배운 내용으로 코딩을 진행하여 왔고.
이를 통하여 실시간 채팅 기능에 대해서는 이해를 하였으므로
우리의 앱이 전체적으로 어떤 구조를 가질지도 고민해 봐야겠습니다.

우리의 실시간 채팅앱 VSignal은 우선 1:1 채팅만 구현할 계획입니다.
물론 기능 구현이 완료되면 단체 채팅 기능도 구현할 수 있겠지만,
일단은 가장 단순한 구조로 단순하게 코딩함으로써
채팅 기능의 이해와 구현에 집중하려고 합니다.

1. UI 만들기

지금까지 개발한 실시간 1:1 채팅앱 VSignal의 UI가 그리 아름답지 못합니다.
아름답지 못한 UI를 개선하기 위하여
Vuetify를 사용하여 App Bar(헤더), Drawer(사이드 메뉴), Footer(푸터) 가 포함된 UI를 만들어 봅시다.

Vuetify에서 Material Design Icon을 사용

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

기본 레이아웃 만들기

• AppBar(헤더)
  엡이름, 로그인/로그아웃
• Drawer (사이드 메뉴)
  홈
  채팅방 만들기
  계정만들기
  로그인/로그아웃
• Main Content (메인 콘텐츠 영역)
• Footer (푸터)

채팅방 만들기

새로운 채팅방을 만든다.

채팅방(홈)

만들어진 채팅방들의 리스트를 나타내고 선택하면 채팅방으로 들어간다.

2. 사용자 인증

🎯 Firebase Authentication (Firebase Auth)란?

Firebase Authentication은 Google에서 제공하는 인증 서비스로,
로그인 및 회원가입 기능을 쉽게 구현할 수 있도록 도와주는 백엔드 인증 시스템입니다.
우리는 현재 Firebase의 Auth의 다음 기능들을 사용하여 계정을 만들고, 로그인/로그아웃 합니다.

계정 만들기

• Firebase Authentication: createUserWithEmailAndPassword()
  Firebase Authentication의 회원가입 함수입니다.
  이메일과 비밀번호로 Firebase Auth에 회원가입을 시킬 수 있습니다.

로그인

• Firebase Authentication: signInWithEmailAndPassword()
  Firebase Authentication의 로그인 함수입니다.
  이메일과 비밀번호로 Firebase Auth에 로그인할 수 있습니다.

로그아웃

• Firebase Authentication: signOut()
  Firebase Authentication에서 사용자가 현재 로그인된 세션을 종료하고 로그아웃할 때 사용하는 메서드입니다.

사용자 인증 상태 감지

• Firebase Authentication : onAuthStateChanged()
  Firebase Authentication에서 사용자 인증 상태가 변경될 때마다 호출되는 콜백 함수입니다.
  이 메서드는 로그인, 로그아웃, 또는 인증 상태가 변경될 때마다 자동으로 트리거됩니다. 이를 통해 앱 내에서 사용자의 인증 상태에 따라 UI를 동적으로 업데이트하거나 특정 작업을 수행할 수 있습니다.

onAuthStateChanged()는 Firebase Authentication의 auth 객체와 함께 사용됩니다.

3. 채팅방 만들기

채팅은 상대가 있어야 합니다.
여러가지 보안상의 이유로
채팅 상대는 내가 온라인 뿐 아니라 오프라인에서 아는 사람으로 제한합니다.

 

그럼 당장 필요한 기능이 ‘친구 추가’입니다.
일단 채팅 기능 구현에 집중을 할 것이므로 ‘친구 추가’는 뒤로 미루겠습니다.

 

‘친구 추가’ 기능이 없으므로 현재로서는 채팅 상대의 회원가입 메일 주소를 선택하여 채팅방을 만듭시다.
전체 회원의 메일 주소 리스트를 나타내고 선택하는 것은 ‘친구 추가’ 기능 구현 후에 고려합니다.

 

지금은 직접 상태의 메일 주소를 입력하여 채팅방을 만듭니다.
이미 만들어진 채팅방은 리스트로 나타내어 선택할 수 있습니다.

 

정리해 보면, 두가지 기능이 필요합니다.

• 새로운 채팅방 만들기
  새로운 채팅 상대의 메일 주소를 입력하여 만들 수 있습니다.
• 채팅방 리스트에서 선택
  나의 userId가 포함된 채팅방의 리스트를 나타내고 이것에서 선택하여 채팅방으로 들어갈 수 있습니다.

4. 채팅

채팅방으로 들어가면 지금까지 구현한 1:1 채팅 기능으로 채팅이 가능합니다.
채팅방의 전체 메시지 리스트가 나타나고,
메시지 입력창과 전송 버튼이 있습니다.
메시지를 입력하고 전송 버튼을 누르면
실시간으로 메시지가 업데이트 되어야 합니다.

5. Store(Pinia/Vuex)로 상태 관리

Store(Pinia/Vuex)로 상태 관리하면 좋은 점은 다음과 같습니다.

 

코드 구조가 정리됩니다. → props 없이 상태 공유 가능
여러 컴포넌트에서 같은 데이터 쉽게 사용 가능 합니다.
실시간 상태 업데이트가 편리 합니다.
API 호출 최소화하여 성능을 최적화할 수 있습니다.
디버깅과 유지보수가 용이합니다.

 

상태 관리(store) 를 활용하면
사용자 정보, 채팅방 목록, 메시지 상태 등을 더 효율적으로 관리합니다.
Vue 3에서는 Vuex 대신 Pinia를 권장하니까 Pinia를 사용합니다.