• Lorem ipsum ?
  • Lorem ipsum Generator
• Book Review
  • 개요
  • PWA (Progressive Web App )
  • 05-5 상탯값 관리와 Vuex
  • 06-3 기본 레이아웃 만들기 2
  • 06-4 카드 UI 만들기
  • 06-5 그리드 기본 원리
  • 06-7 리스트와 아이콘 사용법
  • 07-2 탐색 서랍
  • 08-3 워크박스로 오프라인 관리하기
  • 08-5 HTTPS로 파이어베이스 호스팅에 PWA 배포하기
  • 08-6 PWA 성능 테스트하기
  • 09-2 매니페스트 작성하기
  • 09-3 워크박스로 오프라인 관리하기
    • 워크박스 플러그인 모드 이해하기
  • 10-3 워크박스로 런타임 캐시 관리하기
  • 10-5 모바일 기기에서 로컬 사이트 테스트하기
  • 11-1 카메라 사진 갤러리 앱 구경하기
• pwa 프로젝트 시작 방법
  • 절차

Lorem ipsum ?

• #lorem-ipsum
• 로렘 입숨?
  • 라틴어 원문에서 유래, 별 의미없이 콘텐츠를 채우기 위한 재료로서 많이 씀.
• 이 개념을 이용하여 텍스트 뿐만 아니라 그림등등 데모 사이트를 채우는 콘텐츠를 제공하는 곳이 있음
• 로렘 입숨 뜻: 그래픽 디자인에서 쓰이는 더미 텍스트 - 새로 시작하는 블로그

Lorem ipsum Generator

• Lorem Ipsum 텍스트 버전
  • loremipsum.io : 텍스트 + 이미지
  • Web FX , Lorem Ipsum Generator
  • 프로페셔널 제너레이터
• 한글 Lorem Ipsum
  • 한글 입숨
  • 한글 Lorem Ipsum
• RANDOM USER Generator : Lorem Ipsum의 사람 버전
• 로렘 픽섬 웹 사이트 : Lorem Ipsum의 사진 버전
• Fake Name Generator : 여러가지 제너레이터
  • 이곳에 Smiley Generator의 컨셉이 괜찮아 보임
• 픽셀 미: 사진을 픽셀아트로 바꿔줌
  • 사진을 그대로 사용하는 것이 찜찜할 때
    • 그림으로 변환후 사용

Book Review

개요

저자: 김응석 책제목 : Do it! 프로그레시브 웹앱 만들기 부제 : 구글, MS, 삼성이 주목하는 차세대 웹 기술 출판사 : 이지스퍼블리싱 ISBN : 979-11-6303-176-5 값: 32,000원

PWA (Progressive Web App )

• App 용어의 유래 : 2009년 David Pogue의 앱폰을 정의한 컬럼 에서 App, Mobile App이란 용어가 파생
• Progressive Web App Logo
• 모질라의 PWA 페이지

05-5 상탯값 관리와 Vuex

06-3 기본 레이아웃 만들기 2

• font Awesome icons

• 머티리얼 디자인 아이콘

• v-content API : 사용할 수 있는 모든 영역을 본문으로 잡음
• v-container API : 적절한 여백을 자동으로 부여

• 위 두 엘리먼트는 순서에 주의 : v-content ▶ v-container 순서

• Typography

06-4 카드 UI 만들기

• 로렘 픽섬 웹 사이트 : Lorem Ipsum의 사진 버전

06-5 그리드 기본 원리

• Vuetify Gird System의 Material Design Breakpoints표
• 책 정오표 확인
• <v-row text-center> 가 아니라 <v-row class="text-center">임. Vuetify 판올림으로 변경

06-7 리스트와 아이콘 사용법

• 59~80 JSON 데이터 준비

• data 속성 선언시 A방식과 B방식이 있음

  A 방식 (data 속성 선언)	B방식 (함수 선언)
  data { aList: [ {값1}, {값2}] }	data() { return { aList: [ {값1}, {값2}] } }

• B방식은 컴포넌트별로 자신만의 메모리를 할당받게 할때 필요. 주로 사용 하는 방식

07-2 탐색 서랍

• RANDOM USER Generator : Lorem Ipsum의 사람 버전

08-3 워크박스로 오프라인 관리하기

• 구글 워크박스: 웹앱의 오프라인 기능을 지원하는 자바스크립트 라이브러리
  • pwa의 장점인 offline first의 기능을 쉽게 구현, 오픈소스 모듈로 지원
• 캐시가 필요한 4가지 경우
  • HTML, JS, CSS
  • 글꼴, 아이콘 파일, 구글 폰트, 구글 머티리얼 디자인 아이콘
  • 이미지 파일
  • HTTP 요청: URL
• 워크박스 전략 : 책에서는 3가지만 소개되었지만 총5가지 있는듯..
  • Stale-While-Revalidate
    • 절차
      1. 캐시에 먼저 요청
      2. 만약 내용이 있으면
      3. 결과를 보여줌
      4. 동시에 서비스 워커는 인터넷에 접속
      5. 캐시된 내용이 원본과 같은지 확인. 다르면 캐시를 원본으로 교체
    • 캐시 먼저 사용 ▶ 캐시 내용이 변경되면 온라인에 접속해 변경된 것으로 교체
    • 최신의 리소스가 반드시 필요한 것은 아닐때 사용
    • 예: 아바타 아미지, CSS, JS

    
    1
    2
    3
    4
    5
    6
    7
    
    import {registerRoute} from 'workbox-routing';
    import {StaleWhileRevalidate} from 'workbox-strategies';
    
    registerRoute(
      ({url}) => url.pathname.startsWith('/images/avatars/'),
      new StaleWhileRevalidate()
    );
    
    

  • Cache First ( Cache Falling Back to Network )
    • 절차
      1. 캐시에 먼저 요청
      2. 만약 내용이 있으면 결과를 보여줌
      3. 내용이 없으면, 인터넷에 접속
      4. 결과를 화면에 보여줌. (읽어온 내용은 캐시에 저장)
    • 캐시 먼저 사용 ▶ 캐시에 없으면 그때 온라인 사용
    • 폰트, 이미지처럼 바뀔 가능성이 적을 때
    • 예: 폰트, 이미지

    
    1
    2
    3
    4
    5
    6
    7
    
    import {registerRoute} from 'workbox-routing';
    import {CacheFirst} from 'workbox-strategies';
        
    registerRoute(
      ({request}) => request.destination === 'style',
      new CacheFirst()
    );
    
    

  • Network First ( Network Falling Back to Cache )
    • 절차
      1. 인터넷 접속을 먼저 요청
      2. 접속이 성공하면 결과를 보여주고
      3. 그 내용을 캐시에 반영
      4. 만약, 문제가 생기면 2단계로 넘어가 캐시에서 읽어서 화면에 표시함
    • 온라인에 먼저 접속해 사용 ▶ 오프라인일 때 캐시 사용
    • 인터넷 기사처럼 항상 최신 내용이 중요할 때
    • 예: HTTP 요청 URL

    
    1
    2
    3
    4
    5
    6
    7
    
    import {registerRoute} from 'workbox-routing';
    import {NetworkFirst} from 'workbox-strategies';
        
    registerRoute(
      ({url}) => url.pathname.startsWith('/social-timeline/',
      new NetworkFirst()
    );
    
    

  • Network Only
    • 캐시를 사용하지 않고 반드시 Network를 사용해야 하는 특정 request가 있을때
    • 예: admin 으로 접속해야할 때?

    
    1
    2
    3
    4
    5
    6
    7
    
    import {registerRoute} from 'workbox-routing';
    import {NetworkOnly} from 'workbox-strategies';
        
    registerRoute(
      ({url}) => url.pathname.startsWith('/admin/',
      new NetworkOnly()
    );
    
    

  • Cache Only
    • response가 반드시 캐시로부터만 얻어지도록 보장한다.
    • 흔한 경우는 아니지만, 자신만의 precaching 단계가 있다면 유용하게 사용할 수 있는 전략이다.

    
    1
    2
    3
    4
    5
    6
    7
    
    import {registerRoute} from 'workbox-routing';
    import {CacheOnly} from 'workbox-strategies';
        
    registerRoute(
      ({url}) => url.pathname.startsWith('/app/v2/',
      new CacheOnly()
    );
    
    

08-5 HTTPS로 파이어베이스 호스팅에 PWA 배포하기

• 구글 파이어베이스: 백엔드 기능 지원

08-6 PWA 성능 테스트하기

• 크롬 확장 기능 ‘라이트하우스’: 웹앱 성능을 분석하는 오픈소스 자동화 도구

09-2 매니페스트 작성하기

• 뷰파이어란? : Vue와 파이어베이스를 연결해 실시간 데이터를 기반으로 동적인 웹 UI를 렌더링할 수 있게 해주는 데이터 바인딩 라이브러리

09-3 워크박스로 오프라인 관리하기

워크박스 플러그인 모드 이해하기

• 워크박스 웹팩 플러그인
  • 워크박스는 두개의 웹팩 플러그인을 제공한다.
    • 하나는 완전한 service worker를 generate 한다
    • 다른 하나는 service worker 파일에 주입(inject)하려고 precache될 asset의 목록을 생성한다.
  • Generate SW plugin : service worker 파일을 생성하여 webpack asset pipeline에 추가한다
    • 언제 사용 하나?
      • 파일을 precache 할 때
      • 간단한 설정을 할 필요가 있을 땡 (즉, configuration이 니가 직접 routes와 strategies를 정의하도록 허용한다.??)
    • 사용하지 말아야 할 때
      • Web Push와 같은 다른 Service Worker 기능을 사용하려고 할 때
      • 추가적인 스크립트나 추가적인 로직을 import하길 원할 때
  • InjectManifest plugin : precache할 URL의 목록을 생성하고 해당하는 precache manfest를 기존의 서비스 워커 파일에 추가한다. 아니면 파일을 그대로 둔다.
    • 언제 사용 하나?
      • service worker에 대해 더 많은 제어가 필요할 때
      • 파일을 precache 하고자 할 때
      • 라우팅 관련하여 더 복잡한 요구조건이 있을 때
      • 다른 API(예를들어, web Push)와 함께 service worker를 사용하고자 할 때
    • 사용하지 말아야 할 때
      • 간단한 방법으로 당신의 사이트에 service workder를 붙이고 싶을때

10-3 워크박스로 런타임 캐시 관리하기

• 서비스 워커의 런타임 캐시 설정
  • 앱을 실행하는 중간에 필요한 내용을 캐시하는 것을 의미
  • 앞에서 설명한 프리캐시와 비교해 볼 것
• 프리캐시 (pre-cache) : 서비스 워커가 등록될 때 미리 원하는 파일만 지정하여 캐시
  • 빠르고 손쉬움
  • 다양한 요구조건을 충족시키기 어려움
• 런타임 캐시 (runtime-cache) : 프로그램 로직에 따라 앱실행중 캐시
  • 앞 절에서 살펴본 5가지 전략이 있음

10-5 모바일 기기에서 로컬 사이트 테스트하기

• #ngrok
• ngrok
  • NATs과 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출시켜 준다
  • 서버에 올리지 않고도 로컬 상태에서 모바일로 접속해볼 수 있다.
  • ngrok 문서 에 자세한 설명을 참조해볼 것
• 2021-05-10 테스트시 별 문제 없이 동작함
• ngrok 적용 방법
  • Step 1. : 설치

    
    1
    
    > npm install -g ngrok
    
    

  • Step 2. : 초기설정
    • 프로젝트 root의 vue.config.js 파일
      • disableHostCheck 항목을 true로 설정
    • next, npm run serve로 ngrok 실행
    • 위 설정이 없다면 Invalid Host header 오류 발생
      • 관련된 문의 응답은 여길 참조

        
        1
        2
        3
        4
        5
        6
        7
        
        // ex10_start/vue.config.js
        module.exports = {
        ...
        devServer: {
        disableHostCheck: true
        }
        }
        
        

  • Step 3. : 개발자 모드로 프로젝트 실행 ▶ 로컬 호스트의 포트 번호 확인

    
    1
    2
    3
    4
    5
    6
    
    > npm run serve
    ...
    
    App running at:
    - Local: http://localhost 8080   //<--  포트번호 8080 확인
    - Network: http://192.168.0.03:8080
    
    

  • Step 4. 터미널에서 ngrok 실행 하여 해당포트 설정

    
    1
    
    > ngrok http 8080
    
    

  • Step 5. ngrok 결과로 출력되는 프로토콜의 주소로 모바일 접속

    
    1
    2
    3
    4
    
    ...
    Forwarding             http://ead3~4.ngrok.io ->  http://localhost:8080 
    Forwarding             https://ead3~4.ngrok.io ->  http://localhost:8080 
    ...
    
    

11-1 카메라 사진 갤러리 앱 구경하기

pwa 프로젝트 시작 방법

절차

1. 프로젝트 만들기

   
   1
   
     > vue create <project_name>
   
   

2. 질문 답변:
3. Please pick a preset: Manually select features * default를 선택하면 - babel과 eslint가 설치됨.
4. Check the features needed for your project: 프로젝트에 따라 다르게 선택
5. 분기 1. Router를 선택한 경우
   1. Use history mode for router ?
6. 코드 수정후 확인
7. 서비스 워커로 직접 확인 1. 서비스 워커 모드 실행

   
   1
   2
   
    > npm run build
    > serve dist
   
   

8. 서비스 워커 생략하고 화면 표시만 테스트 1. 개발자 모드 실행

   
   1
   
    > npm run serve
   
   

9. 모바일 기기에서 로컬 사이트 테스트