[PWA] 뷰티파이 심화편

티스토리 뷰

WEB

[PWA] 뷰티파이 심화편

마시멜로co. 2020. 10. 28. 17:18

<template>
  <v-container>
    <v-content>
      <p class="text-center display-3 my-4">메인페이지입니다.</p>
      <v-row>
        <v-col offset-sm="1" sm="10">
          <!-- 제목을 입력받으면 sTitle 데이터와 바인딩해서 store에 저장 -->
          <v-text-field label="제목" v-model="sTitle"></v-text-field>
        </v-col>
      </v-row>
      <div class="text-center">
        <v-btn large class="mt-5" color="purple" dark @click="fnSetTitle"
          >확인</v-btn
        >
      </div>
    </v-content>
  </v-container>
</template>
<script>
export default {
  //store에 있는 데이터를 가져옴
  data() {
    return {
      sTitle: this.$store.getters.fnSetData,
    };
  },

  //입력받은 제목을 store에 저장
  methods: {
    fnSetTitle() {
      this.$store.commit("fnSetData", this.sTitle);
      this.$router.push("/sub");
    },
  },
};
</script>

저번글에서는 뷰티파이의 개념과 뷰티파이의 기본적인 사용법에 대해 포스트하였습니다.

marshmello.tistory.com/50?category=1158454

[PWA] 뷰티파이 기초편

뷰티파이 (vuetify.js)는 뷰 자바스크립트 프레임워크에 구글의 공식 material design을 사용할 수 있는 컴포넌트 프레임워크입니다. 뷰 생태계에는 다양한 UI 프레임워크가 있지만, 뷰티파이를 적극 추

marshmello.tistory.com

이번글에서는 뷰티파이 기능으로 뷰의 라우터와 Vuex를 디자인해서 싱글 페이지 앱을 만드는 방법에 대해 알아보겠습니다.

1. Bottom Navigation

VSCode를 실행하여 bottom_nav.html 파일을 만듭니다.

v2.vuetifyjs.com/ko/getting-started/quick-start/

빠른 시작 — Vuetify.js

v2.vuetifyjs.com

위 사이트에 가서 CDN을 이용하여 뷰티파이를 연결해줍니다.

bottom_nav.html 파일 소스를 아래와 같이 작성합니다.

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">
        <v-app>
            <!-- 내용 영역에 선택된 메뉴명을 표시함. flexbox를 이용해서 가운데 정렬시킴 -->
            <v-content>
                <v-card height="100%" class="d-flex display-2 align-center justify-center">선택: {{ sSelect }}</v-card>
            </v-content>

            <!-- 하단 영역에 바닥 네비게이션 메뉴를 absolute로고정시켜 표시함 -->
            <v-footer>
                <!-- 선택된 메뉴는 sSelect 데이터를 연동시켜 바인딩함 -->
                <v-bottom-navigation absolute v-model="sSelect" dark>
                    <!-- 아이콘 버튼 3개를 표시함 -->
                    <v-btn text value="자전거">
                        자전거
                        <v-icon>directions_bike</v-icon>
                    </v-btn>
                    <v-btn text value="지하철">
                        지하철
                        <v-icon>subway</v-icon>
                    </v-btn>
                    <v-btn text value="버스">
                        버스
                        <v-icon>directions_bus</v-icon>
                    </v-btn>
                </v-bottom-navigation>
            </v-footer>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
             data: {
                sSelect: '자전거'
            }
        })
    </script>
</body>

</html>

본문영역은 v-content, v-container를 담당합니다.

v-content는 앱바와 바닥글을 제외한 나머지 영역을 본문영역으로 확보해줍니다.

v-container는 반응형 웹 디자인을 고려해 화면 크기에 맞춰 여백을 자동으로 설정해줍니다.

v-footer안에 v-bottom-navigation를 사용해서 배치합니다. 스크롤에 고나계없이 하단에 항상 나타나게 하려면 absolute 속성을 설정합니다.

value 속성은 True 혹은 False의 값을 넣어 바닥 넵비게이션이 화면에 나타나거나 사라지게 할 수 있습니다. 버튼을 눌러 선택된 값을 v-model 디렉티브를 사용해 sSelect에 대입하도록 바인딩합니다.

bottom navigation 버튼에서 값을 가져오는 방법은 v-bottom-navigation에서 사용한 v-model="sSelect"에 달렸습니다. 이것은 사용자가 선택한 버튼과 sSelect 변수를 자동으로 바인딩합니다. 따라서 data 속성에 이변수를 연결하면 됩니다.

실행결과 화면

참고사이트

v2.vuetifyjs.com/ko/components/bottom-navigation/

Bottom navigation component — Vuetify.js

The bottom navigation component is used for mobile devices and acts as the primary navigation for your application.

v2.vuetifyjs.com

2. Navigation drawer

탐색서랍은 앱바의 메뉴 아이콘을 누르면 나타나는 것으로, 링크를 클릭하면 해당 사이트로 이동하게 구성되어있습니다.

VSCode를 실행하여 navigation drawer.html 파일을 만듭니다.

vuetifyjs.com/en/features/icons/#font-awesome-5-icons

Icons

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

vuetifyjs.com

뷰티파이와 fontawsome을 연결해줍니다.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.x/dist/vuetify.min.css" rel="stylesheet">
    <!-- 폰트어썸 아이콘을 사용하기 위해 연결함 -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>


<body>
    <div id="app">
        <v-app>
            <!-- 상단영역에 툴바를 배치하고 좌측에 메뉴 아이콘 넣음 -->
            <v-app-bar app color="primary" dark>
                <!-- 메뉴 아이콘이 눌리면 클릭기능을 비활성화시킴 -->
                <v-app-bar-nav-icon @click.stop="bDrawer = !bDrawer">
                </v-app-bar-nav-icon>
                <v-toolbar-title>Header입니다.</v-toolbar-title>
            </v-app-bar>
            <!-- bDrawer가 True이면 탐색 서랍 사용하도록 바인딩함 -->
            <v-navigation-drawer absolute temporary v-model="bDrawer">
                <!-- 안쪽에 툴바로 플랫 스타일로 메뉴 제목을 작성 -->
                <v-toolbar flat height="70px">
                    <v-list>
                        <v-list-item>
                            <v-list-item-avatar>
                                <img src="https://randomuser.me/api/portraits/men/44.jpg">
                            </v-list-item-avatar>
                            <v-list-item-content>
                                <v-list-item-title class="title">홍길동</v-list-item-title>
                                <v-list-item-subtitle>로그인</v-list-item-subtitle>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-toolbar>
                <v-divider></v-divider>

                <!-- 제목 밑에 메뉴명을 목록으로 작성. 안쪽여백은 pt-3으로 설정 -->
                <v-list class="pt-3">
                    <!-- 배열에 있는 데이터를 반복문으로 가져와 링크, 제목, 아이콘을 렌더링함 -->
                    <v-list-item v-for="item in aMenu_items" :key="item.title" :href="item.link">
                        <v-list-item-action>
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title>{{ item.title }}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                // 버튼이 눌리면 비활성화되도록 하는 토글 변수
                bDrawer: false,
                // 배열로 메뉴의 제목, 아이콘, 링크를 준비
                aMenu_items: [{
                    title: '스타벅스',
                    icon: 'fa-coffee',
                    link: 'http://www.starbucks.com'
                },
                {
                    title: '애플',
                    icon: 'mdi-apple',
                    link: 'http://www.apple.com'
                },
                {
                    title: '페이스북',
                    icon: 'mdi-facebook-box',
                    link: 'http://www.facebook.com'
                }
                ]
            }
        })
    </script>
</body>

</html>

v-app-bar-nav-icon 메뉴아이콘을 눌렀다가 뗼때마다 @click.stop으로 이벤트가 발생하면 bDrawer변수값이 true 또는 false로 번갈아 변경됩니다. 이 변수값을 이용해서 탐색 서랍의 표시 여부를 결정하는 것입니다.

탐색서랍은 v-navigation-drawer 를 이용합니다. absolute 속성은 정확히 메뉴 아이콘 위치부터 서랍이 펼쳐지듯이 나타나게 됩니다. v-model 디렉티브는 탐색 서랍이 나타나거나 사라지는 타이밍을 bDrawer 변수값과 바인딩하여 결정합니다.

리스트간의 항목 구분선은 v-divider을 사용합니다.

실행결과 화면

3. SPA 만들기

Vue-CLI를 통해서 생성된 템플릿을 사용할 수 있어야합니다. 뷰티파이에서 제공하는 Vue-CLI템플릿을 활용해 메인 페이지와 서브 페이지로 이동하는 라우터 기능을 구현해 보겠습니다.

VSCode에서 터미널창을 열어 프로젝트를 만듭니다.

please pick a preset -> Manually select featres 선택

신규 프로젝트 템플릿을 기본으로 할지 아니면 사용자 정의로 할지 결정

check the features needs for your project -> [Router]만 선택 나머지 모두 선택해제

이 메뉴로 Babel, TypeScript, PWA등의 다양한 기능을 템플릿에 담을 수 있음 (스페이스바로 선택/해제)

User history model for router? 기본값 Y 선택( 주소 표시줄에 나타나는 #을 제거해줌)

라우터에서 히스토리모드의 사용여부 결정

where do you profer placing config for..->기본값 그대로 config 파일 선택

설정값을 config 파일과 package.json 파일 중에 어디에 저장할지 결정

save this as a preset for future projects?(Y/N) -> 기본값 N 선택

지금까지 선택한 기능을 다음 프로젝트에도 사용할지 여부

SPA 설치 및 자세한 설명은

marshmello.tistory.com/49

[PWA] 뷰 vue.js 고급 기능

저번 글에는 뷰의 기초를 공부하였습니다. marshmello.tistory.com/48 [PWA] 뷰 vue.js 입문 뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하

marshmello.tistory.com

에 6번 7번에 자세하게 설명되어있습니다.

vue create 프로젝트명
cd .\프로젝트명\

위와 같이 프로젝트를 생성한 후 프로젝트로 이동합니다.

아래의 명령어로 뷰티파이 플러그인을 추가하여줍니다.

vue add vuetify

뷰티파이 플러그인을 추가할때 3가지 옵션이 나오면 Default를 선택합니다.

뷰티파이 3가지 옵션은 다음과같습니다.

옵션	설명
Default(recommended)	자동으로 생성된 *.vue 파일에 기본 템플릿 디자인 포함
Prototype(rapid development)	자동으로 생성된 *.vue 파일은 아주 간략하게 작성
Configure(advanced)	*.vue,테마파일,CSS,아이콘,로컬언어 등은 직접 선택가능

VSCode 메뉴 파일 -> 폴더 열기로 위에서 만든 프로젝트를 열어줍니다.

파일을 열면 아래의 구조와 같이 생성된 것을 볼 수 있습니다.

웹팩 모듈을 설치하고 생성된 프로젝트가 제대로 생성되었는지 실행해봅니다.

(자세한 웹팩에 대한 설치 방법 안내는 marshmello.tistory.com/49 7번 확인)

터미널을 열어 다음과 같은 명령어를 입력합니다.

npm install
npm run serve

터미널에 출력된 http://localhost:8080/ 을 ctrl 키와 함께 눌러 실행해봅니다.

위와같이 뷰티파이 플러그인이 정상 설치 된것을 확인 할 수 있습니다.

다시 VSCode로 돌아와 프로젝트의 src/App.vue 파일을 아래와 같이 수정합니다.

<template>
  <v-app>
    <!-- 앱바 테마를 primary 파랑색으로 설정 -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>

      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
 <!--  내용영역에 라우터 페이지 렌더링 -->
    <v-content>
     <!--  페이지 장면 전환 효과 넣기 -->
      <v-slide-x-transition mode="out-in">
        <router-view></router-view>
      </v-slide-x-transition>
    </v-content>
  <!--   바닥글의 테마를 secondary 짙은 회색으로 설정 -->
    <v-footer color="secondary" fixed dark> 
      <div class="mx-auto">푸터 내용</div>
    </v-footer>
  </v-app>
</template>

v2.vuetifyjs.com/ko/components/app-bars/

App-bar component — Vuetify.js

The app bar component is a supercharged toolbar with advanced scrolling techniques and application layout support.

v2.vuetifyjs.com

위 사이트 참고

v-slide-x-transition 엘리먼트로 장면 전환 효과를 줄 수 있습니다. 장면 전환 효과가 일어나는 대상은 이 엘리먼트의 값으로 지정된 router-view가 대상이됩니다.

뷰티파이에어 제공하는 장면 전환 엘리먼트의 종류는 다음과 같습니다.

종류	효과
v-slide-x-transition	좌우 방향으로 짧게 전환
v-slide-y-transition	위 아래 방향으로 짧게 전환
v-fade-transition	사라졌다가 나타나게 됨
v-scale-transition	작아졌다 커지게 함

mode는 방향을 결정하는데 out-in 을 주면 바깥에서 안쪽으로 변환합니다.

mode 어트리뷰트의 종류는

in-out 안에서 바깥으로 나타남 out-in 바깥에서 안으로 나타남 으로 정리할 수 있습니다.

v-footer에 fixed로 하면 스크롤에 영향을 받지 않고 고정적으로 바닥글을 볼 수 있습니다. mx-auto로 설정하여 센터로 가도록 설정하였습니다.

메인화면을 만들기 위해 main.vue 파일을 src/component안에 생성합니다.

<template>
  <v-container>
    <p class="display-1 my-4">메인페이지입니다.</p>
    <v-divider></v-divider>
    <p class="display-4 my-4">메인페이지입니다.</p>
    <div class="text-center">
      <v-btn icon color="green" fab large class="mt-5" dark to="/sub">
        <v-icon>mdi-arrow-right</v-icon>
      </v-btn>
    </div>
  </v-container>
</template>

메인페이지에서 연결되는 서브페이지를 만들어보겠습니다. sub.vue 파일을 src/components 폴더에 생성합니다.

<template>
  <v-container>
    <p class="display-1 my-4">서브 페이지입니다.</p>
    <v-divider></v-divider>
    <p class="display-4 my-4">서브 페이지입니다.</p>
    <div class="text-center">
      <v-btn icon color="teal" fab large class="mt-5" dark to="/main">
        <v-icon>mdi-arrow-right</v-icon>
      </v-btn>
    </div>
  </v-container>
</template>

마지막으로 링크를 연결할 src/router/index.js 파일을 아래와 같이 수정합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

import sub from "@/components/Sub";
import main from "@/components/Main";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: main
  },
  {
    path: '/main',
    name: 'main',
    component: main
  },
  {
    path: '/sub',
    name: 'sub',
    component: sub
  }
]

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

export default router

vue-router 코어를 읽어봐서 Router 객체 이름으로 사용할 수 있도록 준비합니다.

다음으로 Main.vue와 Sub.vue 라는 컴포넌트 모듈 2개를 가져와 각각 main, sub 객체 이름으로 사용할 수 있도록 준비했습니다.

소스처럼 라우터를 생성할때 mode에 history 옵션을 지정하면 브라우저의 주소 줄에 #이 제거됩니다. 이 설정은 프로젝트를 생성할 때 Use history mode for router? 라는 질문에 Y 를 선택했기 때문에 자동으로 추가된 것입니다.

VScode에서 터미널을 열어 웹팩을 실행합니다.

npm run serve

초록색 화살표를 눌러 정상적으로 화면이 이동하는지 확인해봅니다.

4. SPA 만들기 - Vuex로 상탯값 관리 이용

VSCode을 열어 터미널로 프로젝트를 생성합니다.

vue create 프로젝트명

please pick a preset -> Manually select featres 선택

신규 프로젝트 템플릿을 기본으로 할지 아니면 사용자 정의로 할지 결정

check the features needs for your project ->[Vuex]와 [Router]만 선택 나머지 모두 선택해제

이 메뉴로 Babel, TypeScript, PWA등의 다양한 기능을 템플릿에 담을 수 있음 (스페이스바로 선택/해제)

User history model for router? 기본값 Y 선택( 주소 표시줄에 나타나는 #을 제거해줌)

라우터에서 히스토리모드의 사용여부 결정

where do you profer placing config for..->기본값 그대로 config 파일 선택

설정값을 config 파일과 package.json 파일 중에 어디에 저장할지 결정

save this as a preset for future projects?(Y/N) -> 기본값 N 선택

지금까지 선택한 기능을 다음 프로젝트에도 사용할지 여부

아래의 명령어로 뷰티파이 플러그인을 추가하여줍니다.

vue add vuetify

뷰티파이 플러그인을 추가할때 3가지 옵션이 나오면 Default를 선택합니다.

VSCode를 열어 생성한 프로젝트를 파일 -> 폴더열기로 엽니다.

정상적으로 설치가 되었는지 확인하기 위하여 프로젝트에 웹팩을 설치하고 실행해 보겠습니다.

터미널을 열어 다음과 같은 명령어를 입력합니다.

npm install
npm run serve

터미널에 출력된 http://localhost:8080/ 을 ctrl 키와 함께 눌러 실행해봅니다.

위 화면이 보인다면 정상적으로 프로젝트가 설치된것을 확인 할 수 있습니다.

이제 프로젝트의 src/App.vue 파일을 열어 다음과 같이 수정합니다.

<template>
  <v-app>
    <!-- 앱바 테마를 primary 파랑색으로 설정 -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>멀티페이지</v-toolbar-title>

      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
 <!--  내용영역에 라우터 페이지 렌더링 -->
    <v-content>
     <!--  페이지 장면 전환 효과 넣기 -->
      <v-slide-x-transition mode="out-in">
        <router-view></router-view>
      </v-slide-x-transition>
    </v-content>
  <!--   바닥글의 테마를 secondary 짙은 회색으로 설정 -->
    <v-footer color="secondary" fixed dark> 
      <div class="mx-auto">푸터 내용</div>
    </v-footer>
  </v-app>
</template>

src/store/index.js를 열어줍니다.

store파일은 상탯값을 저장하는 Vuex 스토어입니다. 코드를 아래와 같이 수정합니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//Vuex의 store 중앙에 state, mutations(setter),getter 정의

export default new Vuex.Store({
    //sTitle값을 상태값으로 정의
  state: {
    sTitle:''
  },
  //mutations는 getters와 대칭되는 setters 역할 설정
  mutations: {
    fnSetData : function(state,payload){
      return state.sTitle = payload
    }
  },
  getters: {
    //store의 상태값 변환
    fnSetData : function(state){
      return state.sTitle;
    }
  },
  actions: {
  },
  modules: {
  }
})

Vuex 객체를 사용하려면 Vuex의 Store()함수로 필요한 속성을 정의하면 됩니다. state 속성에 제목을 저장할 목적으로 sTitle이라는 변수를 정의합니다.

mutations 속성은 스토어에 저장하는 setters 역할을 수행해야합니다. fnSetData() 를 정의하여 외부에서 이 함수를 통해 값을 저장하도록 합니다. 외부에서 전달받은 매개변수 payload값을 함께 전달받은 state.sTitle에 저장합니다.

getters는 fnSetData()를 통해 외부에서 접근 할 수 있도록 state.sTitle값을 반환해줍니다.

이어서 메인페이지를 작성해봅니다. src/components/ 폴더에 main_page.vue 를 생성합니다.

<template>
  <v-container>
    <v-content>
      <p class="text-center display-3 my-4">메인페이지입니다.</p>
      <v-row>
        <v-col offset-sm="1" sm="10">
          <!-- 제목을 입력받으면 sTitle 데이터와 바인딩해서 store에 저장 -->
          <v-text-field label="제목" v-model="sTitle"></v-text-field>
        </v-col>
      </v-row>
      <div class="text-center">
        <v-btn large class="mt-5" color="purple" dark @click="fnSetTitle"
          >확인</v-btn
        >
      </div>
    </v-content>
  </v-container>
</template>
<script>
export default {
  //store에 있는 데이터를 가져옴
  data() {
    return {
      sTitle: this.$store.getters.fnSetData,
    };
  },

  //입력받은 제목을 store에 저장
  methods: {
    fnSetTitle() {
      this.$store.commit("fnSetData", this.sTitle);
      this.$router.push("/sub");
    },
  },
};
</script>

v2.vuetifyjs.com/ko/components/text-fields/

Text field component — Vuetify.js

The text field component accepts textual input from users.

v2.vuetifyjs.com

참조

@click 이벤트가 발생하면 fnSetTitle() 함수를 실행합니다. 그리고 /sub 경로를 to 어트리뷰트에 지정하여 서브페이지로 이동하도록 라우팅합니다.

양방향 데이터 바인딩(v-model)이므로 입력할떄마다 sTitle 값이 변경됩니다. sTtile 변수의 초깃값은 Vuex의 스토어에 읽어 와야 하므로 뷰 인스턴스에 선언된 store 객체 변수에 접근하기 위해서 this.$store.를 사용합니다. 그리고 스토어에 있는 getters 속성의 fnGetData() 함수를 실행해서 읽은 값을 sTitle 변수의 초기값으로 설정합니다.

여기서 $store에 달러 기호를 사용합니다. 뷰 인스턴스의 멤버에 접근하려면 반드시 $를 사용해야합니다.

사용자가 확인 버튼을 클릭하면 Vuex 스토어에 저장되어야 합니다. 그래서 commit() 함수를 사용해 fnSetData() 함수에 접근하여 매개변수로 sTitle값을 전달합니다. this는 현제 페이지의 data 속성에 접근하기 위해 사용한 것입니다.

그리고 $를 사용하면 뷰 객체의 속성에 직접 접근 할 수 있습니다. 마지막으로 this.$router.push("/sub"); 는 라우터를 통해 서브페이지로 이동합니다.

서브페이지를 src/components/ 폴더에 sub_page.vue 로 생성합니다.

<template>
  <v-container>
    <v-content>
      <p class="text-center display-1 my-4">서브 페이지입니다.</p>
      <v-divider></v-divider>
      <!--store에 있는 sTitle값을 가져와 표시 -->
      <div class="text-center display-3 my-4">{{ sTitle }}</div>
      <div class="text-center">
        <v-btn color="teal" fab large class="mt-5" dark to="/main">
          <v-icon>mdi-replay</v-icon>
        </v-btn>
      </div>
    </v-content>
  </v-container>
</template>
<script>
export default {
  //store에 있는 fnSetData() 함수를 호출하여 sTitle를 가져옴
  data() {
    return {
      sTitle: this.$store.getters.fnSetData,
    };
  },
};
</script>

메인페이지에서 입력한 값을 스토어에서 가져와 표시하기 위해 {{ sTitle }} 머스태시로 sTitle 변수값을 바인딩하여 표시합니다.

페이지간의 링크를 to 어트리뷰트에 라우터 정보로 지정하면 페이지끼리 이동할 수 있습니다.

단 to 어트리뷰트를 사용하려면 Vuex 스토어에 값이 저장되지 않으므로 상태값을 관리할 필요가 없는 간단한 이동에만 활용해야 합니다.

sTtile 변수는 초기값으로 Vuex 스토어의 fnGetData() 함수로 접근해 값을 읽어서 저장합니다. 이 값이 바로 메인 페이지에서 작성하고 확인을 눌렀을때 저장한 값입니다.

src/router/index.js 파일을 열어 다음과 같이 수정합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import main_page from '@/components/main_page';
import sub_page from '@/components/sub_page';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: main_page
  },
  {
    path: '/main',
    name: 'main_page',

    component: main_page
  },
  {
    path: '/sub',
    name: 'sub_page',

    component: sub_page
  }
]

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

export default router

웹팩을 실행해봅니다.

vue run serve

입력란에 값을 입력 후 확인 버튼을 누릅니다.

뷰티파이 심화편을 알아봤습니다.

다음편에는 뷰 프레임워크를 공부해보겠습니다.

수고하셨습니다.

저작자표시 비영리 변경금지

'WEB' 카테고리의 다른 글

aws ec2 서버와 카페24 도메인 연결 (0)	2020.12.22
[PWA] 앱 배포하기 (0)	2020.11.17
[PWA] 뷰티파이 기초편 (1)	2020.10.28
[PWA] 뷰 vue.js 고급 기능 (0)	2020.10.26
[PWA] 뷰 vue.js 입문 (1)	2020.10.26

공유하기 링크

페이스북
카카오스토리
트위터

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

진화하는공간

티스토리 뷰