기업프로젝트 - 코드 분석

써니·2023년 1월 25일
0

vue.js

목록 보기
15/15

기업프로젝트-VueJs

router(라우터) 네비게이션 가드

📂 router

  • requireAuth.js
    관리자의 권한이 필요하는 로직을 짜는 거 같은데
    아마 next()로 그냥 이동하게 한거 같다.
export function requireAuth() {
  return (to, from, next) => {
    next();
  }
}
  • to : 이동할 url 정보가 담긴 라우터 객체
  • from : 현재 url 정보가 담긴 라우터 객체
  • next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수



computed vs watch

computed: {
    // appStore/accessToken
    ...mapGetters({
      accessToken: "appStore/accessToken",
      refreshToken: "appStore/refreshToken",
    }),
  },
  watch: {
    accessToken: function (val) {
      console.log("accessToken changed..", val);
      this.api.setAccessToken(val);
    },
    refreshToken: function (val) {
      console.log("refreshToken changed..", val);
      this.api.setRefreshToken(val);
    }
  },

두가지 모두 특정 data의 변화를 감지하여 자동으로 바꿔주는 속성이다.
그렇다면 두가지의 차이점은?

두가지의 차이점

computed
단순한 값의 대한 계산 / 단순한 텍스트의 입력을 받아서 계산하는 것
watch
매번 실행되는 게 부담스러운 것들을 처리 / 데이터 요청

따라서 저 로직은 매번 실행되어야하는 accessToken, refreshToken를 header에 저장하는 api 호출을 watch로 처리함




Vuex

상태 관리 도구 / 여러 컴포넌트가 공유되는 데이터 속성
state : 컴포넌트 간에 공유할 data
view : 데이터가 표현될 template
actions : 사용자의 입력에 따라 반응할 method

actions

api를 vuex에서 호출해야한다고 하면 actions를 사용해야한다.
vue components에서 Dispatch라는 api를 이용해서 actions를 호출할 수 있음.
그러면 actions가 backend API를 가져와 mutations에 넘겨줌.
비동기호출은 actions에서 담당
하지만 여기서는 api를 호출하지 않아서 아무것도 담기지 않음

Mutations

Mutations 이란 Vuex 의 데이터,
즉 state 값을 변경하는 로직들을 의미한다.
Getters 와 차이점은
1. 인자를 받아 Vuex 에 넘겨줄 수 있고
2. computed 가 아닌 methods 에 등록
또한, 다음 챕터에 나올 Actions 와의 차이점이다.

  • Mutations 는 동기적 로직을 정의
  • Actions 는 비동기적 로직을 정의
    Mutations 의 성격상 안에 정의한 로직들이 순차적으로 일어나야
    각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문이다.

Getters

mutations 와 getters
Vuex 의 데이터 (state) 변경을 각 컴포넌트에서 수행하는 게 아니라, Vuex 에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생긴다.

📂store

  • appStore.js
import { appStoreActions } from "./appStoreActions";
export const appStore = {
  namespaced: true,
  state: {
    accessToken: "", // null
    refreshToken: "",
    userInfo: {
      birth: '',
      email: '',
      gender: '',
      name: '',
      phone: '',
      userType: 0,
    },
  },
  getters: {
    accessToken: (state) => {
      if (state.accessToken === undefined || state.accessToken === null || state.accessToken === "") {
        const jsonStr = localStorage.getItem("accessToken");
        if (jsonStr === undefined || jsonStr === null) {
          state.accessToken = null;
          return state.accessToken;
        } else {
          state.accessToken = JSON.parse(jsonStr);
        }
      }
      return state.accessToken;
    },
    userInfo: state => {
      return state.userInfo;
    },
    refreshToken: (state) => {
      if(state.refreshToken === undefined || state.refreshToken === null || state.refreshToken === "") {
         const jsonStr = localStorage.getItem("refreshToken");
        if (jsonStr === undefined || jsonStr === null) {
          state.refreshToken = null;
          return state.refreshToken;
        } else {
          state.refreshToken = JSON.parse(jsonStr);
        }
      }
      return state.refreshToken;
    },
  },
  mutations: {
    accessToken: (state, accessToken) => {
      if (accessToken === undefined || accessToken === null) {
        localStorage.removeItem("accessToken");
      } else {
        localStorage.setItem("accessToken", JSON.stringify(accessToken));
      }
      state.accessToken = accessToken;
    },
    userInfo: (state, userInfo) => {
      state.userInfo = userInfo;
    },
    refreshToken: (state, refreshToken) => {
      if(refreshToken === undefined || refreshToken === null) {
        localStorage.removeItem("refreshToken");
      } else {
        localStorage.setItem("refreshToken", JSON.stringify(refreshToken));
      }
      state.refreshToken = refreshToken;
    },
  },
  actions: appStoreActions,
};

mutations와 getters를 view에서 사용할 때
Vuex 에 내장된 mapMutations, mapGetters 를 이용하여
코드 가독성을 높일 수 있다.
computed에서 그냥 사용할 수 없어 ES6 의 문법 ... 을 사용하면 된다.

그래서 mutations은 인자를 vuex에 넘겨서 accessToken, refreshToken이 없으면 로컬 스토리지에서 삭제하고 있으면 로컬 스토리지에 저장
getters은 인자를 넘길 수 없고 각 컴포넌트에서 수행해야하지만 중복으로 코드를 쓰지 않게 하기 위해 컴포넌트 간에 공유할 data인 state의 변경




인스턴스 라이프 사이클

0개의 댓글