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

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 = []..

블로그저자의 글을 모아볼 수 있는 기능을 ‘블로그’라고 합시다.Drawer 메뉴 항목의 ‘블로그’는 로그인 한 사용자의 글들을 모아 볼 수 있습니다.글 상세보기에서 저자의 ‘블로그’ 이름을 눌러 블로그를 열면 그 글의 저자의 글들을 모아볼 수 있습니다.내 블로그저자 블로그블로그 마이 블로그 요구 사항 로그인 후 메뉴를 통해서 ‘블로그’에 갈 수 있습니다.Drawer 메뉴에서 블로그를 누르면앱은 로그인 한 사용자의 userId로 작성한 글들을 목록을 보여줍니다.상세 보기 페이지에서 저자의 블로그 이름을 눌러 ‘블로그’로 이동할 수도 있습니다.블로그 페이지에는블로그 이름과 블로그 주인이 등록한 카테고리 목록과저자의 글들의 목록이 있습니다.카테고리를 선택하면 선택한 카테고리의 글들을 보여줍니다.최신순, 오래된..

블로그의 조회수글의 목록에서 글을 선택하면상세보기 페이지로 이동해서 글의 전체 내용을 보여줍니다.이렇게 상세보기 페이지가 열릴 때 조회수를 증가시켜 글의 조회수를 집계합니다.   우리의 작은 블로그는 웹툰을 볼 때 화면을 스크롤하면서 보듯우리의 작은 블로그도 마찬가지로 스크롤하면서 글을 볼 수 있도록 하여페이지의 이동 없이도 목록의 글들을 연속해서 볼 수 있습니다.그래서 상세보기가 필요할까 생각할 수도 있지만,상세보기에는 댓글과 답글이 있습니다.또한 구독 요청, 구독 취소를 할 수 있고,글쓴이라면 자신의 글을 수정할 수도 있습니다.이처럼 상세보기에 기능이 많습니다.사실 블로그에 글을 쓰면 조회수가 궁금하기도 합니다.우리의 작은 블로그는 목록에서 이미 글의 내용을 모두 볼 수 있기 때문에상세 보기로 들어오..

블로그 구독블로그의 구독은 특정 블로그의 새로운 글을 사용자가 지속적으로 받을 수 있도록 설정하는 기능을 의미합니다.구독은 블로그를 즐겨 찾는 독자와 블로그글쓴이 간의 연결을 강화하는 주요 도구입니다.구독 요청을 하면 글쓴이가 새로운 글을 등록할 때 푸시 알림을 받을 수 있고,독자는 자신이 구독하는 글쓴이들의 글을 한 곳에 모아볼 수 있습니다. 구독 요구 사항글 상세보기에서 구독을 신청할 수 있습니다.구독을 신청할 수 있으니, 구독 취소도 할 수 있습니다.구독 신청을 하면 내가 구독하는 글들을 구독 페이지에서 모아 볼 수 있고구독 중인 글쓴이가 새로운 글을 저장하면 푸시 알림도 받을 수 있습니다.본인의 글은 구독 요청이 필요하지 않으므로구독 관련 버튼이 보이지 않습니다..구독 기능 정의구독 신청을 할 수..