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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 모아보기 개선마이로그 특정 사용자의 마이로그를 모아볼 수 있습니다.홈 페이지의 마이로그 목록에서 마이로그를 선택하면 상세 보기 페이지로 이동하고 상세 페이지 위쪽에 마이로그 사용자의 ‘마이로그 이름’이 보이는데 이것을 누르면 마이로그 사용자의 Id로 goToUserMylogs(author.id) 함수를 호출하고 이것은 Vue Router의 페이지 간 네비게이션 메서드 $router.push()를 호출하여 글쓴이의 마이로그 홈인 userlogs 페이지로 이동합니다. 이 페이지에서 카테고리를 선택하여 카테고리 별로 마이로그 목록을 볼 수 있습니다...

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 내것 개선카테고리가 생겼으니 내 마이로그를 볼 때에도 카테고리별로 볼 수 있습니다.‘내것’ 페이지에서 카테고리를 선택하면 선택한 카테고리의 마이로그만 볼 수 있도록 수정합니다.1. 카테고리 보이기 . . . 0"> . . . {{ mylog.category }} 카테고리 없음 . . . . . . 2. 카테고리 로..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 쓰기 개선카테고리가 생겼으니 마이로그 쓰기를 수정해야 합니다.마이로그를 쓸 때 카테고리를 선택하고, 저장할 때 카테고리를 포함하여 저장하도록 수정하겠습니다.카테고리 보이기, 저장 . . . . . . . . . 카테고리 로드// src/store/modules/mylogs.jsasync fetchCategories({ commit }, userId) { if (!userId) return; try { // 사용자 ID로 필터링된 카테고리 가져오기 const q = q..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 카테고리마이로그가 늘어나면 스크롤하면서 읽는 것만으로는 불편합니다. 마이로그의 개수가 많아지면 한없이 스크롤해야 하기 때문입니다. 그래서 마이로그 카테고리를 등록하여 카테고리 별로 분류할 수 있게 하고자 합니다. 마이로그를 볼 때 카메고리별로 볼 수 있으면 같이 주제에 대한 글들이 묶여 있으니 보는 것이 편리하겠지요.카테고리는 각 사용별로 등록할 수 있습니다. 각 사용자는 자신의 마이로그를 쓸 때 자신이 등록한 카테고리로 마이로그의 카테고리를 정할 수 있습니다. 사용자가 등록한 카테고리는 DB에 저장되어 앱이 종료 후 새로 실행되어도 카테고리는..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM 받기FCM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.1. 포그라운드에서 메시지 수신사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다. 이것은 main.js에서 설정합니다.src/main.js// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import r..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM 보내기Firebase용 Cloud Functions라고도 알려진 Firebase Functions는 개발자가 서버를 관리하지 않고도 백엔드 코드를 작성하고 배포할 수 있도록 해주는 Firebase에서 제공하는 서버리스 백엔드 서비스입니다.사용자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 사용자가 PC와 모바일 등을 사용할 수 있으므로 각 사용자는 여러 토큰이 있습니다. 이 사용자가 마이로그 저자에 대해 구독을 요청하였다면 마이로그 저자가 새 마이로그를 저장하면 푸시 알림이 전송됩니다.Firebase Cl..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 알림 요청마이로그는 사용자가 마이로그를 저장하면 구독자에게 알림을 보내려고 합니다.알림을 받이 위해서 사용자는 알림을 받는 것을 허용해야 합니다. 알림을 허용한 후 어떤 글쓴이에 대해 구독을 요청하면 마이로그는 구독 요청한 글쓴이가 마이로그를 새로 저장하면 알림을 보냅니다.알림을 차단하면 알림을 받지 않겠다는 것으로 글쓴이에 대한 구독과 관계없이 알림을 보내지 않습니다.글쓴이에 대해서는 사용자가 구독 요청을 하면 알림을 보내고, 구독 취소를 하면 알림을 보내지 않습니다.알림 요청을 하면 마이로그는 사용자에게 알림 허용을 요청하고, 사용자가 알림..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 서비스 워커Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클라이언트로 푸시 알림을 전송하는 서비스이고, 서비스 워커는 브라우저가 이 알림을 백그라운드에서 처리할 수 있도록 돕습니다. 그러므로 앱이 알림 권한을 받거나 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다서비스 워커는 브라우저에서 백그라운드 스크립트로 실행되며, FCM으로부터 받은 푸시 메시지를 처리하여 사용자에게 알림을 표시하는 역할을 합니다..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.Firebase Cloud Functions우리는 서버가 없습니다. FCM은 백엔드 서비스가 필요합니다.그래서 ChatGPT에게 물었습니다..Firebase Cloud Functions는 서버리스(Serverless) 환경에서 코드를 실행할 수 있는 백엔드 서비스로, 개발자가 별도의 서버를 관리하지 않고도 Firebase 애플리케이션의 백엔드를 확장할 수 있게 해줍니다. 클라우드 함수는 특정 이벤트 발생 시 자동으로 실행되며, Firebase나 기타 Google Cloud 서비스와 쉽게 통합할 수 있습니다.1. Firebase Cloud Functions..

마이로그 카테고리 관리 추가 전체 카테고리 {{ category.name }} mdi-delete