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

마이로그 로그 쓰기로 마이로그를 쓰면, 앱은 마이로그를 forestore에 저장한 후 홈페이지로 이동합니다. 사용자가 입력하는 것은 제목과 내용이지만, 홈페이지 마이로그 리스트에는 글쓴시간, 글쓴이 이름 등의 정보들이 보입니다. 이들 정보는 마이로그를 저장할 때 웹앱이 자동으로 추가합니다. 앞으로 조회수 등의 정보도 추가될 것입니다.src/views/WriteMyLogView.vue 마이로그 - 내 일상의 기록 저장 saveMylo..

사용자가 마이로그에 접속을 하면 홈페이지가 열리고 홈페이지는 등록된 마이로그 리스트를 나타냅니다. 홈페이지는 등록된 모든 마이로그를 리스트로 보여주고, 이 리스트 중에서 마이로그를 선택하면 마이로그 보기 화면으로 이동한 후 마이로그의 내용을 보여줍니다.1. 마이로그 홈src/views/HomeView.vue {{ error.message }} {{ mylog.title }} {{ mylog.userName }} {{ mylog.createdAt.toDate().toLocaleString() }} {{ mylog.content }} ..

사용자가 웹앱에 접속하면 마이로그는 홈페이지를 보여줍니다. 마이로그가 사용자에게 홈페이지를 보여주기까지 등록된 전체 마이로그를 로드하고, 등록된 전체 회원 정보도 로드하고, 자동 로그인을 통해 로그인 한 사용자의 계정 정보로 로드합니다. 물론 이전에 로그아웃을 하였거나, 이전에 로그인한 경우가 없는 사용자라면 현재 접속한 사용자 정보는 없습니다. 웹앱이 홈페이지를 사용자에 보여주기까지의 과정을 살펴봅시다.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..

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

게시물 세부정보 보기에서 줄 바꿈을 활성화하려면 게시물 콘텐츠를 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..

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 ..

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..

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를 이용하여 저장된 글들을 리스트로 나타내고 리스트를 ..

로그인 전에 접근할 수 있는 페이지와 로그인 후에 접근할수 있는 페이지가 다릅니다. 로그인한 후에만 특정 페이지에 대한 액세스를 허용합니다.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...

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