PWA 정리(1): 기초 정리

교재: Do it! 프로그레시브 웹앱 만들기 - 실습 github

연관 포스트:

1. PWA 정리(2): 구성 요소
2. PWA 정리(3): Vue & Vuetify
   
   

핵심 기술

• 서비스 워커
  

  웹 브라우저 안에 있는 분리되어서 항상 실행되는 백그라운드 프로그램, 푸시 알람에 사용

• 웹앱 매니페스토
  

  앱 소개 정보와 기본 설정을 담은 JSON 파일 “manifest.json”

• HTTPS
  

  보안 강화 웹 통신 규약, 홈 화면 추가 기능 제공

• 웹 API
  

  다양한 웹 API 사용 가능

변수

<!-- 함수 스코프, 중복 선언 시 값 덮어쓰기 -->
var a
<!-- 함수 & 블록 스코프, 같은 스코프에서 같은 이름 변수 사용 불가 -->
let a 
<!-- 초기 선언 값에서 변하지 않음 -->
const a = 1

함수

<!-- 기본 -->
function FnName() { }

<!-- 변수에 할당 가능 -->     
const fnPlusNumbers1 = function(n1, n2) { return n1 + n2; }

<!-- function 생략 가능: arrow function -->
const fnPlusNumbers2 = (n1, n2) => { return n1 + n2; }

<!-- return도 생략 가능 -->
const fnPlusNumbers3 = (n1, n2) => n1 + n2;
const fnPlusNumbers4 = n => n + 1;

<!-- 매개 변수가 없을 시에는 괄호 필수-->
const fnSayHello = () => '안녕하세요!';

라이브러리

• default library

    <!-- 만든 라이브러리: library_default.js -->
    const fnPlusNum = (n1, n2) => n1 + n2;
    export default fnPlusNum;
      
    <!-- import library-->
    import fnFunction from "./library_default.js";
  

• named library

    <!-- 만든 라이브러리: library_named.js -->
    const conHello = '안녕하세요';
    const fnPlusNum = (n1, n2) => n1 + n2;
    export {conHello, fnPlusNum};
      
    <!-- import library-->>
    import { conHello, fnPlusNum } from "./library_named.js";
    import * as myLibrary from "./library_named.js";
  

Callback & Promise

• callback 구조

    function A(numA) { console.log(numA); }
    function B(numB, fnCallback){ fnCallback(numB); }
  
    B(10, A)
  
    <!-- 과정 -->
    >> B(10, A) { A(10); }
    >> A(10)
    >> log: 10
  

• 재귀 함수로 사용하면 가독성이 떨어지고, 유지 보수 힘듦
• Fetch API: CRUD(create, read, update, delete)

    <!-- fetch data from local -->
    fetch('./data.json')
           .then(pResponse => pResponse.text())
           .then(pJSON => console.log(pJSON));
  
    <!-- fetch data remote -->
    fetch('https://jsonplaceholder.typicode.com/posts/1')
          .then(pResponse => pResponse.text())
          .then(pJSON => console.log(pJSON))
  

  • pResponse.text(): 응답을 읽고 텍스트 반환
  • pResponse.json(): 응답을 읽고 JSON 반환
  • etc…
• Promise
  
  • Prominse는 비동기 처리 방식(독립적으로 실행&별도로 처리) 사용, 결과의 성공과 실패 관리
  • 코드를 실행할 함수 생성 부분과 결과 반환 받는 부분으로 나누어 작성
  • 여러가지를 사용할 때, 처리 속도는 다 다르지만 실행 순서 보장

  • <button onclick=
        "console.log('Promise 시작!');
        let bStatus = Math.random() > 0.5;
        fnCreatePromise(bStatus)
            .then(pResult => console.log(pResult)) //성공
            .catch(pErrorMsg => console.log(pErrorMsg)); //실패
        console.log('Promise 종료');">상품 배송 시작!</button>
    
    
      function fnCreatePromise(pStatus){
              // 성공하면 fnResolve 실행, 실패하면 fnReject 실행
              // 각 함수 안의 값의 return 해준다(?)
              return new Promise((fnResolve, fnReject) => {
                  setTimeout(() => {
                      if (pStatus) //
                          fnResolve('배달이 성공적으로 완료되었습니다');
                      else 
                          fnReject('죄송합니다 아직 상품이 준비되지 못하였습니다');
                  }, 3000);
              });
          }
    
    /* 결과 
    Promise 시작!
    Promise 종료
    배달이 성공적으로 완료되었습니다/죄송합니다 아직 상품이 준비되지 못하였습니다 */
    

await & async

• Promise로 비동기 처리를 하였으나, 동기와 비동기 처리를 다 사용할 수 없음
  그래서 await과 async 사용
• await은 결과가 나올 때까지 기다림
  하지만 무한 루프에 빠질 수 있음
• async가 이를 막아줌
  

  async function fnA() {
    console.log(await fnB(1, 100));
    // fnB는 Promise 객체
  }