SlideShare a Scribd company logo
25th August, 2016
Jae Sung Park
[Image source] https://www. ickr.com/photos/sunset_man/4591376374/
현실적
PWA
PWA?
"Progressive Web Applications take advantage of
new technologies to bring the best of mobile sites
and native applications to users"
- Progressive Web Apps
Instant Loading:
, ,
Add to Home Screen:
Push-noti cations:
,
Service Workers Background Sync API Cache API
Web App Manifest
Push API Noti cations API
Performance matters
PWA 기술들 중, 가장 중요한 요소는 바로 o޵ine caching!
캐싱은 왜 중요한가?
오프라인 지원
성능 향상
네트워크 보다 캐시를 통해 요청받는 것이 빠르기 때문
Lie-Fi
Lie-Fi
"Indicates that you are connected to a wireless
network, however you are still unable to load
webpages" - urban dictionary
[참고]: What is lie- ?
The challenges of PWA
iOS 미지원
: Under Consideration
Web App Manifest?
Push & Noti cation API?
데스크탑 브라우저? (Service Worker 기준)
IE (Not Supported), (In Development)
(Under Consideration)
(Supported)
Service Workers
Edge
Safari
FireFox
브라우저의 가 문제.
캐싱을 모든 환경에서 사용할 순 없을까?
지원 범위
그런데... 잠깐.
브라우저는 이미 캐싱하고 있지 않나?
사용자가 방문하는 웹사이트의 모든 리소스들에 대해 브라우저는
로컬 캐시해 다음 방문시 로컬 캐시된 리소스를 활용하도록 처리된다.
그러나 많은 경우(온라인 상태인 경우라도)
로컬 캐시된 리소스를 활용하지 못하는 경우가 발생한다.
물론, 오프라인인 경우에는 로컬 캐싱은 사용불가
Cache
로컬 캐시에 대하여
캐시의 상태
Status Description
rst
visit
첫 방문인 경우, 당연히 캐싱되어 있는 리소스는 존재하지 않음
cleared 캐싱되어 있는 경우라도, 사용자가 직접 캐시를 비우거나, 백신으로 인해 지워지거나 또는 브
라우저의 버그로 제거되기도 한다. (약 19%의 Chrome 사용자들의 경우, 최소 1주일에 한
번 이상 버그로 인해 캐시가 지워진다. - )
purged 로컬 캐시의 공간은 모든 웹사이트가 공유해 사용하기 때문에 한정된 공간으로 인해 이전에
캐시된 내용은 새로운 캐시 저장을 위해 지워지게 된다.
expired 약 69%의 리소스들은 캐싱에 대한 헤더가 없거나 또는 1일 미만의 값으로 설정되어 있다. 캐
싱 기간이 만료되면, 로컬에 저장된 캐시의 내용이 유효하더라도 새롭게 요청되어 진다. (
)
revved 이전 방문으로 인해 캐싱이 되어 있는 상태라고 해도, 사이트의 내용이 변경되어 사용자의 로
컬 캐시된 리소스와 달라 사용되지 못할 수도 있다.
참고
참
고
페이스북 사례
페이스북에 접속하는 사용자들 중 로컬 캐시가 없는
상태의 요청 비율은 25.5% 라고 한다. (2015/04 기준)
Type Request rate of
missing cache
Desktop 24.8%
Mobile 26.9%
[참고]: Web performance: Cache e忁�ciency exercise
브라우저의 캐시 공간
로컬 캐싱은 성능에 큰 영향을 주는 요소 중 한 가지.
그러나 모바일 환경에서의 캐싱은 데스크탑 브라우저에 비해 적은 공간을 사용
브라우저에 따라 최대 사용공간은 다르며,
잘 문서화 되어 있지 않아 정확한 limit을 확인하기는 어렵다.
종류 크기
데스크탑 3자리 수 이상 (또는 사용 디스크 전체 크기의 일부)
ex. IE9의 경우는 디스크 크기의 1/256
모바일 2자리 수 정도의 공간을 활용하는 것으로 알려져 있음
ex. Android 2.x의 경우는 최대 캐시 크기는 5.7MB에 불과
(iOS의 경우는 50MB 이상)
[참고]: Early ndings: Mobile browser cache persistence and behaviour
Service
Workers
손쉽게 사용할 수 있는 도구들
sw-precache
빌드 기반의 리소스 프리캐싱
캐싱 리소스 파일의 컨텐츠에 기반해 해쉬를 통한 자동 버저닝
변경이 감지되면, 이전 버전을 만료시키고,
새로운 버전을 fetch 하도록 SW를 생성
변경되지 않은 캐시 요소에 대해선 그대로 유지
cache- rst strategy
sw-precache
ex. Gulp task:
gulp.task('precache', function(callback) { 
    var path = require('path'); 
    var swPrecache = require('sw­precache'); 
    var rootDir = 'demo/pwa'; 
    swPrecache.write(path.join(rootDir, 'sw.js'), { 
        staticFileGlobs: [ rootDir + '/**/*.{js,html,css,png,jpg,gif}' ], 
        stripPrefix: rootDir 
        // 런타임 캐싱 사용시, 생성되는 sw.js에 sw­toolbox가 자동으로 포함 
        // https://github.com/GoogleChrome/sw­precache#runtimecaching­arrayobject 
        /*,runtimeCaching: [{ 
             urlPattern: /.cloudflare.com/(.*)/i, 
             handler: 'fastest', 
                 options: { 
                 cache: { 
                     maxEntries: 10, 
                     name: 'cdnjs' 
                 } 
             } 
         }]*/ 
    }, callback); 
[코드랩]: Adding a Service Worker with sw-precache
sw-toolbox
런타임 요청에 대한 공통의 캐싱 패턴을 제공
다음의 3가지 패턴(전략*)을 제공
cacheFirst
networkFirst
fastest
// URL 패턴에 매칭되는 리소스에 대한 캐싱 전략을 지정 
toolbox.router.get("/images", toolbox.[ cacheFirst | networkFirst | fastest ], options);
*The o޵ine cookbook
sw-toolbox
(global => { 
    'use strict'; 
    // sw­tookbox 로딩 
    importScripts('./js/sw­toolbox.js'); 
    // 디버깅을 위한 로깅 옵션 (개발자 도구 콘솔에 로깅됨) 
    global.toolbox.options.debug = true; 
    // 이미지 폴더로 요청되는 리소스 
    toolbox.router.get('/demo/pwa/img/(.*)', global.toolbox.cacheFirst, { 
        cache: { 
            name: 'img', 
            maxEntries: 10, 
            maxAgeSeconds: 60*60*24 // 1일간 유효 
        } 
    }); 
    // cloudflare.com (cdnjs.com)에서 요청되는 모든 리소스 
    toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { 
        cache: { 
            name: 'cdnjs', 
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Service Worker Toolbox, Totally Tooling Tips
Getting started with the sw-toolbox
offline-plugin for webpack
webpack 프로젝트에서 사용할 수 있는 플러그인
1) webpack.con g 설정
var OfflinePlugin = require('offline­plugin'); 
module.exports = { 
  plugins: [ 
    // ... other plugins 
    // 플러그인들 중, 가장 마지막에 추가 
    new OfflinePlugin({ 
      caches: { 
        main: ['external.js', ':rest:'] 
      }, 
      externals: ['external.js'], 
      excludes: ['main.js'] 
    }) 
  ] 
  // ... 
} 
2) in your client script
require('offline­plugin/runtime').install(); 
Demo
sw-precache 및 sw-toolbox
https://netil.github.io/demo/pwa/
무엇을 캐싱해야 할까?
Application Shell architecture
SW가 지원되지
않는 환경에선?
스토리지를 활용한 캐싱:
Web Storage, IndexedDB, File API, etc.
[참고]: O޵ine Storage for Progressive Web Apps
웹 스토리지를 활용한 캐싱 방법
캐시의 상태에 따라 항상 모든 static 파일들이 사용자의 로컬 영역에
존재한다는 보장은 없기 때문에, 자주 변경이 되지 않는 파일에 대해서는
localStorage를 이용해 확실하게 캐싱되도록 처리하는 방법도 고려할 수 있다.
몇가지 고려사항 :
자주 변경을 필요로 하지 않는 기본 라이브러리들로 대상을 한정
자주 변경되지 않더라도, 업데이트가 필요할 수 있기 때문에 '버전관리' 필요
localStorage는 브라우저에 따라 최대 저장용량이 다를 수 있다.
대체로 5MB 까지 저장할 수 있지만, 보다 정확한 최대치 확인필요
[데모]: 네이버 검색 활용 예
로딩 전략
initializer: 스토리지 버전과 비교
storage.VER == le.VER ?
load from Storage : load from File
// 스토리지에 저장된 스크립트를 evaluation 한다. 
let load = (code = "") => { 
    let s = document.createElement("script"); 
    s.charset = "utf­8"; 
    s.text = code; 
    (document.head || document.getElementsByTagName("head")[0]).appendChild(s); 
}; 
조건과 상황에 따라 다르지만, 기존 대비 25% 성능향상 경험
How much can be stored?
크롬의 경우 :
영역을 사용
Per origin (not per API)
Web Storage, App Cache, File System,
IndexedDB, WebSQL가 공유
그러나 Web Storage는 5MB로 고정
temporary
Browser Limits
Firefox No limits (prompt after 50MB)
Mobile Safari 50MB max
Desktop Safari unlimited (prompts after 5MB)
IE10+ 250MB max (prompts at 10MB)
Chrome Quota Size
navigator.webkitTemporaryStorage.queryUsageAndQuota (  
    (usedBytes, grantedBytes) => 
        console.log('Using ', usedBytes, ' of ', grantedBytes, 'bytes'),  
    e => console.log('Error', e) 
); 
(2016/6/16~17)
:BlinkOn 6 conference State of O޵ine Storage APIs
Type Previous Current Work
Pool (free space –
chrome's current usage) / 3
xed % of total disk space:
(drive size - OS size) * P
Origin quota pool size / 5 pool size / N
PWA gets at most 6% of free space on device
[참고]: ,Browser Storage Abuser O޵ine Storage for Progressive Web Apps
Debug PWA
크롬 개발자 도구
PWA 디버깅
SW는 'https' 에서만 동작한다.
그러나 디버깅 용도를 위해 및 에서도 동작 (포
트 상관없음)
http://localhost http://127.0.0.1
Chrome DevTools > Application Tab:
Manifest
Service Workers
Cache
chrome://serviceworker-internals/
Debug Progressive Web Apps Service Worker
Debugging
Manifest
전체 outline 확인
homescreen 이벤트 에뮬레이션
Service Workers
네트워크 핸들링
에뮬레이션: ,
update/unregister sw
start/stop sw
Push a noti cation Sync event
Cache
캐시된 리소스의 확인
모든 캐시의 삭제는 Application > Clear storage
Resources
(오페라에서 아카이빙한 PWA 앱 목록)
Google Developers:
Google Developers:
Mozilla
Service Workers 101:
(PWA 리소스 큐레이션)
https://pwa.rocks/
Progressive Web Apps
SW Case Studies
Service Worker Cookbook
SW Infographic
The Service Worker Lifecycle
Awesome Progressive Web Apps
Progressive Web App Dev Summit 2016
Gracias[Image source] https://www. ickr.com/photos/joshezzellphotography/12429005735/

More Related Content

What's hot

MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
문기 박
 
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015 AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
Amazon Web Services Korea
 
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
Amazon Web Services Korea
 
Introduction to the Web API
Introduction to the Web APIIntroduction to the Web API
Introduction to the Web API
Brad Genereaux
 
Infoblox dhcp ipam-dns 소개자료
Infoblox dhcp ipam-dns 소개자료Infoblox dhcp ipam-dns 소개자료
Infoblox dhcp ipam-dns 소개자료
PLUS-i_dev
 
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
Amazon Web Services Korea
 
퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트
규연 황
 
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
Ji-Woong Choi
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
Haegyun Jung
 
Cross platform mobile development
Cross platform mobile developmentCross platform mobile development
Cross platform mobile development
Peter Friese
 
Apache Server Tutorial
Apache Server TutorialApache Server Tutorial
Apache Server Tutorial
Jagat Kothari
 
Dev ops Introduction
Dev ops IntroductionDev ops Introduction
Dev ops Introduction
영기 김
 
Build Automation using Maven
Build Automation using Maven Build Automation using Maven
Build Automation using Maven
Ankit Gubrani
 
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
제관 이
 
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020 자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
AWSKRUG - AWS한국사용자모임
 
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
SeungYong Oh
 
Appium Architecture | How Appium Works | Edureka
Appium Architecture | How Appium Works | EdurekaAppium Architecture | How Appium Works | Edureka
Appium Architecture | How Appium Works | Edureka
Edureka!
 
Puppeteer
PuppeteerPuppeteer
Puppeteer
Adrian Caetano
 
How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
myposter GmbH
 
Orquestração de containers com Rancher
Orquestração de containers com RancherOrquestração de containers com Rancher
Orquestração de containers com Rancher
Alex Ishida
 

What's hot (20)

MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...
 
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015 AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
AWS로 사용자 천만 명 서비스 만들기 (윤석찬)- 클라우드 태권 2015
 
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
마이크로서비스를 위한 AWS 아키텍처 패턴 및 모범 사례 - AWS Summit Seoul 2017
 
Introduction to the Web API
Introduction to the Web APIIntroduction to the Web API
Introduction to the Web API
 
Infoblox dhcp ipam-dns 소개자료
Infoblox dhcp ipam-dns 소개자료Infoblox dhcp ipam-dns 소개자료
Infoblox dhcp ipam-dns 소개자료
 
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
[Partner TechForum] 딥러닝 기반의 챗봇 기술을 활용한 구축 사례
 
퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트
 
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
[오픈소스컨설팅]클라우드기반U2L마이그레이션 전략 및 고려사항
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
 
Cross platform mobile development
Cross platform mobile developmentCross platform mobile development
Cross platform mobile development
 
Apache Server Tutorial
Apache Server TutorialApache Server Tutorial
Apache Server Tutorial
 
Dev ops Introduction
Dev ops IntroductionDev ops Introduction
Dev ops Introduction
 
Build Automation using Maven
Build Automation using Maven Build Automation using Maven
Build Automation using Maven
 
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
ISMS 개발보안, 시큐어코딩을 위한 sonarqube의 활용.건국대학교병원.이제관 기술사
 
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020 자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
자바를 잡아주는 GURU가 있다구!? - 우여명 (아이스크림에듀) :: AWS Community Day 2020
 
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
 
Appium Architecture | How Appium Works | Edureka
Appium Architecture | How Appium Works | EdurekaAppium Architecture | How Appium Works | Edureka
Appium Architecture | How Appium Works | Edureka
 
Puppeteer
PuppeteerPuppeteer
Puppeteer
 
How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
 
Orquestração de containers com Rancher
Orquestração de containers com RancherOrquestração de containers com Rancher
Orquestração de containers com Rancher
 

Similar to 현실적 PWA

서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
 
마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기
Jaewoo Ahn
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
Youngjae Kim
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
1711 azure-live
1711 azure-live1711 azure-live
1711 azure-live
세준 김
 
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
Ji-Woong Choi
 
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE  [제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
흥래 김
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
NAVER Engineering
 
개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server
JungWoon Lee
 
Open standard open cloud engine (3)
Open standard open cloud engine (3)Open standard open cloud engine (3)
Open standard open cloud engine (3)uEngine Solutions
 
Tdc2013 선배들에게 배우는 server scalability
Tdc2013 선배들에게 배우는 server scalabilityTdc2013 선배들에게 배우는 server scalability
Tdc2013 선배들에게 배우는 server scalability흥배 최
 
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
rockplace
 
[TD 2015] Microsoft Azure IaaS v2(최정현)
[TD 2015] Microsoft Azure IaaS v2(최정현)[TD 2015] Microsoft Azure IaaS v2(최정현)
[TD 2015] Microsoft Azure IaaS v2(최정현)
Sang Don Kim
 
Service Worker 를 이용한 
Offline Web Application 구현
Service Worker 를 이용한 
Offline Web Application 구현Service Worker 를 이용한 
Offline Web Application 구현
Service Worker 를 이용한 
Offline Web Application 구현
병태 정
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
AWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
AWS Cloud Design Pattenr (Korean) - CDP Seminar in KoreaAWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
AWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
SORACOM, INC
 
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
Amazon Web Services Korea
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
Steve Kim
 
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
Amazon Web Services Korea
 

Similar to 현실적 PWA (20)

서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
1711 azure-live
1711 azure-live1711 azure-live
1711 azure-live
 
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
 
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE  [제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server
 
Open standard open cloud engine (3)
Open standard open cloud engine (3)Open standard open cloud engine (3)
Open standard open cloud engine (3)
 
Tdc2013 선배들에게 배우는 server scalability
Tdc2013 선배들에게 배우는 server scalabilityTdc2013 선배들에게 배우는 server scalability
Tdc2013 선배들에게 배우는 server scalability
 
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
왜 컨테이너인가? - OpenShift 구축 사례와 컨테이너로 환경 전환 시 고려사항
 
[TD 2015] Microsoft Azure IaaS v2(최정현)
[TD 2015] Microsoft Azure IaaS v2(최정현)[TD 2015] Microsoft Azure IaaS v2(최정현)
[TD 2015] Microsoft Azure IaaS v2(최정현)
 
Service Worker 를 이용한 
Offline Web Application 구현
Service Worker 를 이용한 
Offline Web Application 구현Service Worker 를 이용한 
Offline Web Application 구현
Service Worker 를 이용한 
Offline Web Application 구현
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
AWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
AWS Cloud Design Pattenr (Korean) - CDP Seminar in KoreaAWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
AWS Cloud Design Pattenr (Korean) - CDP Seminar in Korea
 
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
워크로드에 맞는 데이터베이스 찾기 - 박주연 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
 
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
효율적인 빅데이터 분석 및 처리를 위한 Glue, EMR 활용 - 김태현 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019
 

More from Jae Sung Park

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
Jae Sung Park
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
Jae Sung Park
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
Jae Sung Park
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
Jae Sung Park
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
Jae Sung Park
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
Jae Sung Park
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
Jae Sung Park
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
Jae Sung Park
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Jae Sung Park
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
Jae Sung Park
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
Jae Sung Park
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
Jae Sung Park
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
Jae Sung Park
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
Jae Sung Park
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
Jae Sung Park
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
Jae Sung Park
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
Jae Sung Park
 

More from Jae Sung Park (20)

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
 
Web Audio API
Web Audio APIWeb Audio API
Web Audio API
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
 

현실적 PWA