로그인, 회원가입 프론트 작업

[recordbuffer]

• [x] 부트스트랩 적용
• [x] 프론트-백 프록시 설정, 포트변경
• [x] vue-router 적용
• [x] axios 적용
• [x] form으로 넘기기
• [x] 로그인 한 유저 > 마이페이지

[recordbuffer]

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router';
import axios from "axios";
import Home from "@/pages/Home";
import Signup from "@/pages/Signup";
import Login from "@/pages/Login";

const routes = [
  {path: '/', component: Home},
  {path: '/signup', component: Signup},
  {path: '/login', component: Login}
]

Vue.use(VueRouter);
Vue.prototype.$axios = axios;

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

CreateRouter로 사용했는데 버전이 달라서 제대로 동작하지 않았음 VueRouter로 변경함 (@yeony씨 무한한 감사..👍 )

---

Vue-Router

Vue.js에서 페이지 간 이동을 위한 라이브러리

• DOM을 새로 갱신하는 게 아닌 SPA 쉽게 구축
• 화면 매끄럽게 전환

[recordbuffer]

Vuex

상태(state)를 관리하는 라이브러리

✅ 상태 : 컴포넌트 간 공유할 수 있는 데이터

• 메모리에 저장되는 것이므로 새로고침시 초기화가 됨

  • 로그인 form 날렸을 때 새로고침 막는 법

    <form name="login" @submit.prevent="submitLoginForm">

  • vuex-persistedstate 통해 store 값을 웹브라우저의 localstorage에 저장

  • window 전역 객체의 sessionStorage 통해 sesseionstorage에 저장

---

• Local storage : 저장된 데이터 임의로 지우지 않는 이상 영구적으로 보관 가능함
  • 브라우저 종료해도 데이터 보관됨
• Session storage : 저장된 데이터의 지속과 범위에 제한 있음
  • 브라우저 종료하면 데이터 삭제됨

    ---

👍 로그인시 state에 id 저장, 로그아웃시 state 0으로 초기화