트윗 컴포넌트에 props로 데이터를 넘겨줄 때 그 트윗을 작성한 유저의 정보( email, username)도 함께 넘겨줘야 한다. 그래서 getUserInfo라는 함수를 사용하여 트윗을 작성할 때 uid로 유저정보를 문서에서 검색해서 그 유저의 정보도 tweets에 함께 담아서 props에 전달하면된다. //트윗 실시간 가져오기 onBeforeMount(() => { const q = query(collection(db, "tweets"), orderBy("created_at", "desc")); const unsubscribe = onSnapshot(q, (snapshot) => { snapshot.docChanges().forEach(async (change) => { let tweet = awa..

이제 작성한 트윗들을 가져올거임 firestore에는 onsnapshot이라고 실시간으로 문서를 가져오는 기능이 있음 https://firebase.google.com/docs/firestore/query-data/listen?hl=ko&_gl=1*1x1q27w*_up*MQ..*_ga*ODIwMDU5NDc2LjE3MTA4MzI2MTE.*_ga_CW55HF8NVT*MTcxMTA3NDI4OS4yLjAuMTcxMTA3NDI4OS4wLjAuMA.. Cloud Firestore로 실시간 업데이트 가져오기 | Firebase 5월 14일, Google I/O에서 Firebase를 다시 만나보세요. 지금 등록하기 의견 보내기 Cloud Firestore로 실시간 업데이트 가져오기 컬렉션을 사용해 정리하기 내 환경설정..

트윗을 작성하고 firebase에 저장되는 것을 구현할거임 현재 Home 페이지의 트윗 컴포넌트에 currentUser정보를 전달해서 현재 접속중이 유저의 트윗들이 표시되게 prop로 보내줄거임 트윗 컴포넌트에는 props 로 ['currenUser']를 받아서 export default { props: ["currentUser"], }; 프로필사진과 이름을 현재 접속중인 유저의 정보로 표시할거임 {{ currentUser.username }} . {{ currentUser.username }} 7분 아래와 같이 반영되는 것을 확인할 수 있다. 다시 Home 페이지로 돌아와서 export default { components: { Trends, Tweet }, setup() { const tweetBod..

이제 현재 로그인 중인 유저의 정보를 사용하여 프로필카드 및 유저 정보가 필요한 곳에 사용해 보도록 한당 https://velog.io/@jcs526/Vue3-computed-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95 [Vue3] computed 사용방법 computed 함수를 사용하여 변수에 할당해주면 계산된 값이 지정된다. velog.io import { ref, onBeforeMount, computed } from "vue"; const currentUser = computed(() => store.state.user); return { routes, showProfileDropdown, onLogout, currentUser }; currentUser에 저장되어있는 ema..

로그인 페이지와 가입하기 페이지 외 다른 페이지들은 인증된 유저만 사용 가능하도록 navigation guard 를 설정해줄거임 routes 에 register 와 login 제외한 나머지 페이지에 requireAuth: true, 를 추가한다. const routes = [ { path: "/", component: Home, title: "홈", icon: "fas fa-home fa-fw text-2xl", meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true }, }, { path: "/", component: Home, title: "탐색하기", icon: "fas fa-hashtag fa-fw text-2xl", meta: { is..

https://v3.vuex.vuejs.org/kr/ Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 v3.vuex.vuejs.org 현재 레이아웃을 아래와 같이 나눠놨다. 이제 유저인증이 되면, 메인 페이지를 사용할 수 있도록 router에 코드를 추가할건데 그 때 필요한 것이 vuex임 store에서 상태 관리에 필요한 코드들을 모아두고 전역으로 사용할 수 있게 해주는 기능 npm install vuex --save store 폴더 생성 후 index. https://v3.vuex.vuejs.org/kr/guide..

이제 회원가입 된 유저를 로그인 진행을 한 후 홈페이지로 이동하게 만들어줄거임 로그인도 가입하기와 동일하게 로그인 중일때는 버튼을 클릭하지 못하도록 한다. 로그인 중입니다. 로그인 1. auth와 signInWithEmailAndPassword 를 import하여 사용할거임 로그인 버튼을 클릭하면 로그인 함수가 실행되며 일단 각 input 태그에 공백이 있는지 검사한다. 만약에 있으면 alert 으로 에러메세지를 출력하며 리턴 2.에러가 있을 경우 try catch문을 사용하여 막아준다. 일단 loading이 시작되며 현재 input에 입력되어있는 email과 password정보를 firebase에서 인증기능을 통해 사용자가 있는지 검사를 하고 있으면 router를 통해서 기본 페이지로 이동한다. imp..

회원가입 버튼을 클릭하면 로딩을 표시하기 위해서 //회원가입 클릭 시 실행되는 함수 const onRegister = async () => { try { loading.value = true; //로딩 시작 버튼을 클릭하면 로딩의 값을 true로 변경하고 finally를 사용하여 오류가 발생하건, 정상적으로 종료되건 일단 끝이나면 로딩 값을 false로 만들어준다. } catch (e) { console.log("에러발생", e); alert(e.message); } finally { loading.value = false; //로딩 종료 } }; 회원가입 버튼을 두 개만들어서 v-if와 v-else를 사용하여, 로딩 중에 표시되는 버튼과 로딩이 아닐 때 표시되는 버튼을 구분하여 만들어준다. 회원가입중 ..

현재는 회원가입 페이지에서 정보를 입력하고 회원가입 버튼을 클릭했을 때 콘솔에만 찍히게 테스트만 한 상태이다. 이제 입력한 정보들을 firebase의 인증기능을 사용하여 가입 진행을 할 예정 firebase -> index.js에서 사용할 기능들을 import해준 뒤 export로 내보내기 해준다. // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase..

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 준비하는 동안 firebase 모듈 설치한다. firebase에 인증은 여러 방법이 있으나 이번에는 이메일/비밀번호만 선택한다. DB사용을 위해서 firestore를 만들어준다. 테스트모드 만들기 클릭 호스팅 사용 설명에 따라 아래의 모듈을 설치한다. \ 설치가 다 되면 아래의 안내와 같이 login과 init을 한다. firbase login 완료 시 fir..