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

로그인 후에는 마이로그의 댓글에 대해 답글을 쓸 수 있습니다. 댓글의 답글에 대한 댓글을 쓰는 것은 지원하지 않습니다. 마이로그는 마이로그, 댓글, 답글의 구조를 가지고 있습니다. 물론 하나의 마이로그에 대해 여러 댓글이 가능하고, 하나의 댓글에 대해 여러 답글은 가능합니다.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에서 게시물 수..

마이로그를 쓰고(WriteMyLogView.vue), 마이로그들을 목록으로 조회하고(HomeView.vue), 마이로그를 목록에서 선택하여 내용을 확인(MyLogView.vue)하는 기본적인 워크플로우를 완성하였습니다.1. 마이로그 접속 (main.js)마이로그 페이지에 접속을 하면 마이로그는 저장된 모든 마이로그와 모든 회원 정보를 로드합니다. 현재 로그아웃 상태라면 회원의 정보는 로드하지 않지만, 이전에 로그인 상태였다면 접속할 때 자동으로 로그인을 합니다. 로그인을 하면 회원의 정보를 가지고 있습니다. 현재 회원 정보의 유무에 따라 로그인 여부를 알 수 있습니다.2. 마이로그 홈페이지 HomeView.vue홈페이지는 미리 로딩되어 있는 마이로그의 목록을 나열하고, 로그인 상태에 따른 메뉴 항목을 나..

로그인하지 않은 사용자의 조회수 카운트를 위하여 고유의 익명 ID를 생성하여 구분을 합니다. 고유의 익명 ID를 생하기 위하여 uuidv4를 사용합니다. uuidv4는 Universally Unique Identifier version 4의 약자로, 고유한 식별자를 생성하는 표준 중 하나입니다.ChatGPT에게 물었습니다.uuidv4를 설명해줘 ChatGPTuuidv4는 Universally Unique Identifier version 4의 약자로, 고유한 식별자를 생성하는 표준 중 하나입니다. UUID는 네트워크 상에서 고유성을 보장해야 하는 다양한 경우에 사용됩니다. uuidv4는 무작위(random) 데이터를 기반으로 UUID를 생성하는 방식으로, 총 128비트(16바이트) 크기의 값을 가지고 있..

조회수에 대해 ‘/views/{postId}/users/{userId or anonymousId}’ 구조에 lastViewed 항목 즉 마지막 조회날짜 하나만 가진다면, 날짜별 조회수를 구할 수 없습니다. 사용자가 조회한 각 날짜 정보를 가져야 날짜별로 조회수를 구할 수 있습니다.ChatGPT에게 물었습니다.lastViewed를 배열로 해서 조회 시간을 계속 추가하고 싶어 ChatGPTlastViewed 필드를 배열로 만들어 사용자가 해당 글을 조회할 때마다 조회 시간을 배열에 추가할 수 있습니다. Firestore는 배열 데이터를 지원하며, 배열에 항목을 추가하거나 업데이트할 수 있는 기능을 제공합니다. 이를 사용하면 사용자가 글을 조회할 때마다 조회 시간을 배열에 계속 추가할 수 있습니다.Firest..

조회수 컬렉션이 ‘/views/{postId}/users/{userId or anonymousId}’와 같은 구조를 가집니다.ChatGPT 에게 물었습니다.위 예제에서의 views 컬렉션 구조 설명해줘 ChatGPTviews 컬렉션은 각 글에 대한 조회 기록을 관리하기 위한 구조입니다. 특히, 회원과 비회원이 하루에 한 번만 조회수를 증가시키도록 조회 기록을 저장하는데 사용됩니다. 이 구조는 Firestore에 저장되며, 각 사용자의 조회 기록을 날짜와 함께 저장하여 중복 조회를 방지합니다.views 컬렉션 구조views 컬렉션은 특정 게시글(postId)에 대한 각 사용자의 조회 기록을 저장하는 방식으로 설계됩니다. 이를 통해 해당 사용자가 해당 게시글을 언제 마지막으로 조회했는지 확인할 수 있습니다...