그랜파 개발자의 풀스택 공부

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..

Firebase Cloud Messaging (FCM)이란?Firebase Cloud Messaging(FCM) 은 Firebase에서 제공하는 무료 서비스로, 개발자가 클라이언트 애플리케이션(웹, Android, iOS)에 푸시 알림 및 메시지 전송 기능을 구현할 수 있도록 도와줍니다.이를 통해 앱 사용자가 실시간 알림을 받거나, 데이터를 업데이트할 수 있습니다.FCM의 주요 기능푸시 알림(Push Notifications):브라우저 또는 모바일 디바이스에 알림 메시지를 표시할 수 있습니다.데이터 메시지(Data Messages):앱에 특정 데이터를 전달하며, 앱이 열려 있는 상태에서 백그라운드 작업을 처리할 수 있습니다.주요 플랫폼 지원:Android, iOS, Web(브라우저), Unity 등 다양..

블로그 독자나를 구독하는 사람들은 누구일까요?나를 구독하는 사람들을 독자라고 합시다.나의 독자들의 목록을 보여주고,목록에서 독자를 선택하면 .그 독자의 블로그를 볼 수 있습니다.  블로그 독자 요구 분석 내가 구독하는 저자는 subscriptions 컬렉션에서 authorId입니다.나를 구독하는 독자는 subscriptions 컬렉션에서 나를 authorId로 저장한 사용자 입니다.독자들의 목록을 구하기 위하여 subscriptions 컬렉션에 나를 authorId로 저장한 userId들을 구해서이들의 이메일과 이름을 목록으로 보여줍니다.목록에서 독자를 선택하면 그 독자의 블로그로 이동할 수 있습니다.ReadersView 컴포넌트의 scriptstore의 post 모듈 - readers// src/sto..

블로그 구독블로그의 구독은 특정 블로그의 새로운 글을 사용자가 지속적으로 받을 수 있도록 설정하는 기능입니다.상세보기에서 구독 신청을 할 수 있습니다.구독신청한 저자의 글들을 구독 페이지에서 모아볼 수 있습니다.  구독 기능 분석 모든 글들은 posts 컬렉션에 저장이 됩니다.posts 컬렉션의 각 문서는 글쓴이의 userId를 가지고 있습니다.구독 정보는 subscriptions 컬렉션에 저장됩니다.subscriptions 컬렉션은 userId, authorId 항목을 가지고 있습니다.구독중인 글들을 가져오기 위하여subscriptions 컬렉션에서 userId를 가진 모든 authorId 들을 가져와posts 컬렉션의 문서들 중 글쓴이의 userId가 authorId들 중에 있는 글들을 가져옵니다.구..

블로그 검색블로그 검색 기능을 구현하고자 합니다.단순한 검색 기능으로 제목 또는 내용에 검색어를 포함하는 모든 글의 목록을 보여 주는 것입니다.  검색 화면에는 검색어를 입력하는 텍스트 입력창만 있습니다.검색어를 입력하면 입력한 검색어가 제목 또는 내용에 포함된 글들을 찾아 보여줍니다.전체 글들을 이미 상태의 posts에 저장하고 있으므로 posts에서 검색어를 포함하는 글들 필터링하여 보여 줍니다.검색 // Firestore에서 게시물 검색 async searchPosts({ commit, state }, searchTerm ) { // 검색어를 소문자로 const searchTermLower = searchTerm.toLowerCase(); let filteredPosts = []..