2024/10/28 6

40. mylog 구독 보기

마이로그 상세 보기에서 구독 버튼을 눌러 구독 요청을 하면 보고 있는 마이로그의 저자에 대한 구독으로 설정이 됩니다. 또, 여러 저자를 구독할 수 있습니다. 구독 메뉴로 구독 페이지를 열면 내가 구독하는 모든 저자의 마이로그 목록을 볼 수 있습니다. 구독 마이로그 목록에서 마이로그를 선택하면 상세 보기로 이동합니다.구독 신청을 하면 subscriptions 컬렉션에 문서가 추가 되는데 문서는 userId, authorId, createdAtt 필드를 가집니다. 나의 구독 저자들은 subscriptions 컬렉션 문서의 authorId와 같은 userId를 가진 회원들이 됩니다.구독 보기는 내가 구독 요청한 모든 저자들의 마이로그 목록을 보여줍니다. 이를 위하여 다음과 같은 시퀀스로 마이로그 목록을 얻습니..

Vue로 PWA 개발 2024.10.28

39. mylog 구독 구현

마이로그 상세 보기 페이지에 구독 버튼이 있습니다. 마이로그의 저자에 대해 현재 구독 중이면 ‘구독 취소’가 현재 구독중이 아니면 ‘구독’ 버튼이 됩니다. 마이로그의 구독 버튼을 눌러 구독을 하게 되면 현재 보고 있는 마이로그 뿐 아니라 마이로그 저자에 대한 구독이므로 구독 저자의 모든 마이로그에 구독으로 표시됩니다. 즉 구독 중인 마이로그 저자의 각 마이로그 상세 보기에는 ‘구독 취소’버튼이 나타나는 것입니다. ‘구독 취소’는 구독 중이라는 뜻입니다. 구독 정보는 firestore의 subscriptions 컬렉션에 저장이 되고, 필드는 userId(회원 아이디), authorId(구독저자 아이디), createdat(구독 시작 날짜)가 있습니다. subscriptions 컬렉션에 문서가 있으면 구독 ..

Vue로 PWA 개발 2024.10.28

38. mylog 구독 취소

구독 기능은 다른 회원의 마이로그를 구독하고자 하는 것이고, 언제든 구독과 해지를 자유롭게 하고 싶습니다.ChatGPT가 제시한 구독 코드를 봤을 때 구독 컬렉션에 userId, postId, authorId, 생성시간을 저장함으로써 구독 여부를 확인할 수 있습니다. 우리의 목적은 다른 회원의 마이로그를 구독하는 것이므로 posrId는 불필요합니다. 또한 구독 해지에 대한 내용이 없으므로 구독 해지 기능이 포함되는 구독 기능을 구현해 봅시다.ChatGPT에게 물었습니다.How do I cancel my subscription?구독 해지는 어떻게 하지?ChatGPT To cancel a subscription to a post, we will remove the corresponding subscripti..

Vue로 PWA 개발 2024.10.28

37. mylog 구독

다른 사람의 마이로그를 구독할 수 있습니다. 마이로그 상세 보기 창에 구독 버튼이 있고, 구독 중일 경우 ‘구독중’으로 표시되고 구독 중이 아닐 때 ‘구독’으로 나타납니다. ‘구독’을 누르면 구독 신청이 됩니다. 구독을 하면 ‘구독’ 메뉴 항목에서 구독 중인 마이로그 리스트를 볼 수 있습니다.‘독자’ 메뉴 또한 구독 기능을 이용하고, 나를 구독하는 회원들의 리스트를 볼 수 있고, 회원을 클릭하면 해당 회원의 마이로그를 모아볼 수 있습니다.ChatGPT에게 물었습니다.Implement a subscription function for other members’ posts.다른 회원의 게시물에 대한 구독 기능을 구현해줘.ChatGPT To implement a subscription function for ..

Vue로 PWA 개발 2024.10.28

36. mylog 찾기 구현

검색어를 입력하면 제목 또는 내용에 검색어를 포함하는 마이로그 전체를 찾아서 카드뷰로 보여줍니다. 마이로그 보기 버튼을 클릭하면 마이로그 상세보기 페이지로 이동합니다.1. 마이로그 찾기2. src/views/SearchMyLogsView.vue {{ mylog.title }} {{ mylog.content }} 마이로그 보기 3. src/store/modules/mylogs.jsCopy// src/store/modules/mylogs.jsconst mutations = { ….. setFilter..

Vue로 PWA 개발 2024.10.28

35. mylog 찾기

글들이 많아지면 찾기 기능이 필요합니다. 마이로그 찾기는 간단하게 검색어를 포함하고 있는 마이로그들을 찾아 보여줍니다.ChatGPT에게 물었습니다.post의 title 또는 content에 검색어를 포함하는 post를 찾아줘 ChatGPT게시물의 title 또는 content에 검색어를 포함하는 게시물을 찾기 위해 Firebase Firestore에서 쿼리를 사용하여 검색 기능을 구현할 수 있습니다. 하지만 Firestore는 기본적으로 부분 일치 검색을 제공하지 않기 때문에, 일반적인 SQL처럼 LIKE 쿼리는 사용할 수 없습니다. 다음은 Vue.js와 Firestore를 사용하여 title 또는 content에 검색어를 포함하는 게시물을 찾는 기능을 구현하는 방법입니다. 여기서는 전방 일치 검색 및 ..

Vue로 PWA 개발 2024.10.28