04/26 (월) ~ 05/02 (일)
 view github

Lorem ipsum ?

Lorem ipsum Generator

Book Review

개요

표지 저자: 김응석
책제목 : Do it! 프로그레시브 웹앱 만들기
부제 : 구글, MS, 삼성이 주목하는 차세대 웹 기술

출판사 : 이지스퍼블리싱
ISBN : 979-11-6303-176-5

값: 32,000원

PWA (Progressive Web App )

05-5 상탯값 관리와 Vuex

*

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

06-4 카드 UI 만들기

06-5 그리드 기본 원리

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

  • 59~80 JSON 데이터 준비

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

    A 방식 (data 속성 선언) B방식 (함수 선언)
    data { aList: [ {값1}, {값2}] } data() { return { aList: [ {값1}, {값2}] } }
  • B방식은 컴포넌트별로 자신만의 메모리를 할당받게 할때 필요. 주로 사용 하는 방식

07-2 탐색 서랍

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

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

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

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/',
  new NetworkFirst()
);
    • Network Only Network Only Img
      • 캐시를 사용하지 않고 반드시 Network를 사용해야 하는 특정 request가 있을때
      • 예: admin 으로 접속해야할 때?
      import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/admin/',
  new NetworkOnly()
);
    • Cache Only Cache Only Img
      • response가 반드시 캐시로부터만 얻어지도록 보장한다.
      • 흔한 경우는 아니지만, 자신만의 precaching 단계가 있다면 유용하게 사용할 수 있는 전략이다.
      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. : 설치 
      > npm install -g ngrok
    • Step 2. : 초기설정
      • 프로젝트 root의 vue.config.js 파일
        • disableHostCheck 항목을 true로 설정
      • next, npm run serve로 ngrok 실행
      • 위 설정이 없다면 Invalid Host header 오류 발생
        • 관련된 문의 응답은 여길 참조 
          // ex10_start/vue.config.js
module.exports = {
...
devServer: {
disableHostCheck: true
}
}
    • Step 3. : 개발자 모드로 프로젝트 실행 ▶ 로컬 호스트의 포트 번호 확인 
      > npm run serve
...

App running at:
- Local: http://localhost 8080   //<--  포트번호 8080 확인
- Network: http://192.168.0.03:8080
    • Step 4. 터미널에서 ngrok 실행 하여 해당포트 설정 
      > ngrok http 8080
    • Step 5. ngrok 결과로 출력되는 프로토콜의 주소로 모바일 접속 
      ...
Forwarding             http://ead3~4.ngrok.io ->  http://localhost:8080
Forwarding             https://ead3~4.ngrok.io ->  http://localhost:8080
...

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

pwa 프로젝트 시작 방법

절차

  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. 서비스 워커 모드 실행 
     > npm run build
 > serve dist
  8. 서비스 워커 생략하고 화면 표시만 테스트 1. 개발자 모드 실행 
     > npm run serve
  9. 모바일 기기에서 로컬 사이트 테스트

The following wiki, pages and posts are tagged with

TitleTypeExcerpt