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

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog FCM과 서비스 워커마이로그는 Firebase v9(모듈형 SDK) 에서 FCM(Firebase Cloud Messaging) 서비스를 구현하려고 합니다.웹 애플리케이션에 푸시 알림을 통합하기 위하여 다음의 프로세스가 필요합니다.알림을 보내려면 사용자의 권한을 요청하고, 사용자가 권한을 허용하면 토큰을 받아 클라우드에 저장합니다.알림을 보내려면 사용자의 FCM 토큰을 사용하여 FCM 서버에 요청하고 Firebase Cloud Functions를 사용하여 알림을 보낼 수 있습니다.사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FC..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 독자마이로그 독자는 나를 구독하는 회원입니다. 독자 페이지는 나를 구독하는 회원들의 목록을 보여주고 회원을 선택하면 그 회원의 마이로그로 이동합니다.구독 정보는 subscriptions 컬렉션에 저장되고, 컬렉션은 userId(회원), authorId(글쓴이), 그리고 생성일의 필드를 가지고 있습니다.독자는 마이로그 상세 보기에서 구독 신청을 하게 되면 subscriptions 컬렉션에 저장이 되므로 subscriptions 컬렉션에서 authorId가 나의 userId와 같은 회원은 나의 독자입니다.이렇게 찾은 독자들을 목록으로 나타내고, 목..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 찾기마이로그의 찾기는 아주 단순합니다. 검색어를 입력하여 찾기를 하면 제목 또는 내용에 입력한 검색어가 포함되어 있는 모든 마이로그를 찾습니다. 장난감 수준이기는 하지만 아쉬운대로 쓸만합니다. 찾기 기능을 좀 더 고도화 하려면 고려해야 할 것들이 많습니다. 여기서는 검색어를 입력하여 검색어를 포함하는 마이로그를 찾는 것으로 만족하려 합니다. 전체 마이로그는 이미 로드되어 있습니다. 검색어를 입력하면 제목 또는 내용에 검색어를 포함하고 있는 마이로그를 로드되어 있는 마이로그에서 필터를 적용하여 검색 결과를 구합니다. 영문의 경우 대소문자 구분없이..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 내것내가 작성한 마이로그를 모아 봅니다.최신순, 오래된순과 조회순으로 마이로그를 정렬할 수 있습니다.1. 정렬 방법최신순const q = query(collection(db, "mylogs"), where("userId", "==", userId), orderBy("createdAt", "desc"));오래된순const q = query(collection(db, "mylogs"), where("userId", "==", userId), ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 쓰기사용자가 마이로그의 제목과 내용을 입력하면 마이로그는 로그인한 회원의 userId, username과 작성시간을 자동으로 추가하여 cloud의 firestore에 저장합니다.1. 마이로그 쓰기마이로그 제목과 내용을 입력폼에 입력하고 저장을 누르면 마이로그는 회원의 userId, userName, 작성시간을 추가하여 firestore에 저장을 합니다.WriteMyLogView.vue . . . 저장 ..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 구독마이로그 상세보기에 구독 버튼이 있습니다. 구독 중이 아니면 ‘구독’, 구독 중이면 ‘구독 취소’로 나타납니다. 구독을 하게 되면 내가 구독중인 마이로그를 ‘구독’ 페이지에서 모아볼 수 있습니다.1. 구독 신청구독 버튼을 toggle 버튼입니다. 같은 버튼으로 구독 또는 구독 취소를 할 수 있습니다. 구독은 마이로그 상세 보기에서 구독 버튼을 눌러 구독 신청을 하지만 마이로그 하나에 대한 구독이 아니라 글쓴이에 대한 구독입니다.구독 정보는 subscriptions 컬렉션에 저장됩니다. subscriptions 컬렉션은 userId(회원입니다..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 댓글, 답글마이로그 상세 보기에서 댓글과 댓글에 대한 답글을 쓸 수 있습니다. 마이로그는 하나의 마이로그에 대해 여러개의 댓글을 쓸 수 있고, 각 댓글에 대한 답글의 기능도 있습니다. 각 댓글에 대해 여러 개의 답글이 있다는 뜻입니다. 답글에 대한 댓글, 댓글에 대한 답글, 또 댓글… 이렇게 댓글 트리의 깊이를 더해 가는 것은 개발자 또는 요구에 따라 필요하겠지만, 마이로그는 댓글과 그것에 대한 답글까지만 기능을 구현합니다. 1. 댓글과 답글 로드, 저장 댓글은 마이로그에 종속 되므로 각 마이로그의 comments 서브 컬렉션에 저장되고, 댓글..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.mylog 모아 보기마이로그 상세보기 페이지 상단에 글쓴이의 마이로그 이름이 있습니다. 이것을 누르면 글쓴이의 모든 마이로그를 모아볼 수 있습니다. 1. mylog 모아 보기 이동 마이로그 상세 페이지에서 글쓴이의 마이로그 이름을 클릭하면 글쓴이의 id로 goToUserMylogs(author.id) 함수를 호출하고 이것은 Vue Router의 페이지 간 네비게이션 메서드 $router.push()를 호출하여 글쓴이의 마이로그 홈인 userlogs(UserMyLogsView.vue) 페이지로 이동합니다.goToUserMylogs(userId) {    t..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그 조회수 마이로그 조회수는 로그인을 하였던 하지 않았던 하루에 몇번을 조회를 하던 한사람은 하루에 한번만 조회수를 카운트 하려고 합니다.회원과 비회원이 하루에 한 번만 조회수를 증가시키도록 조회 기록을 저장하고 관리하기 위하여 views 컬렉션을 사용하고, views 컬렉션은 각 글에 대한 조회 기록을 관리하기 위한 구조입니다. 이것은 Firestore에 저장되며, 각 사용자의 조회 기록을 날짜와 함께 저장하여 중복 조회를 방지합니다. 1. views 컬렉션 views 컬렉션은 특정 게시글(mylogId)에 대한 각 사용자의 조회 기록을 저장하는..

Vue로 PWA 개발 - 그랜파 개발자Vue 프로젝트 Beta Test : mylog, 일상의 기록개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 내가 작성한 마이로그는 수정할 수 있습니다. 상세 보기 페이지에서 수정을 위하여 수정 페이지로 이동할 때 props를 이용하여 수정할 마이로그를 전달합니다.마이로그 수정마이로그 수정을 위하여 상세 보기 페이지에서 수정 버튼을 누르면 수정 페이지로 이동합니다.수정 페이지로 이동할 수 있도록 Vue Router에서 라우팅 설정을 추가합니다. Vue Router에서는 props 옵션을 통해 mylogId와 mylog를 라우트 파라미터로 수정 컴포넌트로 전달할 수 있습니다.수정 페이지에서는 props로 mylogId와 mylog를 받아 화면에 출력하고 수정할 ..