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

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

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

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

328: Jen Simmons and Intrinsic Web Design - ShopTalk

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

Release fetch 3.0.0 · github/fetch

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

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

Make fetch() use "same-origin" credentials by default by annevk · Pull Request #585 · whatwg/fetch

또, Fetch API를 취소하기 위한 signal 옵션을 지원합니다.
signal에 전달할 AbortController는 Fetch polyfill이 아니라 AbortController의 abortcontroller-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 모듈이 TypedArray와 DataView를 지원하며 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#flat와 Array#flatMap가 기본적으로 활성화됐고 import.meta를 지원하며 WebDriver API가 갱신됐습니다.

Firefox 62 for developers - Mozilla | MDN

아티클

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을 사용하여 웹표준 기능으로 대체했는지 작성돼 있습니다.

dgraham/eslint-plugin-jquery: Disallow jQuery functions with native equivalents.

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에서도 사용 가능합니다.