Fork me on GitHub

2018-04-10 JS: PWA on iOS & Windows Storeใ€dom-testing-library

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #378 - Progressive Web Apps on iOS are here ๐Ÿš€ โ€“ Maximiliano Firtman โ€“ Medium์—๋Š” iOS 11.3/Safari 11.1์—์„œ ์ง€์›ํ•˜๋Š” Service Worker ๋“ฑ ์†Œ์œ„ Progressive Web Apps (PWA)์™€ ๊ด€๋ จํ•œ ๋‚ด์šฉ์ด ์ •๋ฆฌ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ™ˆ ์Šคํฌ๋ฆฐ ์•ฑ์œผ๋กœ์จ์˜ ๊ตฌ๋™, Safari Technology Preview๋ฅผ ์‚ฌ์šฉํ•œ Service Worker ๋””๋ฒ„๊น… ๋ฐฉ๋ฒ•์— ๊ด€ํ•ด ์†Œ๊ฐœ๋ผ ์žˆ์œผ๋ฉฐ iOS์˜ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ์˜ ์ฐจ์ด์ ์ด๋‚˜ Android/Chrome์˜ PWA์™€์ด ์ฐจ์ด์  ๋“ฑ์— ๊ด€ํ•ด์„œ๋„ ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์–ด, First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Centra์—์„œ Windows 10 Spring Creators Update(Windows 10 build 1803)์˜ ํ”„๋ฆฌ๋ทฐ ๋ฒ„์ „์˜ Windows Store์— PWA ์•ฑ์ด ๋“ฑ๋ก๋œ ์†Œ์‹์„ ์ „ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Windows Store์™€ PWA์— ๊ด€ํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.


DOM ์š”์†Œ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ kentcdodds/dom-testing-library: ๐Ÿ™ Simple and complete DOM testing utilities that encourage good testing practices.๊ฐ€ ๊ณต๊ฐœ๋์Šต๋‹ˆ๋‹ค.
ํ…Œ์ŠคํŠธ ์‹œ ์ž์ฃผ ํ•„์š”๋กœ ํ•˜๋Š” ํŠน์ • ํ…์ŠคํŠธ๋ฅผ ํฌํ•จํ•˜๋Š” ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๋Š” getByText ํ•จ์ˆ˜๋‚˜ data-testid ์†์„ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๋Š” getByTestId ํ•จ์ˆ˜ ๋“ฑ์„ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

React ์šฉ ๋ฐ”์ธ๋”ฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌreact-testing-library
๋„ ์ œ๊ณตํ•˜๋ฉฐ Vue ์šฉ์œผ๋กœ vue-testing-library
๊ฐ€ ์ค€๋น„๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ณต๊ฐœํ•œ ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.


ํ—ค๋“œ๋ผ์ธ


Axe 3.0 has arrived โ€” hereโ€™s what you need to know - Deque

www.deque.com/blog/axe-3-0-has-arrived/

accessibility ReleaseNote

Axe 3.0์ด ๋ฆด๋ฆฌ์Šค ๋์Šต๋‹ˆ๋‹ค.
Shadow DOM์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.


First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Central

www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

MS PWA news

Microsoft Store์— PWA ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๊ณต๊ฐœ๋์Šต๋‹ˆ๋‹ค.


sails/CHANGELOG.md at v1.0.0 ยท balderdashy/sails

github.com/balderdashy/sails/blob/v1.0.0/CHANGELOG.md

node.js JavaScript ReleaseNote

Node.js์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ Sails.js 1.0์ด ๋ฆด๋ฆฌ์Šค ๋์Šต๋‹ˆ๋‹ค.


์•„ํ‹ฐํด


React v16.3 changes - blog.koba04.com(์ผ๋ณธ์–ด)

blog.koba04.com/post/2018/04/04/react-v163-changes/

React article

React 16.3์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ๋Œ€ํ•ด ์ •๋ฆฌ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


Lazy Loading Images and Video ย |ย  Web Fundamentals ย |ย  Google Developers

developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

performance browser JavaScript CSS

์ด๋ฏธ์ง€๋‚˜ ์˜์ƒ์„ ์ง€์—ฐ ๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๊ด€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.
Intersection Observer ๋˜๋Š” CSS๋ฅผ ์‚ฌ์šฉํ•œ ์ด๋ฏธ์ง€ ์ง€์—ฐ ๋กœ๋“œ ๋ฐฉ๋ฒ•์„ ๊ฐ๊ฐ ์†Œ๊ฐœํ•˜๋ฉฐ ์˜์ƒ๊ณผ GIF๋ฅผ ์ง€์—ฐ ๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์ง€์—ฐ ๋กœ๋“œ๋ฅผ ๋ณด์กฐํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋กœ๋“œ์— ์‹คํŒจํ–ˆ์„ ๋•Œ์˜ Fallback ์ฒ˜๋ฆฌ ๋“ฑ์— ๊ด€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


Headless Chrome: an answer to server-side rendering JS sites ย |ย  Tools for Web Developers ย |ย  Google Developers

developers.google.com/web/tools/puppeteer/articles/ssr

Chrome server article

Headless Chrome์„ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ํ•˜๋Š” ํŠœํ† ๋ฆฌ์–ผ์ž…๋‹ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋ฟ ์•„๋‹ˆ๋ผ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋„ ์ •๋ฆฌ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


GoDaddy Open Source Center - Isomorphic Asset System for React and React-Native

godaddy.github.io/2018/04/04/isomorphic-asset-system-for-react-and-react-native/

SVG React library article

SVG ํŒŒ์ผ(์—์…‹)์„ ๊ด€๋ฆฌํ•˜๋Š” ๋„๊ตฌ๋กœ React/React Native ์ปดํฌ๋„ŒํŠธ, webpack loader ์™€์˜ ์—ฐ๊ณ„์— ๋Œ€ํ•ด ์ •๋ฆฌ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


Strategies for Service Worker Caching for Progressive Web Apps

blog.hasura.io/strategies-for-service-worker-caching-d66f3c828433

ServiceWorker article

Service Worker์˜ ์บ์‹œ ๊ตฌ์กฐ ๋ฐ ์บ์‹œ์™€ ๊ด€๋ จํ•œ ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฌธ์ œ๊ฐ€ ์žˆ๋Š”(๋ง๊ฐ€์ง„) ๋ฐฐํฌ ๋ฒ„์ „ ํŒจ์น˜ ๋ฌธ์ œ, service-worker.js ํŒŒ์ผ ์ž์ฒด๋ฅผ ์บ์‹œํ•  ๋•Œ์˜ ๋ฌธ์ œ, ์บ์‹œ๋  ํ•„์š” ์—†๋Š” ์‘๋‹ต์— ๋Œ€ํ•œ ์กฐ์ž‘ ๋“ฑ์„ ์†Œ๊ฐœํ•˜๋ฉฐ create-react-app์˜ ์‚ฌ๋ก€์™€ Clear-Site-Data ํ—ค๋”์— ๋Œ€ํ•ด์„œ๋„ ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.


Progressive Web Apps on iOS are here ๐Ÿš€ โ€“ Maximiliano Firtman โ€“ Medium

medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

ios safari article ServiceWorker PWA

iOS 11.3์—์„œ ์ง€์›ํ•˜๋Š” Service Worker ๋“ฑ PWA์™€ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.
๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ์˜ ์ œ์•ฝ๊ณผ Chrome/Android ์™€์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.


Transform your codebase using codemods | nec.is

nec.is/writing/transform-your-codebase-using-codemods/

JavaScript Tools article AST

jscodeshift๋ฅผ ์‚ฌ์šฉํ•œ JavaScript ์ฝ”๋“œ ๋ณ€ํ™˜์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.
JavaScript ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•๊ณผ AST ๊ทธ๋ฆฌ๊ณ  jscodeshift์˜ API์— ๊ด€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


Introducing the Paymentย Requestย API for Appleย Pay | WebKit

webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/

safari article

Safari 11.1์—์„œ Payment Request API๋กœ Apple Pay๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.
-webkit-appearance: -apple-pay-button;" ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜์—ฌ Appley Pay ๋ฒ„ํŠผ์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ Payment Request API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๊ด€ํ•ด ์ž‘์„ฑ๋ผ ์žˆ์Šต๋‹ˆ๋‹ค.


Understanding JavaScript Proxies by Examining on-change Library

codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2

JavaScript proxy article

์†์„ฑ ๋ณ€๊ฒฝ ๊ฐ์ง€๋ฅผ ES Proxy๋กœ ๊ตฌํ˜„ํ•ด๋ณด๋ฉด์„œ Proxy์— ๋Œ€ํ•ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค.


์Šฌ๋ผ์ด๋“œ, ์˜์ƒ


Browser Automated Tests // Speaker Deck

speakerdeck.com/derekb/browser-automated-tests

JavaScript testing slide

puppeteer์™€ mocha๋ฅผ ์‚ฌ์šฉํ•œ ์ž๋™ ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์„ ์†Œ๊ฐœํ•˜๋Š” ์Šฌ๋ผ์ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.


์‚ฌ์ดํŠธ, ์„œ๋น„์Šค, ๋ฌธ์„œ


React lifecycle methods diagram

projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React document

React 16.3 ์ดํ›„ ํ™˜๊ฒฝ์˜ React ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ์ •๋ฆฌํ•œ ๋‹ค์ด์–ด๊ทธ๋žจ.


์†Œํ”„ํŠธ์›จ์–ด, ๋„๊ตฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ


kentcdodds/dom-testing-library: ๐Ÿ™ Simple and complete DOM testing utilities that encourage good testing practices.

github.com/kentcdodds/dom-testing-library

JavaScript DOM testing library

DOM ์š”์†Œ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋Š” Matcher ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.


kwolfy/webworker-promise: Promise based wrapper for webworkers

github.com/kwolfy/webworker-promise

JavaScript webworker library

WebWorker๋ฅผ Promise ๊ธฐ๋ฐ˜์œผ๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
EventEmitter์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ ๊ตฌ์กฐ์™€ Promise๋ฅผ ์‚ฌ์šฉํ•œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ, Worker pool ๊ตฌ์กฐ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.


avwo/whistle: HTTP, HTTPS, WebSocket debugging proxy

github.com/avwo/whistle

HTTP proxy debug node.js

Node.js๋กœ ์ž‘์„ฑ๋œ HTTP/HTTPS/WebSockets ๋””๋ฒ„๊น… Proxy ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.


Pull Request to this article
่จ˜ไบ‹ใ‚’็ดนไป‹ใ™ใ‚‹