이근둥
근둥이의 블로그
이근둥
전체 방문자
874,952
오늘
323
어제
187

공지사항

  • 전체보기 (107)
    • 웹 (9)
    • 언어 & 프레임워크 (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • React Native (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • 컴퓨터 과학 (3)
      • 알고리즘 (0)
      • 자료구조 (3)
    • 기타 (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • 일상 (13)
      • 게임 (13)
    • 칼럼 (9)
      • 회고 (0)
      • 나만의 글 (0)
      • 제품 리뷰 (9)
    • __Dev__ (9)
      • Release (9)
반응형

인기 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • [Tomcat] 아파치 톰캣 서버 포트 변경하기
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포트 변경하기
  • [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스 만들기(5) - 채팅⋯
  • [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
    2017.12.19
    [C/C++] 콘솔게임 프로그래밍 (1) - 프로젝트 생성⋯
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

태그

  • javascript
  • vue.js
  • pwa
  • Hello World!
  • 자바 프로젝트
  • Vue 3
  • WWDC
  • AstroWar
  • ES6
  • 자바
  • 전개 구문
  • 프로그레시브 웹 앱
  • 웹 확장
  • WWDC20
  • composition-api
  • vuex
  • Composition API
  • spread syntax
  • 이클립스
  • Deemo
  • 이펙트
  • 파티클
  • self
  • vue
  • Java FX
  • java
  • vue-next
  • vue3
  • 출간
  • Scanner

최근 댓글

  • 어디에서도 이런 친절한 설명은 받을 수 없었습니다. 응용⋯
    미쳤다...
  • 정말 너무 감사합니다 선생님 많은 도움이 되고있습니다 어떻⋯
    김준태
  • 커서 위치이동 함수까지 했는데 컴파일하면 Makefile.⋯
    Qour94
  • iOS의 경우 애플에서 개발하고 있는 webkit 엔진을 ⋯
    이근둥
  • android, IOS에서 된다고 했는데 Notifica⋯
    삽자루부대

최근 글

  • 웹 푸시 알림(Web Push Notification)
    2022.06.13
    웹 푸시 알림(Web Push Notification)
  • 스택(Stack)
    2022.05.26
    스택(Stack)
  • 배열(Array)
    2022.05.25
    배열(Array)
  • C언어로 배우는 자료구조
    2022.05.24
    C언어로 배우는 자료구조
  • [Vue 3] Composition API와 템플릿 참조(⋯
    2020.10.02
    [Vue 3] Composition API와 템플릿 참조(⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
hELLO · Designed By 정상우.
이근둥

근둥이의 블로그

[PWA] 프로그레시브 웹 앱 시작하기 (1) - PWA란?
웹

[PWA] 프로그레시브 웹 앱 시작하기 (1) - PWA란?

2019. 1. 9. 21:35
반응형

[ 공지 ]

프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!

 

현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,

하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.

 

(도서 소개 및 실습 미리보기)

https://geundung.dev/106

 

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대�

geundung.dev

 

 

 

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

(구매 링크 / 2020.07.31 출간)

[YES24]

[교보문고]

[알라딘]

[인터파크도서]

 

 

프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지

상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.

 

 


 

안녕하세요~

 

오랜만에 새로운 강좌를 작성해보려고 합니다.

 

 

 

요즘 웹 기술 트렌드인 SPA (Single Page Application) 라이브러리/프레임워크 3대장으로 인해 웹 분야가 많이 핫해졌습니다.

3대장이라면 아직까진 React, Vue.js, AngularJS인 것 같습니다.

 

 

 

SPA 라이브러리/프레임워크도 웹 분야에서 손꼽히는 친구들이지만 PWA(Progressive Web App)도 큰 관심을 불러오고 있습니다.

 

 

 

 

이번 강좌에서는 PWA에 대해 알아보고 직접 PWA를 개발하는 실습을 진행할 예정입니다.

 

먼저, 강좌를 학습하시기 전에 미리 알고계셔야할 내용이 조금 있습니다.

 

 

- 기본 HTML, CSS

- 자바스크립트 기초

- 구글 크롬 개발자도구 사용법

 

 

자바스크립트의 경우 웹 개발 경험이 있으시다면 좋습니다.

또한   ES6  문법에 대해 알고계시다면 더 쉽게 따라오실 수 있습니다.

 

 

관련 지식이 없는 분들은 개발하기엔 어려움이 있으니 웹 개발 기초를 익히고 학습하시는게 좋습니다.

저는 아래 강좌를 추천합니다.

 

[생활코딩 웹 애플리케이션 만들기]

https://opentutorials.org/course/1688

 

 

 

그럼 본격적으로 첫 번째 PWA 강좌를 시작하도록 하겠습니다!

 


 

[0. 사전 준비]

 

 

먼저 실습에 필요한 구글 크롬과 기본 소스코드, 심플서버를 다운로드 받습니다.

 

 

[ 구글 크롬 ]

https://www.google.com/intl/ko_ALL/chrome/

이미 크롬 브라우저를 사용하고 계신다면 최신버전으로 업데이트 한 번 진행해주세요!

 

 

[ 심플서버 ]

https://github.com/leegeunhyeok/simple-server/releases/latest

Assets에 있는 파일 중 exe 파일을 다운로드 받고 설치해주세요

 

 

[ 소스 코드 ]

https://github.com/leegeunhyeok/pwa-example

 

빨간 네모로 표시한 Clone or download를 누른 후 zip 파일을 다운받아주세요!

그리고 적당한 위치에 압축을 풀어주시면 됩니다.

 

풀어주신 후 ch1 폴더를 사용합니다.

매 강좌에 맞는 챕터별로 자료가 준비되어있으니 해당 챕터에 맞는 폴더의 소스코드를 사용하시면 됩니다!

 

압축을 풀어보시면 위와 같은 구조로 되어있습니다.

 

images: 예제에 사용할 이미지들과 PWA 아이콘 파일

scripts: 스크립트 파일이 들어있구요

styles: 스타일시트

index.html: 메인 HTML

manifest.json: PWA 매니페스트 파일

service-worker.js: 서비스워커 스크립트 파일

 

 

웹 개발을 하셨던 분들도 manifest.json과 service-worker.js가 어디에 쓰일지는 아직 모르실겁니다.

PWA에 대해 알아보며 하나씩 배워나가봅시다!

 


 

[1. PWA란?]

 

 

구글 코드랩에 좋은 실습 내용과 설명이 있습니다.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko

 

PWA는 Progressive Web App의 약자로, 웹의 장점과 앱의 장접을 결합한 환경입니다.

 

 

웹이랑 앱이라니..  조금 생소하실 수 있습니다.

그렇다고 해서 네이티브 (리액트 네이티브 등) 앱도 아닙니다.

 

 

브라우저에서 지원하는 앱이라고 생각하시면 조금 이해하기 쉬워집니다.

기존의 앱은 플레이스토어, 앱스토어 등을 통해 다운로드 & 설치를 해야만 했습니다.

 

PWA는 지원하는 웹 브라우저를 통해 설치 없이!

페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있고

언제든지 푸시알림을 통해 재참여가 가능합니다!

또한 오프라인에서도 웹 앱에 접근 가능합니다.

 

 

그 외에도 아래와 같은 특징을 가지고 있습니다.

 

 

[ 구글 코드랩 ]

 

 

 

 

무엇보다 사용자들이 편리하게 사용할 수 있다는것이 가장 큰 장점인 것 같습니다.

귀찮은 다운로드와 설치 과정 없이 URL 접속 후 사용자가 원한다면 바탕화면에 앱 아이콘을 추가하고 언제든지 빠르게 접속할 수 있기 때문이죠

 

 

그렇다고 해서 PWA에 장점만 있는것이 아닙니다.

오래된 브라우저들은 PWA를 지원하지 않습니다. (자바스크립트 문법을 생각해보시면 이해가 빠릅니다)

지원하지 않는 브라우저에서는 웹 푸시 알림, 오프라인접속, 앱 셸 캐싱 등 강력한 기능을 사용하지 못할 뿐더러 바탕화면에 웹 앱을 추가할 수 없습니다.

 

최신 브라우저들은 대부분 지원하고 있기 때문에 PWA에 대해 배워두면 큰 도움이 될 것 입니다.

 

 

 

 

 

위 특징 리스트 중 연결 독립적 항목이 있습니다.

서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 한다 라고 되어있습니다.

 

서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동합니다.

스크립트이긴 한데 웹 페이지와 직접적으로 상호작용할 수 없습니다.

 

기존에는 스크립트를 작성하고 DOM 조작, 데이터 요청 등을 통해 웹 페이지를 제어하며 상호작용했지만 서비스워커는 그렇지 않습니다.

서비스워커는 웹 푸시(알림), 백그라운드 동기화, 캐싱 등의 기술적 기반을 제공합니다.

 

 

 

 

위에서 앱 셸, 오프라인 환경, 캐싱 등 이런 내용이 몇 번 언급되었습니다.

기본적으로 오프라인 상태로 웹 브라우저를 통해 URL로 접속을 하면 네트워크가 없어서 접속할 수 없다는 메시지가 뜹니다.

그런데 오프라인 환경에서 접속할 수 있는 이유는 바로 서비스워커의 캐싱 덕분입니다.

 

아래 그림을 봅시다

 

[구글 코드랩]

 

 

위 사진은 평범한 앱처럼 보입니다. 만약 웹으로 위와 같은 디자인의 웹 앱을 구현했다고 가정합시다.

상단바, 메뉴, 배경이미지 등 이런 요소들은 바뀔 필요가 없는 요소입니다.

바뀌고 변화하는 부분은 Content 즉, 블로그로 가정하면 글 목록이 여기에 해당되죠

 

PWA에서는 상단바, 메뉴 등 고정적인 컴포넌트를 앱 셸이라고 말합니다.

이러한 앱 셸들을 브라우저가 캐싱해두면 오프라인 상태라고 해도 앱 셸은 정상적으로 불러올 수 있겠죠.

 

오프라인이기 때문에 새로운 컨텐츠는 불러오지 못하더라도 앱의 기본 요소들은 캐시된 데이터로 로드가 가능합니다.

우리가 원한다면 컨텐츠도 캐싱해두어 오프라인 상태에서 불러올 수도 있습니다.

 

 

 

 

지금까지 알아본 내용을 간단히 요약하자면 아래와 같습니다.

 

1. 웹 브라우저를 통해 실행하는 앱

2. 푸시알림, 오프라인 환경 접속 등 원시 앱과 유사

3. 서비스워커는 독립적으로 실행되며 웹 푸시, 캐싱 등 기능 제공

 

 

실제로 구현해보면 어떤 느낌인지 감이 오실겁니다.

이제 다음 단계를 진행하며 기본 소스를 실행해봅시다!

 


 

 

[2. 심플서버로 예제 서버 띄우기]

 

 

(심플서버는 제가 이전에 개발해두었던 프로그램이며 자유롭게 사용하실 수 있습니다.)

 

 

 

준비단계에서 설치한 심플 서버를 실행시켜줍니다.

 

실행시킨 후 기본설정의 서버 디렉토리 선택 버튼 눌러줍니다.

 

 

 

 

폴더는 예제 소스코드가 위치한 폴더로 지정해줍니다. (index.html 파일이 있는 폴더)

저는 E드라이브에 압축을 풀어놓았기 때문에 위와 같은 경로로 선택했습니다.

 

 

 

맨 위에있는 서버 정보 옆에 있는 스위치를 눌러 서버를 실행시켜줍니다.

 

만약 실행되지 않고 문제가 발생했다면 아래의 포트 8080을 다른 값으로 변경한 후 실행시켜보세요

(8090, 8888 등..)

 

 

 

정상적으로 서버가 실행 되면 서버 상태는 실행 중 초록 표시로 변하게 되고

아래에 있는 서버 URL 부분에 마우스를 올리면 서버 주소가 나옵니다.

주소를 클릭하여 서버에 접속합니다.

 

 

짠!

 

이렇게 예제 페이지가 잘 출력되었다면 서버 띄우는것은 성공한 것 입니다.

 

 

+ 버튼을 누르면 새로운 동물 이미지가 추가되고, - 버튼을 누르면 동물 이미지가 1개씩 사라집니다.

추가, 삭제 상태는 localStorage에 저장되며 웹 페이지 로드시 해당 값을 불러오기 때문에 상태가 그대로 유지됩니다.

 

 

이제 이 기본 소스코드에 서비스워커를 등록하고, 오프라인에서 보여줄 데이터를 캐싱하고,

항상 최신으로 유지하는 PWA의 강력한 기능에 대해 배워나갈 것 입니다.

 

 

아, 참고로 PWA는 로컬호스트와 HTTPS가 적용된 웹 페이지 외에서는 동작하지 않습니다!!

예외적으로 로컬호스트에선 HTTPS가 아니더라도 PWA를 개발하고 테스트할 수 있으며,

실제 배포시에는 무조건! HTTPS로 배포하셔야합니다.

 

보안상의 이유로 HTTPS 인증이 필요한 것 같습니다.


 

 

 

[3. 기본 코드 분석]

 

 

다운로드 받은 코드를 잠깐 살펴봅시다.

 

scripts/app.js 파일을 열어주세요

이미 작성해둔 코드가 있습니다.

 

 

HTML 파일을 확인해보시면 알겠지만 img 태그가 없는데 실행 결과에는 닭 얼굴을 한 말 사진이 있었습니다.

스크립드 로드 후 app.showImage()를 통해 이미지가 추가된 것 입니다.

 

 

// 이미지 리스트 불러오기, 데이터가 없을 경우 ['images/1.jpg']로 대체
app.images = JSON.parse(localStorage.getItem('images')) || ['images/1.jpg'];
app.saveImageList();
app.showImage();

 

아래쪽에 위와같은 코드가 있는데, 이 부분은 localStorage에서 데이터를 불러오고 데이터가 없는 경우 1.jpg (말 사진)을 새로 저장하는 코드입니다.

그리고 그 아래에서 showImage를 통해 이미지를 HTML에 추가하는 모습입니다.

 

이후에 1.jpg 뿐만 아니라 2.jpg가 저장되어있다면, 웹 페이지 접속 시 두 개의 이미지가 표시될겁니다.

 

 

코드는 이미지 리스트를 불러오고 이미지를 HTML에 추가해주는게 전부입니다.

 

 

 

 

 

한 번 웹 페이지에서 F12를 눌러 개발자 도구를 열어보세요!

 

상단 탭에서 Network를 선택하신 후 빨간 네모로 표시한 Offline에 체크해주세요!

 

그리고 F5를 눌러 웹 페이지를 새로고침해봅시다.

 

 

 

 

아직 기본 웹 페이지는 PWA이 아니기 때문에 오프라인 상태에서 접속할 수 없습니다.

 

앞으로 우리는 서비스워커를 추가하여 오프라인에서도 웹 페이지에 접속하고 이미지를 볼 수 있도록 개발해나갈 것 입니다.

 

 

 

 

 

 

그럼 다음 강좌에서 봅시다!

 

감사합니다~!

 

 

 

반응형
저작자표시 비영리 동일조건
    '웹' 카테고리의 다른 글
    • [PWA] 프로그레시브 웹 앱 시작하기 (5) - Push, 푸시 알림
    • [PWA] 프로그레시브 웹 앱 시작하기 (4) - 서비스워커 상태
    • [PWA] 프로그레시브 웹 앱 시작하기 (3) - 리소스 캐싱 및 Fetch
    • [PWA] 프로그레시브 웹 앱 시작하기 (2) - 서비스워커 등록
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기

    티스토리툴바