PWA 프로젝트 - mylog

Beta Test : mylog, 일상의 기록 Log는 컴퓨팅에서 운영 체제나 소프트웨어가 실행 중에 발생하는 이벤트나 메시지를 기록하는 것입니다. 내가 살아가면서 삶의 순간에 그때의 생각, 느낌, 기분을 기록하는 것도 내 삶을 내가 이해하는 데 좋은 자료가 될

Vue CLI(Command Line Interface)의 vue create 명령어를 사용하여 새로운 Vue.js 프로젝트를 생성할 수 있습니다. 이 명령어를 실행하면 Vue 프로젝트 구조를 자동으로 설정하고 필요한 기본 파일과 폴더를 생성해 주므로 개발을 빠르게 시

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. App vue create 명령어로 만들어진 프로젝트를 수정하면서 웹앱 개발을 시작합니다. 애플리케이션의 상태(state)를 관리하기 위해

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 계정 만들기 마이로그 계정 만들기는 이메일과 비밀번호로 구글 계정을 생성하고, 구글 계정의 uid와 계정 만들기 페이지에서 사용자가 입력한 정

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그 로그인은 먼저 이메일과 패스워드로 구글에 로그인하여 uid를 받아 이것으로 마이로그 users collection에서 회원 정보를 가져와 로그인 설정을 합니다.인증을 위하여 signInWithEmailAnd

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 계정 정보 변경에서 이름과 마이로그 이름을 수정할 수 있고, 비밀번호도 변경할 수 있습니다. 그림 6-1 1. 계정 정보 변경 마이로그 계

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 처음 마이로그에 접속을 하면 홈페이지가 열립니다. 이 홈페이지에는 등록된 전체 마이로그의 목록을 나타냅니다. 그림 7-1 마이로그 전체 보기

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 홈페이지의 마이로그 목록에서 마이로그를 선택하면 상세보기로 이동합니다. 상세 보기에서는 댓글과 답글을 쓸 수 있고, 구독과 수정도 할 수 있습니

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그 수정을 위하여 상세 보기 페이지에서 수정 버튼을 누르면 수정 페이지로 이동합니다.수정 페이지로 이동할 수 있도록 Vue Router에서 라우팅 설정을 추가합니다. Vue Router에서는 props 옵션을

Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그 조회수 마이로그 조회수는 로그인을 하였던 하지 않았던 하루에 몇번을 조회를 하던 한사람은 하루에 한번만 조회수를 카운트 하려고 합

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그 상세보기 페이지 상단에 글쓴이의 마이로그 이름이 있습니다. 이것을 누르면 글쓴이의 모든 마이로그를 모아볼 수 있습니다.그림 11-1그림 11-2마이로그 상세 페이지에서 글쓴이의 마이로그 이름을 클릭하면 글쓴

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그 상세 보기에서 댓글과 댓글에 대한 답글을 쓸 수 있습니다. 마이로그는 하나의 마이로그에 대해 여러개의 댓글을 쓸 수 있고, 각 댓글에 대한 답글의 기능도 있습니다. 각 댓글에 대해 여러 개의 답글이 있다는

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그 상세보기에 구독 버튼이 있습니다. 구독 중이 아니면 ‘구독’, 구독 중이면 ‘구독 취소’로 나타납니다. 구독을 하게 되면 내가 구독중인 마이로그를 ‘구독’ 페이지에서

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.사용자가 마이로그의 제목과 내용을 입력하면 마이로그는 로그인한 회원의 userId, username과 작성시간을 자동으로 추가하여 cloud의 firestore에 저장합니다.그림

내가 작성한 마이로그를 모아 봅니다.최신순, 오래된순과 조회순으로 마이로그를 정렬할 수 있습니다.그림 15-1최신순오래된순조회순

마이로그의 찾기는 아주 단순합니다. 검색어를 입력하여 찾기를 하면 제목 또는 내용에 입력한 검색어가 포함되어 있는 모든 마이로그를 찾습니다. 장난감 수준이기는 하지만 아쉬운대로 쓸만합니다. 찾기 기능을 좀 더 고도화 하려면 고려해야 할 것들이 많습니다. 여기서는 검색어

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그 독자는 나를 구독하는 회원입니다. 독자 페이지는 나를 구독하는 회원들의 목록을 보여주고 회원을 선택하면 그 회원의 마이로그로 이동합니다.그림 17-1구독 정보는 subs

Vue로 PWA 개발 - 그랜파 개발자 Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. mylog FCM과 서비스 워커 마이로그는 Firebase v9(모듈형 SDK) 에서 FCM(Firebase Cloud Messaging) 서비스를 구현하려고 합니다. 웹 애플리케이션에 푸...

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.우리는 서버가 없습니다. FCM은 백엔드 서비스가 필요합니다.그래서 ChatGPT에게 물었습니다..Firebase Cloud Functions는 서버리스(Serverless) 환

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.마이로그는 사용자가 마이로그를 저장하면 구독자에게 알림을 보내려고 합니다.알림을 받이 위해서 사용자는 알림을 받는 것을 허용해야 합니다. 알림을 허용한 후 어떤 글쓴이에 대해 구

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.Firebase용 Cloud Functions라고도 알려진 Firebase Functions는 개발자가 서버를 관리하지 않고도 백엔드 코드를 작성하고 배포할 수 있도록 해주는 F

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.FCM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.그림 23-1사용자가 현재 웹페이지에 있을 때 들어오는 메시지

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. 마이로그가 늘어나면 스크롤하면서 읽는 것만으로는 불편합니다. 마이로그의 개수가 많아지면 한없이 스크롤해야 하기 때문입니다. 그래서 마이로그 카테고리를 등록하여 카테고리 별로

Vue로 PWA 개발 - 그랜파 개발자카테고리가 생겼으니 마이로그 쓰기를 수정해야 합니다. 마이로그를 쓸 때 카테고리를 선택하고, 저장할 때 카테고리를 포함하여 저장하도록 수정하겠습니다.그림 25-1그림 25-2

Vue로 PWA 개발 - 그랜파 개발자개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.카테고리가 생겼으니 내 마이로그를 볼 때에도 카테고리별로 볼 수 있습니다. ‘내것’ 페이지에서 카테고리를 선택하면 선택한 카테고리의 마이로그만 볼 수 있도록 수정합니다.그림 26

Vue로 PWA 개발 - 그랜파 개발자 Vue 프로젝트 Beta Test : mylog, 일상의 기록 > 개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다. mylog 모아보기 개선 마이로그 특정 사용자의 마이로그를 모아볼 수 있습니다. 홈 페이지의 마이로그 목록에서 마이로그를 선택하면 상세 보기 페이지로 이동하고 상세 페이지 위쪽에 마이로그 사...