Vue PWA - myLog 개발

1. myLog - 내 일상의 기록 Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될 것입니다. my

2. App layout 앱의 페이지 레이아웃을 만들어 봅시다.To create an App.vue file using Vuetify with a v-navigation-drawer and v-app-bar, follow the example below. This wi

3. myLog 프로젝트 만들기 myLog 프로젝트를 만들고, 레이아웃을 만들어 봅시다. 라우터를 이용하여 앱의 각 기능과 페이지를 연결합니다. 1. Vue 프로젝트 만들기 > vue create myLog > ? Please pick a preset: Manu

4. myLog 계정 만들기 계정 정보를 입력받아 구글에 계정 등록을 하고, 구글 계정의 uid와 함께 mylog 웹앱에도 계정 정보를 저장하게 됩니다. 사용자 인증 관련은 구글 계정을 사용하고, mylog에 저장되는 계정 정보는 각종 앱 운영에 필요할 때 사용하게

5. mylog 계정 만들기 - Firebase Auth.Firebase 인증 서비스 중 이메일/패스워드 방식을 이용하여 구글에 계정을 생성하고, 구글 계정의 uid와 함께 사용자가 입력한 정보를 mylog의 계정 DB에 저장합니다. 즉, 로그인 등 사용자 인증은 구글

Vue로 PWA 개발 - 그랜파 개발자 6. my 계정 만들기 - firestore에 저장 Firebase 인증 서비스 중 이메일/패스워드 방식을 이용하여 구글에 계정을 생성하고, 구글 계정의 uid와 함께 사용자가 입력한 정보를 mylog의 계정 DB에 저장합니다

7. mylog 계정 만들기 - 계정 정보 보기 등록된 계정 정보를 보고 수정도 할 수 있습니다. 구글 계정과 연동할 수도 있고, 로그인 패스워드도 변경할 수 있습니다. ChatGPT에게 물었습니다. Use card view to create a screen wh

8. 계정 만들기 완성 계정 만들기 폼에서 사용자의 정보를 입력 받아 이메일과 패스워드로 Firebase 인증 서비스를 이용하여 구글 계정을 생성하고, 구글 계정의 uid를 받아 mylog의 계정 DB에 계정 정보를 저장합니다. 사용자 인증은 구글 계정을 이용하므로 사

9. mylog 로그인 mylog 로그인은 계정 등록에서 이미 구글에 계정을 등록하였으므로 로그인 폼에 이메일과 패스워드를 입력하고 로그인 버튼을 누르면 mylog는 구글 계정에 로그인 한 다음 구글 계정의 uid를 받아 이것으로 mylog의 계정에서 사용자 정보를

10. 구글 로그인으로 mylog 로그인 사용자가 입력한 이메일과 패스워드로 구글의 uid를 얻어서 mylog 계정 정보를 가져오는 기능을 구현합니다. To implement Google email/password authentication using Firebase

11. google 로그인 구글 로그인 기능을 이용하여 mylog에 로그인 하는 기능과 자동 로그인, 그리고 로그아웃 기능까지 구현합니다.To implement Google Login using Firebase Authentication (Google Auth) in

12. mylog 로그인 완성 이메일 패스워드를 입력하고 로그인 버튼은 누르면 signInWithEmailAndPassword로 구글에 로그인한 후 uid를 받아 이것으로 mylog의 사용자 정보를 가져와 로그인 설정을 합니다.그림 11-1구글 계정 연결은 사용자의

13. mylog 사용자 인증 후 페이지 보기 모든 사용자가 mylog의 모든 페이지를 볼 수 없습니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용하려면 Vue Router Navigation Guards를 사용하여 경로 보호를 설정해야 합니다. 이러한 가드는

14. mylog 로그인 전과 후의 페이지 접근 로그인 전에 접근할 수 있는 페이지와 로그인 후에 접근할수 있는 페이지가 다릅니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용합니다.그림 14-1그림 14-2

15. 홈페이지 - mylog 리스트 firestore DB에 저장된 마이로그들의 리스트를 보여주는 홈 페이지입니다.화면에 마이로그들이 리스트로 나타나고 이들 리스트 중 하나를 선택하면 마이로그 상세 보기 페이지로 이동하게 됩니다. 먼저 마이로그 리스트를 나타내는 홈

16. mylog 쓰기 mylog는 제목과 내용을 씁니다. 작성일은 저장하면서 자동으로 입력이 되고, 마이로그 보기 기능을 구현할 때 조회수나 구독을 위하여 DB가 변경될 것입니다. 우선 간단하게 시작합니다.To create a writing screen with a

17. mylog 보기 mylog 보기를 구현합니다. 보기 화면에 조회수, 구독, 댓글, 답글 등의 기능이 추가될 것입니다.To create a detailed view screen for an article using Vuetify, you can follow the

18. HTML 보기 게시물 세부정보 보기에서 줄 바꿈을 활성화하려면 게시물 콘텐츠를 HTML로 렌더링하는 메서드를 사용해야 합니다. Vue는 v-html 지시문을 사용하여 HTML을 렌더링하는 방법을 제공하지만 XSS(Cross-Site Scripting) 공격을 피

19. 자동 로그인 사용자가 웹앱의 홈페이지에 접속하면 자동으로 로그인을 합니다.onAuthStateChanged는 Firebase Authentication에서 사용자의 로그인 상태 변화를 실시간으로 감지하는 메서드입니다. 이 메서드를 사용하면 사용자가 로그인하거나

20. 마이로그 홈페이지 열기까지 사용자가 웹앱에 접속하면 마이로그는 홈페이지를 보여줍니다. 마이로그가 사용자에게 홈페이지를 보여주기까지 등록된 전체 마이로그를 로드하고, 등록된 전체 회원 정보도 로드하고, 자동 로그인을 통해 로그인 한 사용자의 계정 정보로 로드합니다

21. 마이로그 홈페이지 사용자가 마이로그에 접속을 하면 홈페이지가 열리고 홈페이지는 등록된 마이로그 리스트를 나타냅니다. 홈페이지는 등록된 모든 마이로그를 리스트로 보여주고, 이 리스트 중에서 마이로그를 선택하면 마이로그 보기 화면으로 이동한 후 마이로그의 내용을 보

22. 마이로그 쓰기 마이로그 로그 쓰기로 마이로그를 쓰면, 앱은 마이로그를 forestore에 저장한 후 홈페이지로 이동합니다. 사용자가 입력하는 것은 제목과 내용이지만, 홈페이지 마이로그 리스트에는 글쓴시간, 글쓴이 이름 등의 정보들이 보입니다. 이들 정보는 마이로

23. 마이로그 조회수 마이로그의 조회수는 사용자가 로그인을 하지 않아도 카운트되며, 한 사용자에 대해 하루에 여러번 조회를 해도 하루에 한번만 카운트합니다.Firestore를 사용하여 작성된 글에 대해, 회원이든 비회원이든 하루에 여러 번 방문해도 조회수를 한 번만

24. 마이로그 조회수 컬렉션의 구조 조회수 컬렉션이 ‘/views/{postId}/users/{userId or anonymousId}’와 같은 구조를 가집니다. views 컬렉션은 각 글에 대한 조회 기록을 관리하기 위한 구조입니다. 특히, 회원과 비회원이 하루에

25. 마이로그의 날짜별 조회수 조회수에 대해 ‘/views/{postId}/users/{userId or anonymousId}’ 구조에 lastViewed 항목 즉 마지막 조회날짜 하나만 가진다면, 날짜별 조회수를 구할 수 없습니다. 사용자가 조회한 각 날짜 정

26. 로그인 하지 않은 사용자의 고유 익명 ID 로그인하지 않은 사용자의 조회수 카운트를 위하여 고유의 익명 ID를 생성하여 구분을 합니다. 고유의 익명 ID를 생하기 위하여 uuidv4를 사용합니다. uuidv4는 Universally Unique Identif

27. 완성 마이로그 워크플로우 마이로그를 쓰고(WriteMyLogView.vue), 마이로그들을 목록으로 조회하고(HomeView.vue), 마이로그를 목록에서 선택하여 내용을 확인(MyLogView.vue)하는 기본적인 워크플로우를 완성하였습니다.마이로그 페이지에

28. 마이로그 수정 이미 등록한 마이로그 수정 기능을 구현합니다.게시물(Post) 수정 기능을 구현하려면, 사용자가 게시물을 수정할 수 있는 화면을 제공하고, Firestore에서 기존 게시물 데이터를 업데이트하는 로직이 필요합니다. Vue.js와 Firestore를

29. 마이로그 모아보기 마이로그는 여러 사람이 함께 사용하는 웹앱입니다. 나의 마이로그를 따로 모아 보거나, 특정 회원의 마이로그를 모아보고 싶을 때가 있습니다. 회원별 마이로그를 모아볼 수 있는 페이지를 만들어 봅시다.사용자가 본인이 작성한 글만 모아서 볼 수 있도

30. 마이로그 수정, 내 마이로그 보기 마이로그 상세 보기에서 마이로그를 수정할 수 있습니다. 마이로그의 수정은 쓴 사람만이 수정할 수 있으므로 로그인한 사용자의 id와 마이로그의 usrId가 같은 마이로그는 ‘수정’ 버튼이 나타납니다. 수정 버튼을 누르면 마이로그

31. 마이로그 댓글 쓰기 로그인 후에는 마이로그에 댓글을 쓸 수 있습니다. 게시물(Post)에 댓글 기능을 구현하려면, 댓글을 Firestore에 저장하고, 이를 화면에 실시간으로 표시하는 구조로 설계할 수 있습니다. 댓글 기능은 기본적으로 입력 폼을 통해 댓글을 작

32. 마이로그 댓글 쓰기 구현 마이로그 상세 보기 하단에 댓글들의 리스트를 볼 수 있고, 로그인 후에는 누구나 마이로그에 대한 댓글을 쓸 수 있습니다. 댓글 리스트를 나타내기 위해서는 마이로그의 댓글들 전체 리스트를 로드하여야 합니다. 댓글을 쓰거나 삭제를 하면 댓글

33. 마이로그 댓글에 대한 답글 쓰기 로그인 후에는 마이로그의 댓글에 대해 답글을 쓸 수 있습니다. 댓글의 답글에 대한 댓글을 쓰는 것은 지원하지 않습니다. 마이로그는 마이로그, 댓글, 답글의 구조를 가지고 있습니다. 물론 하나의 마이로그에 대해 여러 댓글이 가능하고

34. 댓글에 대한 답글 쓰기 구현 각 댓글에 대해 답글이 있습니다. 마이로그 상세 보기에는 마이로그, 마이로그에 대한 댓글, 댓글에 대한 답글을 모두 나타냅니다. 마이로그에 대한 댓글을 쓸 수 있고, 댓글에 대한 답글을 쓸 수 있습니다. 답글은 바로 삭제가 가능합니다

35. 마이로그 찾기 글들이 많아지면 찾기 기능이 필요합니다. 마이로그 찾기는 간단하게 검색어를 포함하고 있는 마이로그들을 찾아 보여줍니다. ChatGPT에게 물었습니다. post 찾기 기능을 만들어줘 ChatGPT 게시물 검색 기능을 구현하기 위해, Vue.

36. 마이로그 찾기 구현 검색어를 입력하면 제목 또는 내용에 검색어를 포함하는 마이로그 전체를 찾아서 카드뷰로 보여줍니다. 마이로그 보기 버튼을 클릭하면 마이로그 상세보기 페이지로 이동합니다.그림 36-1

37. 마이로그 구독 다른 사람의 마이로그를 구독할 수 있습니다. 마이로그 상세 보기 창에 구독 버튼이 있고, 구독 중일 경우 ‘구독중’으로 표시되고 구독 중이 아닐 때 ‘구독’으로 나타납니다. ‘구독’을 누르면 구독 신청이 됩니다. 구독을 하면 ‘구독’ 메뉴 항목에

38. 마이로그 구독 해지 구독 기능은 다른 회원의 마이로그를 구독하고자 하는 것이고, 언제든 구독과 해지를 자유롭게 하고 싶습니다.ChatGPT가 제시한 구독 코드를 봤을 때 구독 컬렉션에 userId, postId, authorId, 생성시간을 저장함으로써 구독 여

39. 마이로그 구독 구현 마이로그 상세 보기 페이지에 구독 버튼이 있습니다. 마이로그의 저자에 대해 현재 구독 중이면 ‘구독 취소’가 현재 구독중이 아니면 ‘구독’ 버튼이 됩니다. 마이로그의 구독 버튼을 눌러 구독을 하게 되면 현재 보고 있는 마이로그 뿐 아니라 마

40. 구독 마이로그 보기 마이로그 상세 보기에서 구독 버튼을 눌러 구독 요청을 하면 보고 있는 마이로그의 저자에 대한 구독으로 설정이 됩니다. 또, 여러 저자를 구독할 수 있습니다. 구독 메뉴로 구독 페이지를 열면 내가 구독하는 모든 저자의 마이로그 목록을 볼 수 있

41. 회원 마이로그 보기 마이로그 상세 보기 페이지 상단에 마이로그 저자의 마이로그 이름이 있습니다.이것을 누르면 회원의 마이로그 로 이동합니다. 이 페이지는 선택한 회원의 마이로그만 보여주는 페이지로 그 회원의 마이로그 홈이라 할 수 있습니다. 회원의 마이로그 목

42. 마이로그 독자 나를 구독하는 회원을 독자라 합니다. 독자는 메뉴 항목으로 나타납니다. 독자 메뉴를 누르면 나를 구독하는 회원의 목록을 나열합니다. 구독 회원의 목록에서 회원을 선택하면 해당 회원의 마이로그 모아보기로 이동합니다.그림 42-1구독 신청을 하면 su

43. FCM 마이로그를 저장하면 구독자에게 알림을 보내려고 합니다. FCM(Firebase Cloud Messaging)을 이용하면 구독자에게 알림을 보낼 수 있습니다. FCM 서비스를 구현합니다.To implement Firebase Cloud Messaging (

44. FCM 보내기 FCM을 보내기 위해서는 백엔드에서 전송하여야 합니다. 백엔드 로직을 사용하지만 이를 위하여 서버를 구축하지는 않습니다. Firebase Cloud Functions를 사용하여 FCM을 전송하려고 합니다.To send Firebase Cloud M

45. FCM Token Firestore 저장 FCM을 보내려면 사용자에게 권한을 요청해야 합니다. 사용자가 알림 수신을 허용하면 해당 기기의 토큰을 받을 수 있고, 이 토큰을 클라우드에 저장하여 알림을 보낼 때 사용합니다. 토큰을 firestore에 저장하는 방법을

46. 마이로그 알림 요청 구독 신청을 하고 알림을 받기 위해서는 알림 요청을 해야 합니다. 알림 요청을 하면 알림 표시 권한을 허용할 것인지 묻습니다. 허용을 하면 알림을 받을 수 있습니다. 알림 요청을 하면 알림 표시를 허용할 것인지 요청을 하고 허용을 하면 해당

47. 여러 기기 알림 요청 마이로그 웹앱은 PC에서도, 모바일에서도 사용할 수 있습니다. 알림 요청에 대해 각 회원당 하나의 FCM 토큰을 저장하고 있다면 하나의 기기에만 FCM을 전송할 수 있습니다. 그러므로 FCM 토큰은 한 사람의 회원에 대해 여러개의 토큰을 저

48. FCM 토큰 처음 등록 같은 회원이 PC와 모바일에 fcm을 받으려면?위 질문으로 한 회원에 대해 여러 개의 토큰을 저장할 수 있는 코드를 답으로 받았지만, 이것은 기존에 토큰 정보가 저장되어 있는 회원에 대해 토큰을 추가하는 기능입니다.. 우리가 필요한 것은

49. 알림 요청 개선 알림 요청 화면에 ‘알림 요청’ 버튼 하나만 있는 것은 상당히 불친절합니다. 왜 알림 요청을 해야 하는지 설명이 있어야 하고, 알림 요청 버튼을 눌렀을 때 처리 결과에 대해 알려 주어야 하고, 그리고 알림은 어떤 형태를 가지는지 보여주는 것이

## 50. Firebase Functions Cloud에서 FCM을 보내기 위해 서버를 따로 관리하지 않습니다. 서버없이 Cloud에서 FCM을 보내기 위해 Firebase functions을 사용합니다.Firebase Functions, also known as C

51. Cloud에서 FCM 전송 구독자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 구독자가 PC와 모바일 등을 사용할 수 있으므로 각 구독자는 여러 토큰이 있습니다. 구독자 또한 여러 사람입니다. 나의 여러 구독자에 대해 각 구독자

52. Cloud에서 FCM 전송 구현 Cloud에서 알림을 전송하는 기능을 구현합니다. ChatGPT가 알려준 코드에서 사용된 sendToDevice API는 더 이상 사용하지 않는다고 합니다. 그래서 구글 검색을 통하여 찾은 sendEachForMulticast를

53. FCM 수신 FCM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를

54. Firebase Cloud Functions에서 여러 함수 내보내기 마이로그를 저장하면 구독자에게 알림을 전송하는 기능을 구현합니다. 잎에서 구현한 FCM 푸시 메시지 전송 기능을 그대로 두고 새로운 함수로 기능을 구현하고자 합니다.Firebase Cloud F

55. Firebase Cloud Functions에서 Firestore 사용 Firestore 트리거 기능을 이용하면 mylog가 firestore에 저장될 때 이벤트를 받을 수 있습니다.수신한 이벤트 데이터에 방금 저장한 마이로그의 모든 정보가 저장되어 있습니다.

56. Firebase Cloud Functions에서 Firestore query 사용 Firestore 데이터에 대해 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하는 방법에 대해 설명을 들었습니다. 이것으로는 부족합니다. firestore의 query 사용

57. 구독자 알림 전송 마이로그를 쓰면 구독자에게 알림을 전송하는 기능을 구현합니다. 잎에서 구현한 FCM 푸시 메시지 전송 기능을 그대로 두고 새로운 함수로 기능을 구현하고자 합니다.Cloud Firestore 함수 트리거의 onDocumentCreated 이벤트는

58. 마이로그 통계 나의 마이로그를 얼마나 많은 사람이 보았을지가 궁금합니다. 통계 기능을 구현해 봅시다. 통계는 여러 기능이 있습니다. 별도의 통계 메인 페이지를 만들고 이 페이지에서 각 통계 기능을 선택할 수 있도록 합니다.다음과 같은 통계 기능을 구현하려고 합

59. 마이로그 날짜별 조회수 일별 조회 현황 기능을 구현하기 위하여 먼저 기간을 입력하여 날짜를 받아오는 기능을 구현합니다.To create a Vue.js component that allows users to input a period (start date an

60. 마이로그 날짜별 조회수 구현 날짜별 조회수는 기간을 입력하면 기간동안의 각 날짜에 대한 마이로그 조회수를 보여줍니다. 마이로그는 한 사람의 회원이 하루 몇번을 조회해도 하루 한번만 카운트합니다. 마이로그는 여러개가 있으며, 각각의 마이로그를 조회한 사람 또한

61. 마이로그 보기 정렬 ‘내로그’ 메뉴를 눌러 나의 마이로그 목록을 볼 때 기본은 작성일 역순으로 보입니다. 그런데 마이로그 중 조회순으로 보고 싶을 때가 있습니다. 그래서 ‘내로그’ 페이지에 정렬 방법에 대한 ‘최신순’, ‘조회순’ 두 개의 버튼을 추가합니다. ‘