Vue로 PWA 개발, ChatGPT의 프론트엔드 앱 Vuex 예제를 개발해 봅시다.

Vue로 PWA 개발 - 그랜파 개발자.

 

개발이라고 표현을 한 이유는 이미 만들어진 예제이지만 우리가 직접 개발한다고 가정하고 프로그램적으로 생각을 해 봅시다.

1. 앱 개발 요구 사항

요구 사항은 다음과 같습니다.

1. 현재 카운트를 화면에 나타낼 것
2. 현재 카운트를 두배 하여 화면에 나타낼 것
3. 버튼을 누르면 카운트를 1 증가 시킬 것
4. 버튼을 누르면 카운트를 비동기적으로 1 증가 시킬 것.

2. 앱 요구에 대한 기능 분석

이 요구 사항을 구현하기 위하여 해야 할 것들을 생각해 봅시다. 이것은 그랜파 개발자가 프로그램을 개발할 때 사용하는 방법입니다. 그랜파 개발자의 개인적인 방법론이므로 무조건 이렇게 해야 한다는 것은 아닙니다.

1. 화면에 카운트, 2배 카운트, 증가 버튼, 비동기 증가 버튼 그리기
2. 현재 카운트를 저장하고 있는 변수
3. 증가 버튼 클릭 이벤트에서 카운트 1을 증가시키는 함수
4. 비동기 증가 버튼 클릭 이벤트에 비동기적으로 1을 증가시키는 함수

3. 기능 구현

store를 사용할 것이므로 현재 카운트를 저장하고 있는 변수는 state에 두고, 숫자 1을 증가시키는 함수, 비동기적으로 숫자 1을 증가시키는 함수는 actions에 함수를 구현해서 함수 실행 결과 변경된 카운트 값은 Mutations에 기능을 구현합니다.

화면 UI

<div>
  <p>카운트: {{ count }}</p>
  <p>두 배 카운트: {{ doubleCount }}</p>
  <button @click="increment">증가</button>
  <button @click="incrementAsync">비동기 증가</button>
</div>

 

'p' 태그로 카운트와 더블 카운트를 나타내고, 기능 실행을 위하여 ‘증가’, ‘비동기 증가’는 button 컴포넌트를 사용합니다.

state

state: {
    count: 0
  },

1증가 함수

mutations: {
  increment(state) {
    state.count++;
  }
},

 

increment() 기능을 actions에는 넣을 수 없을까요?
개발자 마음대로 입니다.

비동기 1증가 함수

actions :
incrementAsync({ commit }) {
  setTimeout(() => {
    commit('increment');
  }, 1000);
}

이렇게 store에 상태를 두고 actions에 함수를 작성하고, mutations의 함수로 상태값을 변경시키는 각종 기능들을 vue component에서 호출하여 사용합니다.

4. App 개발

프로젝트를 만들고 예제 코드를 수정한 후 실행해 봅시다.

vue create counter-app

 

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project:** Babel, PWA, Router, Vuex**
? Choose a version of Vue.js that you want to start the project with** 2.x**
? Use history mode for router? (Requires proper server setup for index fallback in production)** Yes**
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects?** No**

cd counter-app

store/index.js

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

App.vue

<!-- src/App.vue -->
<template>
  <div>
    <p>카운트: {{ count }}</p>
    <p>두 배 카운트: {{ doubleCount }}</p>
    <button @click="increment">증가</button>
    <button @click="incrementAsync">비동기 증가</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

5. 실행

npm run serve

 

브라우저에서 http://localhost:8080으로 이동하면 앱을 볼 수 있습니다.

 

 

 

Vue 프로젝트 Beta Test : mylog, 일상의 기록