마카로닉스

2060 No

vue pwa 사진 갤러리 앱 만들기- 1 ★

2023-03-02 22:52:05 By 라이트 0 802 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

기본적으로 nodejs 설치 및 vue 와 Vue CLI 설치 되어 있어야 한다.

nodejs 설치

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">&copy; 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",
  },

PHRASE

Level 60 라이트

좋은 가르침(法)을 듣고 그 가르침에 따르는 사람은 넘기 어려운 죽음의 영역을 넘어서 피안에 이른다. -법구경

vue

vue pwa 사진 갤러리 앱 만들기- 1 ★

PHRASE

Level 60 라이트

댓글 ( 4)

댓글 남기기

Categories

vue Recent List more

Tags Widget

Welcome

vue 목록 more

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30