2024/10/25 3

30. mylog 수정, 내 마이로그 보기 구현

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

Vue로 PWA 개발 2024.10.25

29. mylog 모아보기

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

Vue로 PWA 개발 2024.10.25

28. mylog 수정

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

Vue로 PWA 개발 2024.10.25