10/12

김승우·2020년 10월 12일

Vue Bootstrap Vue 프로젝트 생성 vue vue cli vue router vuex

TIL

목록 보기

24/68

* 인프런 Vue-trello 강의 복습 및 내용 정리

* Vue 프로젝트 생성하기

vue-cli를 통해서 손쉽게 Vue 프로젝트를 설치하고, 기본 설정을 할 수가 있다.
Git Bash를 사용할 경우 다음과 같이 명령어를 실행시켜야 옵션을 선택할 수 있다.
: $ winpty vue.cmd create '<project-name>'

* Vue Bootstrap 설치 및 적용

이번 프로젝트 복습할때는 Form과 같은 기본적인 태그들을 Vue Bootstrap으로 작성하기 위해 적용했다.

우선 패키지를 설치한다.
: npm install vue bootstrap-vue bootstrap
main.js에 모듈을 추가한다.

import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue);

bootsrap-vue 사용하기

: 공식문서에 있는 컴포넌트를 사용하면 된다.

* Vue CSS 파일 import 방법

: App.vue 파일 또는 필요한 Vue 파일의 태그 내에서 CSS 파일을 Import해서 사용하면 된다.

<style>
 @import './assets/styles/yourstyles.css';
</style>

* Vue Router 구성

- 내가 이해한 브라우저/서버 라우팅의 차이

브라우저 라우팅 : SPA앱에 사용된다. SPA앱은 말 그대로 하나의 페이지를 사용하므로, 라우트 마다 다른 컴포넌트를 화면에 렌더링하여 웹 애플리케이션을 구성한다.

서버 라우팅 : 서버에서 각 주소에 해당하는 페이지를 렌더링한다.

- Vue Router 세팅하기

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
        beforeEnter: requireAuth,
    },
    {
        path: "/login",
        name: "Login",
        component: Login,
    },
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,
});

코드 설명
1. path와 해당하는 component를 매칭시켜서 사용한다.
2. router를 통해 렌더링 되는 컴포넌트는 <router-view></router-view>에 렌더링된다.
3. nex VueRouter() 를 통해서 vue-router인스턴스를 생성하고, Main.js파일에서 Vue 인스턴스를 생성할때 적용한다
4. process.env.BASE_URL

- 라우터에서 Vuex Store 객체 사용 및 인증(리다이렉트) 구현

Vue-router객체가 정의되어 있는 router/index.js파일에서
store 모듈을 import 하면 store의 프로퍼티를 사용할 수 있다.

//router/index.js
import store from "./store/"

const requireAuth = (to, from, next) => {
  	//store의 getters 프로퍼티를 사용
    const isLogin = store.getters.isAuth;

    const redirectPath = `/login?rPath=${encodeURIComponent(to.path)}`;

    isLogin ? next() : next(redirectPath);
};

//store/getters.js
const getters = {
    isAuth: (state) => {
        return !!state.token;
    },
};

코드 설명
1. requireAuth함수는 Vue 네비게이션 가드의 beforeEnter가드에 사용된다.
2. Store에서 관리하는 token 정보가 있는지 확인하기 위해서 store모듈을 import하고, getters를 통해서 존재 여부를 체크한다.
3. token 값이 있으면, 다음 훅으로 이동(next())하고, 없으면 login페이지로 이동한다.
4. login페이지로 이동할 때, return path를 쿼리 스트링으로 전달한다.
5. 해당 Return Path는 Vue의 $route객체의 query프로퍼티를 통해 접근할 수 있다.

Vue 네비게이션 가드, beforeEnter 가드

네비게이션 접근 시 리다이렉트나 접근을 취소?하기위해 사용하는 가드.
가드 기능의 전달인자

to : 목적지 Route 객체
from : 현재 라우트로 오기전 Route 객체
next : 함수, next() => 다음 훅으로 이동, next("/") 또는 next({path : "/"})를 통해 리다이렉션을 할 수 있다.

* Vue axios 연동

Rest API/HTTP 통신을 위해 Axios라이브러리를 사용했다.
서드파티 라이브러리를 사용할 때는 항상 "Wrapping"? 해서 사용해야 사용성을 높일 수 있다.
- 각 파일에서 직접 axios 함수를 호출하지 말고, 다른 함수로 한번 감싸서 사용하라는 뜻 같다.

 //axios 사용 예

  axios({
    method: 'post',
    url: '/user/12345',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
  });

//Wrapping된 함수
const DOMAIN = "http://localhost:3000";

const request = (method, url, data) => {
    return axios({
        method,
        url: DOMAIN + url,
        data,
    }).then(({ data }) => data);
};

Login.vue 로그인 실패 시 에러 예외처리

로그인에 실패했을 경우, 사용자에게 메시지를 출력하고자 예외처리를 시도했다. 아직 명확한 답을 찾진 못했지만, catch구문에서 에러를 체크하고, 계속해서 return Promise.reject를 통해서 err객체를 넘기는 방식을 사용하기로 했다.

코드


//axios 래핑 함수
const request = (method, url, data) => {
    return axios({
        method,
        url: DOMAIN + url,
        data,
    })
        .then(({data}) => data)
        .catch((err) => {
      		//throw new Error(err) //1.
            return Promise.reject(err); //2.
        });
};

//actions.js
LOGIN({ commit }, { email, password }) {
        return api.auth
            .login(email, password)
            .then((data) => {
                const { accessToken } = data;
                commit("LOGIN", accessToken);
                return accessToken;
            })
            .catch((err) => {
                return Promise.reject(err); //2.
            });
    },

//Login.vue
this.LOGIN({
  email: this.loginEmail,
  password: this.loginPw,
})
  .then((token) => {
  console.log("token", token);
})
  .catch((err) => {
  
  //전달받은 axios err 객체
  const { request, response, message } = err;

  if (response.status === 401) {
    alert("아이디와 비밀번호를 확인해주세요");
    console.error(message);
    this.loginPw = "";
    this.$refs.loginEmail.focus();
  }
});

throw new Error(err);

: throw를 할 경우, 상위 함수의 err객체에 axios의 err객체가 전달 되지 않았다.

return Promise.reject(err);

: Promise를 통해서 상위의 catch에 axios err객체를 전달한다.
: 다음 catch(err)구문에서 err을 통해 전달받은 err객체를 사용할 수 있고, err.request, err.response를 통해 err 객체의 정보들을 사용할 수 있다.

로그인에 성공했을 경우

store

sessionStorage에 토큰 값을 설정한다

state의 토큰 값을 갱신한다.

axios의 베어러 토큰 값을 갱신한다.

axios.defaults.headers.common['Authorization'] = `Bearer ${ AUTH_TOKEN}`;

토큰값을 전달받고, $route의 rPath에 해당하는 값에따라 리다이렉트한다.

//리다이렉트
this.$router.push();

//route 객체 접근
this.$route

로그인, 로그아웃 store 로직

const mutations = {
    LOGIN(state, token) {
        state.token = token;
        setAuthInHeader(token);
        sessionStorage.setItem("token", JSON.stringify(token));
    },
    LOGOUT(state) {
        state.token = null;
        setAuthInHeader(null);
        delete sessionStorage.token;
    },
};