Fork me on GitHub

2018-09-11 JS: Firefox 62.0, whatwg-fetch 3.0.0, Removing jQuery from GitHub.com

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #400 - Firefox 62.0가 릴리스됐습니다.

개발 도구와 관련해 Shape Path Editor가 추가됐고 CSS Grid InspectorAccessibility inspector가 개선됐으며 CORS 에러 문서 링크가 콘솔에 출력되도록 변경됐습니다.

또, CSS Variable Fonts와 import.meta를 지원하며 Array#flatArray#flatMap가 기본적으로 활성화됐고 WebDriver API가 갱신됐습니다.

Mozilla의 Jen Simmons가 아래 Podcast에서 CSS와 관련된 변경에 대해 다뤘으니 함께 들어보면 좋을 거 같습니다.


Fetch API의 polyfill 라이브러리인 whatwg-fetch 3.0.0이 릴리스됐습니다.

지금까지 export 돼 있지 않았던 Headers, Request, Response를 참조할 수 있도록 수정됐습니다.

이미 메이저 브라우저의 fetch 구현체에서는 credentials의 기본값이 omit에서 same-origin으로 변경됐으며 polyfill도 사양에 맞춰 변경됐습니다.

또, Fetch API를 취소하기 위한 signal 옵션을 지원합니다.
signal에 전달할 AbortController는 Fetch polyfill이 아니라 AbortControllerabortcontroller-polyfill를 사용하도록 권고하고 있습니다.


Removing jQuery from GitHub.com frontend | GitHub Engineering에는 GitHub.com에서 jQuery를 웹표준 API를 기반으로 어떻게 바꿔 나갔는지에 대해 소개돼 있습니다.

MDN과 같은 문서를 참고하여 jQuery의 기능을 웹표준 API로 바꾸거나 jQuery 특징적 동작을 해결할 수 있는 방법에 대해 다루고 있습니다.

코드에서 사용되고 있는 jQuery에 대한 매트릭스를 시각화하고, ESLint를 이용해 jQuery 사용을 CI에서 검증하고, Polyfill을 사용하는 등 어떻게 jQuery를 덜어냈는지에 관해 소개돼 있으며 이를 위한 방침에 대해서도 작성돼 있습니다.


공지사항

이번 회로 400회를 맞는 JSer.info 입니다.

400회 기념 이벤트를 2018년 9월 22일(토요일)에 개최하니 흥미가 있는 사람은 참고해주세요.
이미 정원이 찼지만 당일 못오는 사람도 있다고 생각하기 때문에 참가하고 싶은 사람은 일단 신청해 두는게 좋을 거 같습니다(입장에 필요한 ID를 발급할 필요가 있으므로 직전 보다는 사전에 등록해주세요).

어떻게든 참가하고 싶으신 분은 @azu_re으로 상담 신청해주세요.


헤드라인


New in Chrome 69  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/nic69

Chrome ReleaseNote

Chrome 69가 릴리스됐습니다.
CSS Scroll Snap, CSS env와 Display cutouts, Web Locks API, OffscreenCanvas를 지원합니다.


Node v10.10.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.10.0/

node.js ReleaseNote

Node.js 10.10.0이 릴리스됐습니다.
fs 모듈이 TypedArrayDataView를 지원하며 http2 모듈이 experimental에서 제외됐습니다. 또, vm.compileFunction이 추가됐습니다.


Release fetch 3.0.0 · github/fetch

github.com/github/fetch/releases/tag/v3.0.0

Fetch JavaScript library polyfill ReleaseNote

Fetch polyfill 3.0.0이 릴리스됐습니다.
credentials의 기본값이 same-origin으로 변경됐고 Request를 취소하기 위한 signal 사양을 지원하며 사양에 맞춰 구현이 변경됐습니다.


Release v16.5.0 · facebook/react

github.com/facebook/react/releases/tag/v16.5.0

React ReleaseNote

React 16.5.0이 릴리스됐습니다.
React DevTools Profiler와 onAuxClick를 지원합니다.


Firefox 62.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/62.0/releasenotes/

firefox ReleaseNote

Firefox 62.0이 릴리스됐습니다.
개발자 도구에 Shape Path Editor가 추가됐으며 CORS 에러 출력 방식이 변경됐습니다.
Array#flatArray#flatMap가 기본적으로 활성화됐고 import.meta를 지원하며 WebDriver API가 갱신됐습니다.


아티클


Web performance review: TradeMe | Wildly Inaccurate

wildlyinaccurate.com/web-performance-review-trademe/

browser performance article

SpeedCurve를 이용해 측정하면서 페이지 출력 성능을 개선하는 과정을 소개합니다.
무엇이 병목을 일으키는지 알아보고 Hero Element(상단 이미지)를 어떻게 보다 빠르게 출력 할 수 있는지 작성돼 있습니다.
또, 개선 후에도 performance budgets를 바탕으로 관리하는 방안에 대해서도 이야기합니다.


The Reporting API  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/reportingapi

browser WebPlatformAPI article

Reporting API에 관한 소개 글입니다.
지정한 URL와 관련해 CSP 위반, Feature Policy 위반, deprecation 네트워크 에러 등에 관해 리포트를 받아볼 수 있습니다.
또, 리포트가 제대로 송신됐는지 디버깅하는 방법에 관해서도 작성돼 있습니다.


Developer Tools support for Web Components in Firefox 63 – Firefox Nightly News

blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/

firefox debug WebComponents article

Firefox 63에서 Web Components가 기본적으로 활성화됐으며 개발자 도구도 이에 맞춰 <template> 요소나 Shadow DOM 등을 대응했습니다.


Removing jQuery from GitHub.com frontend | GitHub Engineering

githubengineering.com/removing-jquery-from-github-frontend/

github jQuery JavaScript WebComponents article

GitHub가 jQuery를 어떻게 걷어냈는지 소개합니다.
jQuery 기능을 대체할 수 있는 웹표준으로 기능이 늘었으며 또, 일부 jQuery의 메서드체인은 의도한대로 동작하지 않는 문제도 있어 대체를 결정했으며 코드에서 사용되고 있는 jQuery에 대한 매트릭스를 시각화하고, ESLint를 이용해 jQuery 사용을 CI에서 검증하고, 어떤 Polyfill을 사용하여 웹표준 기능으로 대체했는지 작성돼 있습니다.


Asynchronous Access to HTTP Cookies  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies

Chrome JavaScript article

Chrome 69에서 Origin Trial로 사용할 수 있게 된 Cookie Store API에 관해 소개하는 글입니다.
document.cookie API와는 다르게 비동기로 다룰 수 있으며 값의 변경도 감시할 수 있습니다.
또, Servie Worker에서도 사용 가능합니다.


Inside look at modern web browser (part 1)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/inside-browser-part1

Chrome browser article

Chrome의 프로세스를 주제로 한 연재 글입니다.
어떤식으로 프로세스가 분리돼 있는지 소개하고 페이지 네비게이션에서 각 처리 흐름에 대해 이야기합니다.


A tour of JavaScript timers on the web | Read the Tea Leaves

nolanlawson.com/2018/09/01/a-tour-of-javascript-timers-on-the-web/

JavaScript article

JavaScript의 타이머 처리에 관한 소개 글입니다.
microtask, setTimeout/setInterval, setImmediaterequestAnimationFrame, requestIdleCallback에 대해 다룹니다.


TypeScript with Babel: A Beautiful Marriage – DailyJS – Medium

medium.com/dailyjs/typescript-babel-ce24f724398

TypeScript babel article

Babel 7에서 @babel/preset-typescript로 지원하는 TypeScript의 코드 컴파일에 관해 이야기합니다.
유스케이스나 .ts를 Babel로 컴파일하고 tsc로 타입을 검증하는 사례에 관해 소개돼 있습니다.


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


lusakasa/sqorn: A Javascript library for building SQL queries

github.com/lusakasa/sqorn

JavaScript SQL library

Tagged Template Literal를 기반으로 개발한 SQL 쿼리 빌더 라이브러리입니다.


도서


Nuxt.js 비기너스 가이드, Vue.js를 베이스 프레임워크로 싱글 페이지 애플리케이션 개발 | 하나타니 타쿠마 | 책 | 통신판매 | Amazon

www.amazon.co.jp/dp/4863542569/

Vue book

2018년 10월 19일 출간 예정인 Nuxt.js에 관한 도서입니다.


Practical React Native: Build Two Full Projects and One Full Game using React Native: Frank Zammetti: 9781484239384: Amazon.com: Books

www.amazon.com/dp/1484239385/

JavaScript React book

2019년 3월 10일 출간 예정인 React Native에 관한 도서입니다.


Browsers, Devices, and Fonts: A Designer's Guide to Fonts and How They Function on the Web: Gary Rozanc: 9781138612310: Amazon.com: Books

www.amazon.com/dp/1138612316/

web desin fonts book

2018년 12월 8일 출간 예정인 웹 타이포그라피에 관한 도서입니다. Web Fonts와 디자인에 대해 다룹니다.


Jump Start Vue.js: Nilson Jacques: 9781925836097: Amazon.com: Books

www.amazon.com/dp/1925836096/

Vue JavaScript book

2019년 2월 25일 출간 예정인 Vue, Vuex, Nuxt.js를 심플하게 소개하는 도서입니다.


Pull Request to this article
記事を紹介する