VueJS/VueJS
2023/06/19__VueJS(Vue && PWA && Firebase)
HELLICAT
2023. 6. 20. 18:40
반응형
매개변수만으로 상태값 관리하기
1. 프로젝트 생성 => vue create . => babel과 Router
2. vuetify 설치
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>Vuex 활용하기</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<!-- 페이지 장면전환 효과 -->
<v-slide-x-transition mode="out-in">
<router-view></router-view>
</v-slide-x-transition>
</v-main>
<!-- footer 여역 테마를 secondary로 설정 -->
<v-footer color="secondary" fixed dark>
<div class="mx-auto">Create By VueJS</div>
</v-footer>
</v-app>
</template>Router => index.js
import Vue from "vue";
import VueRouter from "vue-router";
import mainPage from "../components/main_page.vue";
import subPage from "../components/sub_page.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: mainPage,
},
{
path: "/main",
name: "main",
component: mainPage,
},
{
path: "/sub",
name: "subpage",
component: subPage,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;=> component/main_page.vue
<template>
<v-container>
<div class="text-center display-3 my-4">메인페이지입니다</div>
<v-row>
<v-col sm="10" offset-sm="1">
<!-- 제목을 입력받으면 sParam 데이터와 바인딩시켜 저장 -->
<v-text-field label="매개변수1" v-model="sParam1"></v-text-field>
<v-text-field label="매개변수2" v-model="sParam2"></v-text-field>
</v-col>
</v-row>
<div class="text-center">
<!-- 확인 단추를 누르면 매개변수값을 가지고 서브페이지로 이동 -->
<v-btn large class="mt-5" color="purple" dark @click="fnGoSub">
확인
</v-btn>
</div>
</v-container>
</template>
<script>
export default {
// 두개의 매개변수 데이터를 저장
//App.vue 를 제외한 모든 컴포넌트 data는 함수 형식으로 만든다.
data() {
return {
sParam1: "",
sParam2: "",
};
},
methods: {
fnGoSub() {
this.$router.push({
name: "subpage", // =>라우터에 있는 이름과 동일하게
params: {
p_param1: this.sParam1,
p_param2: this.sParam2,
},
});
},
},
};
</script>component/sub_page.vue
<template>
<v-container>
<v-main>
<div class="textcenter display-1 my-4">서브페이지입니다</div>
<v-divider></v-divider>
<!-- 라우터로 전달받은 두개의 매개변수 값을 데이터 속성에 저장한 뒤에 가져와서 출력 -->
<div class="text-center display-3 my-4">{{ sTitle1 }}</div>
<div class="text-center display-3 my-4">{{ sTitle2 }}</div>
<div class="text-center">
<v-btn fab large class="mt-5" color="teal" dark to="/main">
<v-icon>mdi-arrow-right</v-icon>
</v-btn>
</div>
</v-main>
</v-container>
</template>
<script>
export default {
// 라우터로 전달받은 값을 가져와서 데이터 속성에 저장함
data() {
return {
sTitle1: this.$route.params.p_param1,
sTitle2: this.$route.params.p_param2,
};
},
};
</script>뷰 프레임워크로 PWA 만들기
1. pwa by VueJS 미리보기
node.js 필요
npm install -g serve
npm install -g firebase-tools
npm run serve
npm run build (배포)
2. 프로젝트 제작하기
vue create .
vue add vuetify
public 폴더에 manifest.json파일 생성
manifest.json
{
"name": "Hello, World~ PWA By VueJS!!",
"short_name": "PWA by VueJS",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"size": "192x192",
"tyep": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"size": "512x512",
"tyep": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"orientaion": "portrait",
"background_color": "#ffffff",
"theme_color": "#ffffff"
}=> public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="manifest" href="manifest.json" />
<title>Hello, pwa by vue js</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
/>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>=> src/App.vue
<template>
<v-app>
<v-main>
<!-- fill-height는 브라우저 높이를 100%, 수직으로 가운데 정렬 -->
<v-container fluid fill-height>
<v-row>
<!-- text-center는 수평 가운데 정렬 -->
<v-col class="text-center" cols="12">
<!-- 타이포 스타일은 title, 글자색은 흰색으로 설정 -->
<h1 class="title white--text">Hello!</h1>
<p class="caption">By Vue.JS</p>
<img src="./assets/logo.png" alt="" />
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
name: "App",
created() {
//배경색을 다크모드로 함
//라이브싸이클..실행되는 시점
this.$vuetify.theme.dark = true;
},
};
</script>npm run build 후 npm serve로 확인
3. 워크박스로 오프라인 관리하기
워크박스란 무엇인가?
- 구글에서 제공하는 워크박스는 웹앱의 오프라인 기능을 지원하는 오픈소스 기반의 자바스크립트 라이브러리
- Vue-CLI 3부터는 워크박스를 기본으로 포함
- 반복적인 것은 자동화하고 상황에 따라 캐시를 손쉽게 사용할 수 있도록 많은 기능을 제공하여 편리성 제공
- 예: 스타벅스, 핀터레스트 , WIRED, Forbes
워크박스의 3가지 캐시 전략 이해하기
- Cache First, staleWhileRevalidate, Network First
| 캐시전략 | 방법 | 용도 | 대상 |
| Cache First | 캐시먼저사용 => 캐시에 없으면 그때 온라인 사용 |
캐시가 유용한 폰트, 이미지처럼 바뀔 가능성이 작을때 | 폰트, 이미지 |
| State While revalidate | 캐시먼저사용 => 캐시 내용이 변경되면 온라인에 접속해 변경된 것으로 교체 |
캐시가 유용하지만 사용자가 가끔씩 변경할 때 | 아바타 이미지, CSS, JS |
| Network First | 온라인에 먼저 접속해 사용 => 오프라인일때 캐시 사용 |
인터넷 기사처럼 항상 최신 내용이 가장 중요할 때 | HTTP요청 URL |
4. 파이어베이스 호스팅에 HTTPS로 PWA 배포하기 (구글에서 제공하는 aws 같은 기능)
파이어베이스란
실전에서 사용 가능한 높은 품질의 모바일 앱과 웹앱을 쉽고 빠르게 개발할 수 있도록 서버단에서 필요한 다양한 긴으을 클라우드 서비스로 지원하는 구글의 통합 플랫폼
예) 실시간 데이터베이스, 오픈 인증, 스토리지, 호스팅, 푸시알람서비스, 광고, 분석 등
파이어베이스 가격 정책
- spark 요금제 : 무료
- 사용 데이터가 일정 기준을 이상 늘어나면 : 유료
- 스타트업 기업처럼 비용을 아끼면서 초기에 테스트 서버 플랫폼이 필요할 때 유용
- 10개까지 못만들고 새로운걸 만들시 지우지말고 바꿔 써야함 삭제하면 추가할수 없음
firebase.google.com
console -
firebase login
firebase init
firebase deploy => git의 push와 같다고 생각하면 됨...
코드수정시 npm run build => firebase deploy 순으로 진행
5. PWA 성능 테스트하기
PWA의 성능을 테스트하는 방법
- 웹 성능, 웹 접근성, SEO 등
- 웹앱 매니페스트, HTTPS같은 PWA 서비스 요건을 평가에 집중
라이트하우스(LightHouse)
- 웹앱 성능을 분석하는 오픈 소스 자동화 도구
- 웹 사이트의 일반적인 성능과 PWA의 기능을 평가한 후 최고의 성능을 내기 위한 방법 분석 및 보완 목적
////////////////////
01. TO_DO 앱 구경하기
To-Do 앱 제작 목적 (CRUD)
할 일을 새로 만들고(C) 읽어오고(R) 수정하고(U) 삭제하는(D) 기능 구현
뷰 파이어란
- 뷰와 파이어베이스를 연결하여 손쉬운 코드만으로 실시간 데이터 기반의 동적인 웹 ui를 빠르게 렌더링 할 수 있도록 해주는 최적의 파이어베이스 데이터바인딩 라이브러리
- 파이어베이스를 이용해서 최신 웹 애플리케이션의 데이터 관리의 CRUD(Create, Read, Update, Delete)를 쉽고 빠르게 작업하도록 도와주는 솔루션
뷰를 통해서 생성된 PWA 템플릿
- 워크박스를 사용해 캐시를 체계적으로 관리
- 자동으로 index.html, css, js, txt 캐시
직접 원하는 파일만 캐시해야 할 상황 발생 시
- 워크박스 플러그인 모드 활용
워크박스가 제공하는 방식
- 서비스 워커 파일은 자동 생성 시, 작성한 로직을 서비스 워커에 추가할지 아니면 직접 코드를 함께 포함시킬지를 설정으로 결정
예) GenerateSW 플러그인 모드, InjectManifest 플러그인 모드
| 플러그인 모드 | 설명 |
| GenerateSW | 자동으로 생성되는 서비스 워커에 워크박스 옵션 지정 |
| InjectManifest | 서비스 워커에 자신의 코드를 직접 넣어 최종 서비스 워커 파일 생성 |
캐시의 종류
- 프리 캐시(pre-cache) : 실행 전에 미리 지정
- 런타임 캐시(runtime-cache) : 프로그램이 실행 중에 원하는 부분만 지정
캐시 플러그인 모드
- GenerateSW 플러그인 모드 : 프리캐시, 런타임 캐시를 간단한 설정값으로 처리
- InjectManifest 플러그인 모드 : 직접 캐시 정책과 프로그램 로직 추가
CRUD(Create,Read,Update, Delete)
- 데이터베이스의 기초 기능
CRUD를 간편하게 구현
- 파이어베이스에서 쉽게 구현할 수 있도록 뷰파이어를 적용
-- 기타 사항
윈도우 파워쉘로 지정
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
Set-ExecutionPolicy RemoteSigned
728x90