Fork me on GitHub

2017-05-22 JS: Safari TP 30, Polymer 2.0와 Bower, Create React App 1.0.0

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #332 - Safari Technology Preview Release 30이 릴리즈됐습니다.

Subresource Integrity(SRI), X-Content-Type-Options:nosniff을 지원합니다.

또, Promise의 rejectionhandledunhandledrejection 이벤트도 지원합니다.


Polymer 2.0.0polymer-cli 1.0.0이 릴리즈됐습니다.
ES2015의 클래스 기반으로 쓸 수 있도록 됐고 Dirty checking을 opt-out할 수단과 1.x와의 호환 계층 등도 준비돼 있습니다.

아래 문서에 1.x에서의 마이그레이션에 대해 작성돼 있으니 참고하시길 바랍니다.

또, Bower를 사용해 Polymer를 설치하는게 공식 방법입니다(polymer-cli도 Bower를 기반으로 하고 있습니다).

하지만 며칠 전에 Bower는 정식으로 비권장이 됐습니다.

때문에 Polymer도 npm/yarn을 지원하도록 변경 중입니다.

philipahlberg 5:52 PM
Hi everyone, with Bower being depreciated and pointing to Yarn now, should an issue be filed for the Polymer CLI to make the switch at some point in the future?

fresnizky 7:47 PM
@philipahlberg I think they're​ already working on it.
 https://github.com/Polymer/polymer/issues/3903#issuecomment-279180914

다음 Issue에서 npm 지원에 관해 의논되고 있으며 현재 @polymer/polymer 알파(α) 버전이 공개돼 있습니다.


React의 Scafolding 도구인 Create React App 1.0이 릴리즈됐습니다.

webpack2로 업그레이드 됐고 런타임 상 에러가 웹페이지로 출력되며 Service Worker 대응하고 Jest20을 사용하도록 됐습니다. 또, Dynamic import를 사용한 코드가 분할 빌드 되도록 변경됐습니다.

아래 릴리즈 노트에 0.9.5에서의 마이그레이션 방법이 작성돼 있으니 참고하시길 바랍니다.


헤드라인


Release Notes for Safari Technology Preview 30 | WebKit

webkit.org/blog/7614/release-notes-for-safari-technology-preview-30/

safari ReleaseNote

Safari Technology Preview Release 30이 릴리즈됐습니다.
Subresource Integrity(SRI), X-Content-Type-Options:nosniff를 대응했고 Promise의 Unhandled rejection 이벤트를 지원합니다.
document.cookie의 동작 방식을 보다 정밀히 변경했고 WAI-ARIA와 관련 기능을 수정하는 등 다양한 변경 사항이 있습니다.


Time for 2.0 - Polymer Project

www.polymer-project.org/blog/2017-05-15-time-for-two

WebComponents JavaScript library ReleaseNote

Polymer 2.0이 릴리즈됐습니다.
클래스 기반으로 작성할 수 있도록 변경됐고 Polymer CLI도 함께 업데이트 됐습니다.


Release 7.0 “Coelestem adspicit lucem” · postcss/autoprefixer

github.com/postcss/autoprefixer/releases/tag/7.0.0

CSS ReleaseNote

Autoprefixer 7.0이 릴리즈됐습니다.
PostCSS 6.0, Browserslist 2.0, caniuse-lite를 이용하도록 변경됐습니다.
Node.js 0.12의 지원을 종료했고 기본적으로 Grid Layout의 접두사 기능을 비활성화 했고 코드 베이스가 CoffeeScript에서 Babel을 사용한 ECAMScript6로 변경됐습니다.


ESLint v4.0.0-beta.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/05/eslint-v4.0.0-beta.0-released

ESLint ReleaseNote

ESLint 4.0.0β가 릴리즈됐습니다.


Add yarn and webpack recommendation from bower.io to readme Fixes #2298 by graingert · Pull Request #2458 · bower/bower

github.com/bower/bower/pull/2458

JavaScript Tools news

Bower가 npm deprecate가 되어 정식으로 비권장 됐습니다.
유지보수는 계속 할 예정이며 Bower의 미래(유지보수/개발)에 흥미가 있는 사람은 메일로 연락해 달라고 합니다.


Release v1.0.0 · facebookincubator/create-react-app

github.com/facebookincubator/create-react-app/releases/tag/v1.0.0

React Tools ReleaseNote

create-react-app v1.0.0이 릴리즈됐습니다.
webpack2로 업그레이드 됐고 런타임 상 에러가 웹페이지로 출력되며 Service Worker 대응하고 Jest20을 사용하도록 됐습니다. 또, Dynamic import를 사용한 코드가 분할 빌드 되도록 변경됐습니다.


아티클


ZEIT – Next 3.0 Preview

zeit.co/blog/next3-preview

JavaScript React 서버 ReleaseNote

Next 3.0 프리뷰 버전이 릴리즈됐습니다.
next export로 정적인 HTML로 출력할 수 있도록 변경됐고 컴포넌트의 dynamic import를 지원하는 등 다양한 변경 사항이 있습니다.


Developer Edition 54: New inspector and debugger features, MDN help in the netmonitor, and more ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/

firefox debug article

Firefox 54 개발자 도구의 변경 사항을 소개하는 글입니다.
CSS Inspect가 개선됐고 Debugger 패널에서 코드판이 별도의 탭으로 열리거나 현 상태의 변수 값이 툴팁으로 출력되도록 변경됐습니다. 또, Network 패널에서 [More Info]을 통해 도움말 페이지로 바로 갈 수 있으며 JSON Viewer가 추가됐습니다.


JavaScript의 또 하나의 「함수명」 —— name 프로퍼티 - Qiita(일본어)

qiita.com/8x9/items/34272b59b5aa68e33256

JavaScript article

JavaScript Function의 name 프로퍼티에 관한 설명 글입니다.
ES2015부터 익명 함수나 Arrow Function 등에 함수 이름이 없어도 선언된 변수의 이름이 name 프로퍼티로 참조된다는 것과 writable 속성의 사양에 관해 소개 돼 있습니다.


The Many Faces of Functions in JavaScript - Bocoup

bocoup.com/blog/the-many-faces-of-functions-in-javascript

JavaScript ECMAScript article

JavaScript의 여러가지 "함수" 선언 및 표현 방식에 관해 정리돼 있습니다.


슬라이드, 영상


A Modern Front-End Workflow – Umar Hansa | Render 2017 - YouTube

www.youtube.com/watch?v=v5r_n6Tq0uk

Chrome debug video

Chrome 개발자 도구의 팁이나 디버깅 워크 플로우에 대해 소개하는 발표 영상입니다.


The Future of Audio and Video on the Web (Google I/O '17) - YouTube

www.youtube.com/watch?v=z9unKFzAj1w

google video JavaScript ProgressiveWebApp

웹의 영상이나 음악을 PWA로 어떻게 대응할 수 있는지 소개하는 발표 영상입니다.
ServiceWorker를 사용한 오프라인 대응, 디바이스 회전 시 자동 풀스크린, Media Capabilities를 사용한 재생 판단, MediaSession API를 이용한 커버 디자인 등 다양한 API와 사용 방법에 대해 소개합니다.


Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17) - YouTube

www.youtube.com/watch?v=6Ljq-Jn-EgU&index=71&list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

browser performance video

성능과 측정 항목(Metrics)에 관해 소개하는 발표 영상입니다.
로드 완료가 아닌 상호 작용(Interactive)된 시간(TTI)를 측정하는 방법과 Hero Elements, UX를 측정 항목에 기준하여 이야기하며 Long Tasks(50ms)를 PerformanceObserver로 감지하는 방법과 조작 지연 측정, 개선을 위한 패턴에 대해서도 소개합니다.


CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets

slides.com/malyw/houdini-codemotion#/

CSS slide

CSS Houdini(DOM을 벗어나 조금 더 저수준 레벨에서 CSS를 제어할 수 있도록 하는 스펙)에 관해 소개하는 슬라이드입니다.
CSS / JavaScript / 브라우저의 연계와 각 Worklet에 관해 이야기합니다.


Google I/O 2017 - All Sessions - YouTube

www.youtube.com/playlist?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy

google video 이벤트

Google I/O 2017 발표 영상이 공개됐습니다.


JSConf EU 2017 - YouTube

www.youtube.com/playlist?list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_

JavaScript 이벤트 video

JSConf EU 2017의 영상이 공개됐습니다.


사이트, 서비스, 문서


Don't Overcomplicate Javascript – Bits from Nikola Ristic ∞ ƒront-end ∆eveloper

bits.ristic.io/dont-overcomplicate-javascript-0

redux opinion

JavaScript에서의 카고 컬트 프로그래밍(Cargo cult programming)에 대해 이야기하는 연재 글입니다. 특정 패턴이나 기술의 원칙이나 배경 이해 없이 코드 습관을 갖고 기술을 적용하면 기술적 부채나 복잡성도 함께 뒤따라 가져올 가능성이 있다고 이야기를 시작하면서 Redux에서의 Action에 대한 상수 패턴과 import * as Constans from './constants'의 문제점 등에 관해 소개합니다.


HN PWA - Hacker News readers as Progressive Web Apps

hnpwa.com/

JavaScript ProgressiveWebApp example

Hacker News를 여러가지 View 프레임워크로 구현한 결과를 정리하고 공개하는 사이트입니다.


소프트웨어, 도구, 라이브러리


diegomura/react-pdf: Create PDF files using React

github.com/diegomura/react-pdf

React PDF library

React 컴포넌트로 레이아웃 등을 작성하고 PDF로 생성하는 라이브러리입니다.


도서


Complete Redux Book by Ilya Gelman et al. [PDF/iPad/Kindle]

leanpub.com/redux-book

redux book

Redux를 다루는 전자 서적입니다.


Pull Request to this article
JSer.info Slackに参加する