2060
No
기본적으로 nodejs 설치 및 vue 와 Vue CLI 설치 되어 있어야 한다.
nodejs 설치
https://nodejs.org/ko/download/
nodejs 설치 후
vue 설치
npm install vue
명령을 사용하여 설치한 버전 번호를 확인합니다(vue --version).
Vue CLI를 설치하려면 npm을 사용합니다. 업그레이드하려면 -g 플래그를 사용하여 전역으로 설치해야 합니다(vue upgrade --next).
1 npm install -g @vue/cli
결과물
1. cli 로 프로젝트 만들기
1) & vue create sample-pwa
2) 뷰티파이 설치
vue add vuetify
2.매니페스트 작성하기
public/manifest.json
{
"name": "사진 갤러리",
"short_name": "사진 갤러리",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#ffffff"
}
3. vue.config.js 에서 런타임 캐시 추가하기
런타임 캐싱
런타임 캐싱이란 웹 애플리케이션을 동작 시킬 때 발생하는 요청에 대해 서버 응답을 캐시 스토리지에 저장하는 캐싱 방법을 말합니다. 보통 이미지와 같은 리소스는 파일 용량이 커서 처음 페이지 접속할 때 서비스 워커 설치 시간이 길어지므로 런타임 캐싱으로 하는게 좋습니다.
https://joshua1988.github.io/vue-camp/pwa/workbox-caching.html#런타임-캐싱
module.exports = {
pwa: {
workboxOptions: {
runtimeCaching: [
{
urlPattern: /\.png$/,
handler: "CacheFirst",
options: {
cacheName: "png-cache",
expiration: {
maxEntries: 10, // 총 파일 10개까지 캐시
maxAgeSeconds: 60 * 60 * 24 * 365, // 1년 캐시
},
},
},
{
urlPattern: /\.json$/,
handler: "StaleWhileRevalidate",
options: {
cacheName: "json-cache",
cacheableResponse: {
statuses: [200],
},
},
},
],
},
},
transpileDependencies: ["vuetify"],
devServer: {
historyApiFallback: true,
allowedHosts: "all",
},
};
4. 앱 실행 화면 만들기
1) publi/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">
<title>사진 갤러리</title>
<!-- 구글 머티리얼 디자인 아이콘 추가-->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<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 ex10 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>
2)datasources/picture-data.js 파일 추가
export default {
aPictures: [{
'id': 1,
'url': 'https://farm1.staticflickr.com/654/22663129542_e3df218c90_b.jpg',
'title': '청춘플랫폼_우수부스투표',
'info': '졸업작품 전시회에 출품한 작품 중에서 방문자들이 직접 우수 전시 부스를 투표로 선정하는 모습입니다.'
},
{
'id': 2,
'url': 'https://farm1.staticflickr.com/739/22663128752_7b347e01a9_b.jpg',
'title': '전시장모습',
'info': '전시가 열렸던 예술의 전당 전시실 안의 모습입니다. '
},
{
'id': 3,
'url': 'https://farm1.staticflickr.com/674/22055529403_aeeb5fc371_b.jpg',
'title': 'pc실습실',
'info': '윈도우OS 환경에서 다양한 멀티미디어디자인 S/W를 실습하는 공간입니다.'
},
{
'id': 4,
'url': 'https://farm1.staticflickr.com/706/22650669476_d8bf33c153_b.jpg',
'title': '졸업작품전시회 주제',
'info': '청춘 플랫폼이라는 주제로 젊은 열정이 펼쳐지는 무대가 마련되었습니다.'
},
{
'id': 5,
'url': 'https://farm1.staticflickr.com/677/22055530223_91e3f73227_b.jpg',
'title': '명함디자인',
'info': '자신의 미래 모습을 담은 명함을 직접 디자인하고 인쇄 제작하여 전시한 모습입니다.'
},
{
'id': 6,
'url': 'https://farm1.staticflickr.com/777/22650669326_e180cd84ca_b.jpg',
'title': '전시_방명록',
'info': '전시장을 방문한 관객들의 다양한 소감을 방명록의 기록으로 남겨졌습니다.'
},
{
'id': 7,
'url': 'https://farm1.staticflickr.com/759/22687855771_92dc8b3245_b.jpg',
'title': '매킨토시 실습실',
'info': '맥OS 환경에서 멀티미디어디자인 관련 S/W를 사용하여 작업하기 위한 맥 실습실입니다.'
},
{
'id': 8,
'url': 'https://farm6.staticflickr.com/5646/22053918354_ee031eae46_b.jpg',
'title': '캘리그래피_디자인',
'info': '학생들이 직접 디자인한 아날로그 정서의 캘리그래피 작품입니다.'
},
{
'id': 9,
'url': 'https://farm1.staticflickr.com/762/22687856291_963df9b90a_b.jpg',
'title': '실습실복도',
'info': '전공존에 따라 색상이 그룹으로 연결된 실습실 복도 모습입니다.'
},
{
'id': 10,
'url': 'https://farm1.staticflickr.com/766/22055529593_c162dc3143_b.jpg',
'title': '인터뷰_촬영',
'info': '졸업작품을 준비한 학생들의 과정을 인터뷰의 기록으로 남기는 모습입니다. '
},
{
'id': 11,
'url': 'https://farm6.staticflickr.com/5775/22053918014_f0e0873b7c_b.jpg',
'title': '전시_메모',
'info': '관객들이 전시를 보면서 느낀 점을 간단한 메모의 글로 남긴 흔적입니다.'
},
{
'id': 12,
'url': 'https://farm6.staticflickr.com/5672/22055530083_8f633d57f3_b.jpg',
'title': '종이컵_캘리그래피',
'info': '종이컵을 캔버스 삼아 학생들의 자유로운 생각을 캘리그래피의 작품으로 제작한 종이컵 아트워크입니다.'
}
]
}
2) App.vue
<template>
<v-app>
<!-- 툴바에 제목과 버튼 삽입 -->
<v-app-bar app color="blue-grey" dark fixed>
<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>more_vert</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<v-row class="mt-5">
<!-- 기기별로 그리드의 크기 설정 -->
<v-col cols="12" sm="6" md="4" lg="3" xl="2" v-for="item in this.aPictures" :key="item.key">
<!-- 카드 UI 에 사진 담아내기 -->
<v-card height="450px">
<v-img class="bg-white" height="300" :aspect-ratio="1"
:src="item.url" corver
></v-img>
<v-card-title>
<h1 class="title grey--text text--darken-3 mb-3">{{ item.title}}</h1>
<p class="body-2 grey--text">{{ item.info }}</p>
</v-card-title>
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
<!-- 바닥글 고정 -->
<v-footer fixed>
<div class="max-auto">© CODE-DESIGN.web.app</div>
</v-footer>
</v-app>
</template>
<script>
import oPictureData from "@/datasources/picture-data";
export default {
data(){
return{
'aPictures' : oPictureData.aPictures
}
},
name:'App'
}
</script>
5. 앱 실행 하기
1)만약에 서비스 워커는 생략하고 화면 표시만 테스트하고 싶다면 개발자 모드 실행한다.
npm run serve
2)서비스 워커의 동작 여부를 확인하려면
npm run build serve dist
기타 :
모바일 기기에서 로컬 사이트 테스트하기
ngrok로 테스트하기
npm i -g ngrok
vue.config.js 파일에 다음을 추가
devServer: {
historyApiFallback: true,
allowedHosts: "all",
},
댓글 ( 4)
댓글 남기기