이제 현재 로그인 중인 유저의 정보를 사용하여 프로필카드 및 유저 정보가 필요한 곳에 사용해 보도록 한당 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..

로그인 페이지도 가입하기 페이지를 그대로 복사하여 필요한 부분만 남겨놓는다. 트위떠 로그인 로그인 계정이 없으신가요? 회원가입하기 import { ref } from "vue"; export default { setup() { // 변수 ref(초기값) usestate 와 동일 const email = ref(""); const password = ref(""); const loading = ref(false); //회원가입 클릭 시 실행되는 함수 const onLogin = () => { console.log(email.value, password.value); }; return { email, password, loading, onLogin, }; }, }; 계정이 없으신가요? 회원가입하기 route..

1. template에 html코드 작성하기 트위떠 회원가입 회원가입 계정이 이미 있으신가요 로그인하기 2. input태그에 v-model을 사용하여 양방향 바인딩을 구현할 수 있도록 한다. 그리고 script로 넘어와서 ref 를 import하고 각 변수를 ref를 사용하여 초기값을 설정한다. 처음 시작 시 username, email, password는 아무런 값이 없으니 ""으로 공백으로 지정한다. input에서 v-model을 사용하여 input의 값이 변경되면 해당 변수에 잘 저장되는지 테스트 하기위해 그리고 onRegister함수를 만들어서 입력한 값을 회원가입을 클릭하면 입력된 값이 잘 저장됐는지 console로 찍어본다. 중요한것은 모든 함수와 변수는 return을 해줘야한다는 점 ! im..

https://ko.vuejs.org/guide/built-ins/transition Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 네브바를 만드는데 반응형으로 제작중이라 모바일 사이즈에서는 오른쪽 햄버거 아이콘을 클릭하면 메뉴가 아래로 펼쳐지길 바랬다. vue에서는 어떻게 만들면 될지 찾아보다가 발견한 Transition 컴포넌트 나는 이렇게 만들었다. export default { components: { Bar, }, setup() { const mobileMenuVisible = ref(false); //모바일 메뉴 //모바일 메뉴 토글 const toggleMobileMenu = () => { mobileMenuVisible.va..