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

다른 사람의 마이로그를 구독할 수 있습니다. 마이로그 상세 보기 창에 구독 버튼이 있고, 구독 중일 경우 ‘구독중’으로 표시되고 구독 중이 아닐 때 ‘구독’으로 나타납니다. ‘구독’을 누르면 구독 신청이 됩니다. 구독을 하면 ‘구독’ 메뉴 항목에서 구독 중인 마이로그 리스트를 볼 수 있습니다.‘독자’ 메뉴 또한 구독 기능을 이용하고, 나를 구독하는 회원들의 리스트를 볼 수 있고, 회원을 클릭하면 해당 회원의 마이로그를 모아볼 수 있습니다.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에서 답글 구조 ..

마이로그 상세 보기 하단에 댓글들의 리스트를 볼 수 있고, 로그인 후에는 누구나 마이로그에 대한 댓글을 쓸 수 있습니다. 댓글 리스트를 나타내기 위해서는 마이로그의 댓글들 전체 리스트를 로드하여야 합니다. 댓글을 쓰거나 삭제를 하면 댓글들의 리스트를 다시 로드합니다.1. 댓글 쓰기2. src/views/MyLogView.vue {{ mylog.title }} {{ mylog.userName }} Posted on: {{ mylog.createdAt.toDate().toLocaleString() }} ({{ mylog.views }}) ..

로그인 후에는 마이로그에 댓글을 쓸 수 있습니다.ChatGPT에게 물었습니다.post에 댓글을 쓰고 싶어 ChatGPT게시물(Post)에 댓글 기능을 구현하려면, 댓글을 Firestore에 저장하고, 이를 화면에 실시간으로 표시하는 구조로 설계할 수 있습니다. 댓글 기능은 기본적으로 입력 폼을 통해 댓글을 작성하고, Firestore에 저장한 후, 저장된 댓글을 다시 불러와 화면에 표시하는 방식입니다. 여기서는 Vue.js, Vuex, Firestore를 사용하여 댓글 작성 및 불러오기 기능을 구현하는 방법을 설명하겠습니다.1. Firestore에서 댓글 컬렉션 구조게시물(post)마다 여러 개의 댓글이 있을 수 있습니다. Firestore에서는 하위 컬렉션을 사용하여 게시물마다 댓글을 관리할 수 있습니..

1. 마이로그 수정마이로그 상세 보기에서 마이로그를 수정할 수 있습니다. 마이로그의 수정은 쓴 사람만이 수정할 수 있으므로 로그인한 사용자의 id와 마이로그의 usrId가 같은 마이로그는 ‘수정’ 버튼이 나타납니다. 수정 버튼을 누르면 마이로그 수정화면이 나타나고 여기에서 마이로그를 수정할 수 있습니다. 마이로그를 수정하면 이미 로드한 마이로그의 정보도 같이 수정해야 합니다.src/views/MyLogView.vue {{ mylog.title }} {{ mylog.userName }} Posted on: {{ mylog.createdAt.toDate().toLocaleString() }} ({{ mylog.views..

마이로그는 여러 사람이 함께 사용하는 웹앱입니다. 나의 마이로그를 따로 모아 보거나, 특정 회원의 마이로그를 모아보고 싶을 때가 있습니다. 회원별 마이로그를 모아볼 수 있는 페이지를 만들어 봅시다.ChatGPT에게 물었습니다.내가 쓴 글만 모아서 볼 수 있도록 해줘 ChatGPT사용자가 본인이 작성한 글만 모아서 볼 수 있도록 구현하려면, Firestore에서 해당 사용자가 작성한 게시물만 필터링해서 가져오는 기능이 필요합니다. 이를 위해 사용자 인증 정보(예: Firebase Auth)와 Firestore 쿼리를 이용하여 특정 사용자의 게시물만 가져오고, Vue.js에서 해당 게시물을 표시하는 방식으로 구현할 수 있습니다.1. Firestore에서 사용자별 게시물 필터링Firestore에서는 where..

이미 등록한 마이로그 수정 기능을 구현합니다.ChatGPT에게 물었습니다.post 수정 기능을 만들어 줘 ChatGPT게시물(Post) 수정 기능을 구현하려면, 사용자가 게시물을 수정할 수 있는 화면을 제공하고, Firestore에서 기존 게시물 데이터를 업데이트하는 로직이 필요합니다. Vue.js와 Firestore를 사용해 게시물 수정 기능을 구현하는 방법을 설명드리겠습니다.1. Firestore에서 게시물 업데이트Firestore에서 게시물을 수정하기 위해서는 updateDoc 메서드를 사용하여 기존 문서를 업데이트할 수 있습니다. doc() 메서드를 사용해 특정 문서의 참조를 가져온 후, 수정할 데이터를 전달하면 Firestore에서 해당 데이터를 수정합니다.2. Vuex Store에서 게시물 수..