그랜파 개발자의 프론트엔드 공부

store로 상태 관리Store(Pinia/Vuex)로 상태 관리하면 좋은 점은 다음과 같습니다.코드 구조가 정리됩니다. → props 없이 상태 공유 가능여러 컴포넌트에서 같은 데이터 쉽게 사용 가능 합니다.실시간 상태 업데이트가 편리 합니다.API 호출 최소화하여 성능을 최적화할 수 있습니다.디버깅과 유지보수가 용이합니다.나의 말:각종 상태를 store에서 관리하려고 해ChatGPT의 말:좋아! 상태 관리(store) 를 활용하면 사용자 정보, 채팅방 목록, 메시지 상태 등을 더 효율적으로 관리할 수 있어.Vue 3에서는 Vuex 대신 Pinia를 권장하니까 Pinia를 사용해보자.1. Pinia 설치 및 설정📌 1. Pinia 설치터미널에서 다음 명령어 실행npm install pinia📌 2...

VSignal - 1:1 채팅 UI 만들기채팅을 위한 UI를 만들어 봅시다.채팅을 하면 상대가 나의 말을 읽었는지 궁금합니다.상대가 메시지를 읽었는지 표시를 하고내가 메시지를 읽었다면 읽음 표시를 합니다.나의 말:메시지 읽음 표시, 1:1 채팅 UI를 추가하자. 이미지 업로드는 지금 필요없어.ChatGPT의 말:좋아! 이제 메시지 읽음 표시와 1:1 채팅 UI를 추가하자.1. 메시지 읽음 표시 기능채팅방에서 내가 마지막으로 읽은 메시지와 상대방이 읽은 메시지를 표시하도록 구현하자.📌 Firestore 구조 변경메시지 문서에 readBy 필드를 추가하여 읽은 사용자를 저장하자.{ "sender": "user@example.com", "message": "안녕하세요!", "timestamp": "20..

Vuetify를 사용하여 drawer와 app bar, footer가 있는 UI를 만들어 봅시다.Vuetify는 Vue.js를 위한 Material Design 기반 UI 프레임워크입니다.Google의 Material Design 가이드라인을 따르는 고급 UI 컴포넌트를 제공해서,빠르게 반응형(Responsive) & 일관된 디자인을 가진 앱을 만들 수 있습니다.나의 말:UI부터 제대로 만들고 싶어. Vuetify를 사용하여 drawer와 app bar, footer가 있는 ui 만들어 줘ChatGPT의 말:Vuetify를 사용하여 App Bar(헤더), Drawer(사이드 메뉴), Footer(푸터)가 포함된 UI를 만들어보자.이 구조는 채팅 페이지뿐만 아니라 다른 페이지에서도 재사용 가능하도록 설계할..

채팅앱에 접속한 상태라면 메시지가 실시간으로 업데이트 되어야 합니다.Firestore의 onSnapshot()을 이용하여 새로운 메시지가 추가될 때마다 자동으로 화면을 업데이트 할 수 있다고 하네요.나의 말:실시간 메시지 업데이트부터 구현해 보자ChatGPT의 말:좋아! Firestore의 onSnapshot()을 사용해서 실시간 메시지 업데이트를 구현해보자.1. Firestore에서 실시간 메시지 수신Firebase Firestore의 onSnapshot()을 이용하면 새로운 메시지가 추가될 때마다 자동으로 화면을 업데이트할 수 있어.firebase.js에서 실시간 메시지 가져오기 함수 추가// src/firebase.jsimport { getFirestore, collection, addDoc, qu..

VSignal - 1:1 채팅로그인을 하고 채팅을 시작합니다.가장 단순한 1:1 채팅에 대해 생각해 봅니다.채팅이란 것이 상대가 있어야 하는데,상대가 접속하기를 마냥 기다리는 것도 그리 좋아 보이지 않습니다.실시간 채팅이라고는 하지만,SMS 처럼 상대가 접속하지 않았더라도 메시지를 보내는 것도 고려해 봅시다.실시간 채팅앱 - 1:1 채팅나의 말:로그인 성공 후 채팅방 페이지로 이동하는 기능을 추가해줘ChatGPT의 말:좋아! 로그인 성공 후 채팅방 페이지(/chat)로 이동하도록 기능을 추가해볼게.1. 채팅방 페이지(ChatView.vue) 생성먼저, 로그인 후 이동할 채팅방 페이지를 만들어야 해.src/views/ChatView.vue 파일을 생성하고 아래 코드를 추가해줘. 채팅방 ..

프론트엔드 빌드 도구프론트엔드 빌드 도구는 웹 애플리케이션의 코드를 최적화하고 배포할 수 있도록 변환하는 도구입니다.개발자는 코드를 작성하기 편리한 형태로 유지하고, 빌드 도구는 이를 브라우저가 이해할 수 있는 형태로 변환해 줍니다.Vue 3 + Firebase 프로젝트에서는 Vite가 가장 적합하다고 합니다.나의 말:vite가 뭐야?ChatGPT의 말:🚀 Vite란?Vite는 Vue, React 등 최신 프레임워크에서 사용하는 빠른 프론트엔드 빌드 도구야. 기존의 Webpack보다 훨씬 빠르게 개발 서버를 실행하고, 파일 변경 시 즉각적으로 반영하는 기능이 강력하지.🔍 Vite의 특징1. 빠른 개발 서버기존 Webpack은 프로젝트 전체를 번들링하지만, Vite는 필요한 파일만 즉시 변환해서 실행해..

VSignal - Vue로 개발하는 실시간 채팅앱새로운 나홀로 프로젝트를 시작합니다.Vue와 Firebase로 실시간 채팅 앱을 만들어 보려고 합니다.ChatGPT에게 물어보면서 프로젝트를 진행합니다.나의 말:vue3와 vuetify 그리고 firebase로 실시간 채팅앱을 만들고 싶어.ChatGPT의 말:좋아! Vue 3 + Vuetify + Firebase 조합이면 UI도 깔끔하고 기능도 강력한 실시간 채팅앱을 만들 수 있어.프로젝트 기본 설정Vue 3 + Vite 프로젝트 생성Vuetify 설치 및 설정Firebase SDK 설정 (Auth + Firestore + Storage)라우터 및 상태 관리 설정 (Pinia 또는 Vuex)우선 프로젝트 세팅부터 도와줄까, 아니면 특정 기능부터 구현하고 싶..

FCM 보내기와 받기myBlog 개발에 대한 마지막 글입니다. FCM은 서버에서 보냅니다.우리는 서버가 없습니다.그래서 firebase의 functions를 사용하여 FCM 전송 기능을 구현합니다.Firebase Functions란?Firebase Functions는 서버 없이 백엔드 로직을 실행할 수 있는 클라우드 함수 서비스입니다.- 서버 없이 Firebase와 다른 서비스들을 연결- 이벤트 기반 실행 (Firestore, Auth, FCM, HTTP 요청 등)- 자동 확장 (트래픽 증가 시 자동으로 처리)Firebase Functions의 주요 기능1. HTTP 요청을 처리하는 API 만들기REST API를 만들어 Vue, React 같은 프론트엔드에서 호출 가능const functions = re..

myBlog 푸시 알림 서비스푸시 알림(Firebase Cloud Messaging, FCM)은웹 앱 또는 모바일 앱에 실시간 알림을 보내는 기능입니다.Firebase Cloud Messaging(FCM) 은 Firebase에서 제공하는 무료 서비스로,서버 없이도 Firebase를 사용하여 FCM을 보낼 수 있습니다. myBlog의 푸시 알림 서비스를 사용하기 위해Firebase Cloud Messaging JS SDK를 추가하고 Firebase Cloud Messaging을 초기화합니다.서비스 워커가 등록되어 있어야 하고알림 권한을 요청(Notification.requestPermission())하여 허가를 받은 후getToken()으로 클라이언트(브라우저 또는 앱)에서 FCM 토큰을 가져와서이 토큰을..

myBlog 푸시 알림 서비스푸시 알림(Firebase Cloud Messaging, FCM)은웹 앱 또는 모바일 앱에 실시간 알림을 보내는 기능입니다.Vue + Firebase를 사용하여 푸시 알림을 설정하고알림을 보내고 받을 수 있는 기능을 구현해 봅시다. Firebase Functions를 사용하면 서버 없이 Firebase 백엔드에서 직접 FCM(푸시 알림)을 전송할 수 있습니다.우리는 새로운 게시글이 등록되면 구독자에게 알림을 보내는 기능을 구현합니다.FCM 사용 설정Firebase Cloud Messaging(FCM) 은 Firebase에서 제공하는 무료 서비스로,개발자가 클라이언트 애플리케이션(웹, Android, iOS)에 푸시 알림 및 메시지 전송 기능을 구현할 수 있도록 도와줍니다. F..