2024/10 54

20. mylog 접속

사용자가 웹앱에 접속하면 마이로그는 홈페이지를 보여줍니다. 마이로그가 사용자에게 홈페이지를 보여주기까지 등록된 전체 마이로그를 로드하고, 등록된 전체 회원 정보도 로드하고, 자동 로그인을 통해 로그인 한 사용자의 계정 정보로 로드합니다. 물론 이전에 로그아웃을 하였거나, 이전에 로그인한 경우가 없는 사용자라면 현재 접속한 사용자 정보는 없습니다. 웹앱이 홈페이지를 사용자에 보여주기까지의 과정을 살펴봅시다.src/main.js// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'import vu..

Vue로 PWA 개발 2024.10.22

19. mylog 자동 로그인

사용자가 웹앱의 홈페이지에 접속하면 자동으로 로그인을 합니다.ChatGPT에게 물었습니다.onAuthStateChanged 설명해줘 ChatGPT onAuthStateChanged는 Firebase Authentication에서 사용자의 로그인 상태 변화를 실시간으로 감지하는 메서드입니다. 이 메서드를 사용하면 사용자가 로그인하거나 로그아웃할 때마다 즉시 반응하여 앱의 상태를 업데이트할 수 있습니다.1. 사용 예시onAuthStateChanged 메서드는 Firebase에서 제공하는 auth 객체를 사용하여 구현됩니다. 이 메서드는 로그인 상태의 변화를 감지하고, 그에 따라 콜백 함수를 실행합니다.2. 주요 기능:사용자가 로그인하면 onAuthStateChanged는 로그인한 사용자의 정보를 반환합니다...

Vue로 PWA 개발 2024.10.22

18. mylog 줄바꿈

게시물 세부정보 보기에서 줄 바꿈을 활성화하려면 게시물 콘텐츠를 HTML로 렌더링하는 메서드를 사용해야 합니다. Vue는 v-html 지시문을 사용하여 HTML을 렌더링하는 방법을 제공하지만 XSS(Cross-Site Scripting) 공격을 피하기 위해 HTML 콘텐츠를 사용을 제한합니다.ChatGPT에게 물었습니다.What is sanitize-html?sanitize-html가 뭐야?ChatGPT sanitize-html is a popular npm package used in Node.js applications to clean and sanitize HTML content. It is designed to remove any potentially harmful or malicious code..

Vue로 PWA 개발 2024.10.19

17. mylog 보기

mylog 보기를 구현합니다. 보기 화면에 조회수, 구독, 댓글, 답글 등의 기능이 추가될 것입니다.Create a detailed view screen for the article you wrote.쓴 글의 상세보기 화면을 만들어 줘.ChatGPT To create a detailed view screen for an article using Vuetify, you can follow these steps:Vuetify를 사용하여 기사에 대한 상세 보기 화면을 만들려면 다음 단계를 따르세요.Set Up Firebase Firestore: Ensure Firebase Firestore is correctly set up in your Vue project.Firebase Firestore 설정: Vue ..

Vue로 PWA 개발 2024.10.19

16. mylog 쓰기

mylog는 제목과 내용을 씁니다. 작성일은 저장하면서 자동으로 입력이 되고, 마이로그 보기 기능을 구현할 때 조회수나 구독을 위하여 DB가 변경될 것입니다. 우선 간단하게 시작합니다.ChatGPT에게 물었습니다.With vuetify card view, create a writing screen with title and content and a function to save the written text to firestore.vuetify card view로 제목과 내용을 있는 글쓰기 화면과 쓴 글을 firestore에 저장하는 기능을 만들어 줘.ChatGPT To create a writing screen with a title and content input fields using Vuetify..

Vue로 PWA 개발 2024.10.18

15. mylog 리스트

firestore DB에 저장된 마이로그들의 리스트를 보여주는 홈 페이지입니다. 화면에 마이로그들이 리스트로 나타나고 이들 리스트 중 하나를 선택하면 마이로그 상세 보기 페이지로 이동하게 됩니다. 먼저 마이로그 리스트를 나타내는 홈페이지를 간단하게 만들고, 마이로그를 쓰는 페이지를 만들어 마이로그를 등록하면서 필요한 것들을 더 보완하는 방향으로 개발을 진행합니다.ChatGPT에게 물었습니다.Using vuetify, create a page that displays the saved articles as a list and moves to a detailed view of the article when you select the list.vuetify를 이용하여 저장된 글들을 리스트로 나타내고 리스트를 ..

Vue로 PWA 개발 2024.10.18

14. myLog 페이지 - 접근 제한

로그인 전에 접근할 수 있는 페이지와 로그인 후에 접근할수 있는 페이지가 다릅니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용합니다.1. 로그인 전2. 로그인 후3. router // src/router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import store from '../store';import HomeView from '../views/HomeView.vue'import LoginView from '../views/LoginView.vue'import RegisterView from '../views/RegisterView.vue'import ProfileView from '../views/ProfileView...

Vue로 PWA 개발 2024.10.12

13. mylog 페이지 - 인증 후 보기

모든 사용자가 mylog의 모든 페이지를 볼 수 없습니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용하려면 Vue Router Navigation Guards를 사용하여 경로 보호를 설정해야 합니다. 이러한 가드는 사용자가 특정 페이지에 액세스하려면 인증을 받아야 하는지 확인합니다. router.beforeEach()는 Vue.js의 Vue Router에서 제공하는 탐색 가드입니다. 모든 경로 탐색 전에 호출되는 글로벌 가드입니다. 이 기능은 사용자가 특정 경로에 액세스하기 전에 발생해야 하는 인증 확인, 로깅 또는 기타 경로 전 처리와 같은 작업을 처리하는 데 특히 유용합니다.ChatGPT에게 물었습니다.Please explain router.beforeEach()router.beforeEach..

Vue로 PWA 개발 2024.10.12

12. mylog 로그인 - 완성

1. 로그인이메일 패스워드를 입력하고 로그인 버튼은 누르면 signInWithEmailAndPassword로 구글에 로그인한 후 uid를 받아 이것으로 mylog의 사용자 정보를 가져와 로그인 설정을 합니다.1.1 loginasync login({ commit, dispatch }, { email, password }) { try { const { user } = await signInWithEmailAndPassword(auth, email, password); //console.log('user::::', user); // 웹앱의 계정 정보를 가져와 로그인 설정을 한다. dispatch('fetchUserWithUid', {uid: user.uid});..

Vue로 PWA 개발 2024.10.11

11. mylog 로그인 - google 로그인

구글 로그인 기능을 이용하여 mylog에 로그인 하는 기능과 자동 로그인, 그리고 로그아웃 기능까지 구현합니다.ChatGPT에게 물었습니다.Please tell me how to log in using Google login of Google auth.구글 auth의 구글 로그인을 이용하여 로그인 하는 방법을 알려줘.ChatGPT To implement Google Login using Firebase Authentication (Google Auth) in a Vue.js application, you need to set up Firebase in your project and use the Google Sign-In method provided by Firebase. This method allow..

Vue로 PWA 개발 2024.10.11