SlideShare a Scribd company logo
1 of 8
노별마루
PWA 란?
Progressive web applications(PWA) 는 웹의 장점과 앱의 장점을 모아 이루어진 기술
웹의 특징 앱의 특징
○
Immediacy
(직접성)
Compatibility
(호환성)
Upgradability
(업데이트 용이성)
Findability
(검색성)
Time and Cost
(투입 리소스)
Interactivity/Gaming (상호
작용성)
Personalization
(개인화)
Performance
(성능)
Native Functionality or
Processing
(단말기의 기능 활용)
No Connection Required
(인터넷 없이 동작)
PWA의 특징
최신 상태
오프라인 용량
SEO 친화
빠른 로딩 시간
안전 ( https )
재참여 유도 ( push )
Web App Manifest
앱에 대한 정보를 담고 있
는 json 파일
Service Worker
브라우저의 백그라운드에서
실행되는 자바스크립트 워
커
App Shell
사용자 인터페이스를 구
동하는 데 필요한 최소
한의 HTML, CSS 및 자
바스크립트
PWA의 핵심 기술
Service Worker
서비스워커는 브라우저의 백그라운드에서 실행되는 워커
즉? 웹을 네이티브앱처럼 오프라인으로 사용할 수 있게끔
앱 데이터 및 컨텐츠를 캐싱해주는 역할을 하며
푸쉬같은 기능을 사용할 수 있다.
※ 향후에는 주기적 동기화 기능 및 위치 추적 기능을 사용 할 수
있음
Service Worker
END

More Related Content

What's hot

PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]Seulgi Choi
 
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobsYoungjae Kim
 
Micro Service Architecture의 이해
Micro Service Architecture의 이해Micro Service Architecture의 이해
Micro Service Architecture의 이해Terry Cho
 
Crawling with AWS Lambda
Crawling with AWS LambdaCrawling with AWS Lambda
Crawling with AWS LambdaSeungho Kim
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택Tai Hoon KIM
 
Sever Side Rendering - 2019 Zeropage Devil's Camp
Sever Side Rendering - 2019 Zeropage Devil's CampSever Side Rendering - 2019 Zeropage Devil's Camp
Sever Side Rendering - 2019 Zeropage Devil's CampMookeunJi
 
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스Tai Hoon KIM
 
마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법Young Soo Lee
 
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요Youngjae Kim
 
쉽고 강력한 모바일 백엔드 Parse-server
쉽고 강력한 모바일 백엔드 Parse-server쉽고 강력한 모바일 백엔드 Parse-server
쉽고 강력한 모바일 백엔드 Parse-serverInGrowth Gim
 
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017Amazon Web Services Korea
 
Jbug 발표 msa탐방기_공유자료
Jbug 발표 msa탐방기_공유자료Jbug 발표 msa탐방기_공유자료
Jbug 발표 msa탐방기_공유자료jbugkorea
 
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬Channy Yun
 
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포Dae Kim
 
모바일 개발 트랜드
모바일 개발 트랜드모바일 개발 트랜드
모바일 개발 트랜드Terry Cho
 
뷰레카 엔턴쉽
뷰레카 엔턴쉽뷰레카 엔턴쉽
뷰레카 엔턴쉽Sangjin Park
 
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020AWSKRUG - AWS한국사용자모임
 

What's hot (20)

PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]
 
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs
글로벌 웹사이트 구축을 꿈꾸는 당신에게: Azure WebSites and WebJobs
 
Micro Service Architecture의 이해
Micro Service Architecture의 이해Micro Service Architecture의 이해
Micro Service Architecture의 이해
 
Crawling with AWS Lambda
Crawling with AWS LambdaCrawling with AWS Lambda
Crawling with AWS Lambda
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 
Sever Side Rendering - 2019 Zeropage Devil's Camp
Sever Side Rendering - 2019 Zeropage Devil's CampSever Side Rendering - 2019 Zeropage Devil's Camp
Sever Side Rendering - 2019 Zeropage Devil's Camp
 
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스
 
Azure functions
Azure functionsAzure functions
Azure functions
 
마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법
 
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
 
쉽고 강력한 모바일 백엔드 Parse-server
쉽고 강력한 모바일 백엔드 Parse-server쉽고 강력한 모바일 백엔드 Parse-server
쉽고 강력한 모바일 백엔드 Parse-server
 
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017
Amazon SNS로 지속적 관리가 가능한 대용량 푸쉬 시스템 구축 여정 - AWS Summit Seoul 2017
 
Jbug 발표 msa탐방기_공유자료
Jbug 발표 msa탐방기_공유자료Jbug 발표 msa탐방기_공유자료
Jbug 발표 msa탐방기_공유자료
 
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
 
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포
마이크로소프트 앱 플랫폼을 이용한 어플리케이션 개발과 배포
 
모바일 개발 트랜드
모바일 개발 트랜드모바일 개발 트랜드
모바일 개발 트랜드
 
뷰레카 엔턴쉽
뷰레카 엔턴쉽뷰레카 엔턴쉽
뷰레카 엔턴쉽
 
Mean stack Start
Mean stack StartMean stack Start
Mean stack Start
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
 
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020
Cloud로 나아가는 Frond-end 개발자 - 박찬민(버드뷰) :: AWS Communityday online 2020
 

More from Wonjun Hwang

Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Wonjun Hwang
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Wonjun Hwang
 
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)Wonjun Hwang
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)Wonjun Hwang
 
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)Wonjun Hwang
 
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)Wonjun Hwang
 
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Wonjun Hwang
 
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)Wonjun Hwang
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Wonjun Hwang
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyWonjun Hwang
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyWonjun Hwang
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사Wonjun Hwang
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링Wonjun Hwang
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업Wonjun Hwang
 

More from Wonjun Hwang (20)

Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
This (Kitworks Team Study 김한솔 발표자료 2024.4.22)
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)스토리북(Storybook, Kitworks Team Study 우아라 발표)
스토리북(Storybook, Kitworks Team Study 우아라 발표)
 
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
mysql8 전환기 (Kitworks Team Study 김천규 발표자료)
 
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)Open AI SORA  (키트웍스 팀스터디 발표자료 박준기 240315)
Open AI SORA (키트웍스 팀스터디 발표자료 박준기 240315)
 
Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)Nest JS (Kitworks Team Study 이본훈 발표 240315)
Nest JS (Kitworks Team Study 이본훈 발표 240315)
 
JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)JS Event Loop (Kitworks Team Study 김동현 발표)
JS Event Loop (Kitworks Team Study 김동현 발표)
 
Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)Java Optional (Kitworks Team Study 김성호 발표)
Java Optional (Kitworks Team Study 김성호 발표)
 
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
 
PWA
PWAPWA
PWA
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
 
Passkey
PasskeyPasskey
Passkey
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업
 

Progressive Web Apps

  • 2. PWA 란? Progressive web applications(PWA) 는 웹의 장점과 앱의 장점을 모아 이루어진 기술
  • 3. 웹의 특징 앱의 특징 ○ Immediacy (직접성) Compatibility (호환성) Upgradability (업데이트 용이성) Findability (검색성) Time and Cost (투입 리소스) Interactivity/Gaming (상호 작용성) Personalization (개인화) Performance (성능) Native Functionality or Processing (단말기의 기능 활용) No Connection Required (인터넷 없이 동작)
  • 4. PWA의 특징 최신 상태 오프라인 용량 SEO 친화 빠른 로딩 시간 안전 ( https ) 재참여 유도 ( push )
  • 5. Web App Manifest 앱에 대한 정보를 담고 있 는 json 파일 Service Worker 브라우저의 백그라운드에서 실행되는 자바스크립트 워 커 App Shell 사용자 인터페이스를 구 동하는 데 필요한 최소 한의 HTML, CSS 및 자 바스크립트 PWA의 핵심 기술
  • 6. Service Worker 서비스워커는 브라우저의 백그라운드에서 실행되는 워커 즉? 웹을 네이티브앱처럼 오프라인으로 사용할 수 있게끔 앱 데이터 및 컨텐츠를 캐싱해주는 역할을 하며 푸쉬같은 기능을 사용할 수 있다. ※ 향후에는 주기적 동기화 기능 및 위치 추적 기능을 사용 할 수 있음
  • 8. END