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

나를 구독하는 회원을 독자라 합니다. 독자는 메뉴 항목으로 나타납니다. 독자 메뉴를 누르면 나를 구독하는 회원의 목록을 나열합니다. 구독 회원의 목록에서 회원을 선택하면 해당 회원의 마이로그 모아보기로 이동합니다.1. 독자 2. src/views/ReadersView.vue 구독 신청을 하면 subscriptions 컬렉션에 문서가 추가 되는데 문서는 userId, authorId, createdAtt 필드를 가집니다. 나의 독자들은 subscriptions 컬렉션 문서의 authorId가 나의 id인 userId를 가진 회원들이 됩니다. 이들 userId로 users 컬렉션에서 회원의 정보 목록을 구하면 나의 독자 목록이 됩니다. 독자 목록을 선택하면 해당 독자의 마이로그를 볼 수 있는 UserMyLo..

마이로그 상세 보기 페이지 상단에 마이로그 저자의 마이로그 이름이 있습니다.이것을 누르면 회원의 마이로그 로 이동합니다. 이 페이지는 선택한 회원의 마이로그만 보여주는 페이지로 그 회원의 마이로그 홈이라 할 수 있습니다. 회원의 마이로그 목록에서 마이로그를 선택하면 다시 마이로그 상세 보기 페이지로 이동합니다. 회원의 마이로그 보기는 메뉴 항목에는 없습니다. 마이로그 상세 보기에서 저자의 마이로그 이름을 클릭하여 이동할 수 있습니다.1. MyLogView.vue 마이로그 보기에서 저자의 마이로그 이름을 클릭하면 저자의 id를 파라미터로 가지고 페이지로 이동합니다.goToUserMylogs(userId) { this.$router.push({ name: 'UserMyLogsView', params..

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

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

구독 기능은 다른 회원의 마이로그를 구독하고자 하는 것이고, 언제든 구독과 해지를 자유롭게 하고 싶습니다.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..

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

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

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

각 댓글에 대해 답글이 있습니다. 마이로그 상세 보기에는 마이로그, 마이로그에 대한 댓글, 댓글에 대한 답글을 모두 나타냅니다. 마이로그에 대한 댓글을 쓸 수 있고, 댓글에 대한 답글을 쓸 수 있습니다. 답글은 바로 삭제가 가능합니다. 그러나 댓글의 경우 답글이 있으면 삭제할 수 없습니다. 답글이 있다면 답글이 모두 삭제되어야 댓글을 삭제할 수 있습니다. 마이로그는 수정할 수 있지만 삭제할 수는 없습니다.1. 답글 쓰기2. src/views/MyLogView.vue {{ mylog.title }} {{ mylog.userName }} Posted on: {{ mylog.createdAt.toDate().toLocal..

로그인 후에는 마이로그의 댓글에 대해 답글을 쓸 수 있습니다. 댓글의 답글에 대한 댓글을 쓰는 것은 지원하지 않습니다. 마이로그는 마이로그, 댓글, 답글의 구조를 가지고 있습니다. 물론 하나의 마이로그에 대해 여러 댓글이 가능하고, 하나의 댓글에 대해 여러 답글은 가능합니다.ChatGPT에게 물었습니다.댓글에 대한 답글을 쓰고 싶어. ChatGPT댓글에 대한 답글 기능을 구현하려면, 댓글마다 답글(reply)을 저장하고 관리해야 합니다. 이를 위해 Firestore에서는 각 댓글마다 하위 컬렉션으로 답글을 저장하는 방식으로 설계할 수 있습니다. 댓글의 하위 컬렉션에 답글을 추가하고, 댓글과 함께 답글을 화면에 표시하도록 Vue.js에서 구현하는 방법을 설명하겠습니다.1. Firestore에서 답글 구조 ..