vuejs를 이용한 모바일 웹 프론트 엔드 구축기 (5)

류호진·2021년 5월 21일
1
post-thumbnail

VUEX를 활용한 상태관리 A-Z 완전정복

우리는 (4)번 글에서 페이지 전환을 위한 vue-router에 대해서 알아보았습니다. 라우팅에 대한 기본적인 이해가 바탕이 되었다면 이제 상태관리를 위한 Vuex에 대해 말씀 드리겠습니다.

VEUX 설정

우선 Vuex 셋팅에 앞서 Vuex를 설치를 해보겠습니다. 물론 Vue-cli로 시작하게 되면 옵션중에 선택할 수 있지만 그렇게 시작하지 않았을 경우가 있기 때문에 설치부터 알아보도록 하겠습니다

npm install vuex

위의 명령어를 토대로 설치가 끝났다면, store패키지를 생성 후 moudles패키지와 내부에 index.js파일을 생성하면 됩니다.

1. Vuex 추가(index.js)

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

위와 같이 Vue와 Vuex를 import하고 Vue가 Vuex를 사용한다고 선언을 하면 기본적인 Vuex를 사용할 준비가 되었다고 할 수 있습니다.

2. Vuex 모듈 추가(index.js)

export default new Vuex.store({
  modules: { }
})

제가 진행했던 프로젝트에서는 Vuex를 업무단위별로 구분하여 관리하였고, index.js의 moudles안에 선언하여 사용하였습니다. 그렇게 하여 상태관리에 관해 유지보수를 진행할 때 담당자가 해당 건에 대해서 쉽게 접근할 수 있도록 하였습니다.

import test from "./modules/test"

export default new Vuex.store({
  modules: { test }
})

이러한 방식으로 사용할 modules를 import하고 import된 모듈을 Vuex.store에 선언하여 사용하는 방식으로 진행되고 있습니다.

3. Vuex 모듈 구조

그럼 이러한 모듈들이 어떠한 구조를 가지고 있었는지에 대해 말씀드리겠습니다. 우선 모듈에도 위의 index.js와 같이 Vue와 Vuex를 import하고 사용을 선언해 줍니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

이렇게 선언을 하고 난뒤 아래와 같은 구조를 만들어 줍니다.

export default {
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
}

위는 기본적인 Vuex의 구조로 공통단과 업무단위별로 해당 모듈들을 생성하여 index.js에 import하여 최종적으로 사용하는 방식으로 구성하였습니다.

4. Vuex 모듈 sample

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default {
  state: {
    testData:""
  },
  mutations: {
    SET_TESTDATA: (state,payload) => {
    	return state.testData = payload;
    }
  },
  actions: {
    SET_TESTDATA: (context,payload) => {
    	return context.commit("SET_TESTDATA",payload)
    }
  },
  getters: {
    getTestData: (state) => {
    	return state.testData
    }
  }
}

실제 구조는 위와 같은 구조로 작성할 수 있습니다. 기본적으로 Vue에 대한 이해를 바탕하고 있다고 생각하고 이 글을 작성하였지만, 아닌 분들도 있기 마련이기 때문에 간단한 설명을 드리겠습니다.

  1. state : state는 전역변수라고 생각하는게 편하실 겁니다. 이 글은 전문적이라기 보다는 좀 더 쉬운 이해를 드리기 위해 작성되있는 것입니다. 또한 새로고침시 데이터가 사라지기 때문에 이를 고려하여 코드를 작성하셔야 됩니다.
  2. mutations 과 actions : mutations과 actions 모두 상태 값을 변경하는 로직을 뜻하며, mutations은 동기적, actions은 비동기적 로직을 정의하여 사용합니다. API통신과 같은 작업은 actions 내부에서 이루어지도록 한다.
  3. getters : state 상태값을 호출하여 컴포넌트에서 사용하기 위한 getter라고 볼 수 있습니다.

이상 프로젝트를 하는데 있어서 필요한 전반적인 vuex구조를 함께 알아보았습니다. 선수지식으로 꼭 vue기초가 필요하니 vue에 대한 이해를 기반으로 봐주시면 감사하겠습니다. 반응이 좋으면 다음에 vue완전 기초에 대해서 쉽게 풀어 써드리겠습니다.

모바일 웹 개발시 고려할 점 !!!!!!!!!!!!!!!!!!!!

모바일 웹 프로젝트 내에서 개발시 한가지 고려해야 될 사항이 있습니다. 네이티브 디바이스의 메모리가 부족할 때 웹뷰가 초기화 되는 문제가 있습니다. 이러한 문제를 해결하기 위하여 하나의 객체에 데이터를 저장하여 놓고 해당 데이터를 네이티브 디바이스에서 웹뷰가 죽을 때 가져갔다가 웹뷰가 리로드 될 때 다시 셋팅하는 방식의 코딩이 필요합니다. 저는 이부분 때문에 상당한 고생을 하였기 때문에 미리 이러한 방법이 좋을 것 같아서 말씀 드립니다.

profile
BNK시스템 FE DEVELOPER(소개 글 참고)

0개의 댓글