Fork me on GitHub

2018-06-05 JS: Safari 12 변경 예정 사항, Jest 23, sucrase

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #386 - iOS 12, macOS 10.14에 탑재 될 Safari 12의 변경 예정 사항 릴리스 노트가 공개됐습니다.

font-display 지원, Intelligent Tracking Prevention 2.0, Cross-Origin Read Blocking (CORB) 일부 지원, 또 Password AutoFill 관한 기능이 추가됐습니다.

얼마전 릴리스 된 Safari Technology Preview 57에도 Cross-Origin-Options HTTP response header라고 하는 크로스 오리진에 관한 시큐리티 헤더가 시험적으로 구현됐습니다.


JavaScript 테스트 프레임워크 Jest 23이 릴리스 됐습니다.

Interactive Snapshot Mode와 toStrictEqual 등의 matcher가 추가됐으며 비동기적 커스텀 matcher를 작성할 수 있도록 변경됐고 jest-each가 코어에 포함됐습니다.

또, 테스트가 행에 걸렸을때 디버깅을 보조하는 --detectOpenHandles 옵션도 추가됐습니다.


sucrase라는 TypeScript, Flow, JSX와 일부 ES.next 기능의 변환에 한정된 Transpiler가 공개됐습니다. Babel과 다르게 ES2015+를 ES5로 변한하는게 아닌, ES2015+를 그대로 실행할 수 있는 환경을 고려한 모듈이나 TypeScript, Flow, JSX 등을 빠르게 JavaScript로 변환하는 것을 목적으로 하고 있습니다.

Babel 파서를 포크한 것을 사용하고 TypeScript 등도 @babel/preset-typescript와 같이 타입 정보를 제외하고 JavaScript로 변환합니다(타입 체크는 하지 않습니다).

Motivation에도 써있듯 Babel과는 다르게 AST 까지는 생성하지 않고 token 레벨에서 코드를 변환합니다.
따라서, Babel 처럼 AST 플러그인은 지원하지 않지만 단계가 줄어 좀 더 빠르게 코드를 변환할 수 있습니다.

  • Babel: Source -> Token -> AST -> Transform -> AST -> Source
  • sucrase: Source -> Token -> Transform -> Source

헤드라인


New in Chrome 67  |  Web  |  Google Developers

developers.google.com/web/updates/2018/05/nic67

Chrome ReleaseNote

Chrome 67이 릴리스 됐습니다.
Desktop PWA, Generic Sensor API, BigInt를 지원하며 개발자 도구가 업데이트 됐습니다.


Announcing TypeScript 2.9 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/

TypeScript ReleaseNote

TypeScript 2.9가 릴리스 됐습니다.
import() type 추가됐고 JSON 파일을 import 한 경우에 타입 추론이 이루어 지도록 변경됐으며 Tagged Template String 타입 개선 등이 이뤄졌습니다.


Release 1.0.0-beta.5 · avajs/ava

github.com/avajs/ava/releases/tag/v1.0.0-beta.5

JavaScript testing ReleaseNote

AVA 1.0.0-beta.5가 릴리스 됐습니다.
ava.config.js 설정 파일과 t.throws에서 code 프로퍼티를 지원합니다.


Release 8.6 “Follow Reason” · postcss/autoprefixer

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

CSS Tools ReleaseNote

Autoprefixer 8.6이 릴리스 됐습니다.
CSS Grid의 gap 등을 지원합니다.


Release Notes for Safari Technology Preview 57 | WebKit

webkit.org/blog/8307/release-notes-for-safari-technology-preview-57/

webkit ReleaseNote

Safari Technology Preview Release 57이 릴리스 됐습니다.
크로스 오리진 Window 간 접근을 제한할 수 있는 Cross-Origin-Options HTTP 헤더를 시험적으로 지원하며 modern EME(Encrypted Media Extensions) API가 기본적으로 활성화 됐습니다.


Jest 23: 🔥 Blazing Fast Delightful Testing · Jest

facebook.github.io/jest/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html

JavaScript testing library ReleaseNote

Jest 23이 릴리스 됐습니다.
Interactive Snapshot Mode와 toStrictEqual 등의 matcher가 추가됐으며 비동기적 커스텀 matcher를 작성할 수 있도록 변경됐고 jest-each가 코어에 포함됐습니다.


What’s New in Safari - Apple Developer

developer.apple.com/safari/whats-new/

safari ReleaseNote

Safari 12의 변경 예정 사항이 정리돼 있습니다.
watchOS에서 동작할 수 있도록 개선되며 font-display를 지원하고 ITP 2.0, CORB의 일부 기능을 지원합니다. 또, .safariextz 스타일의 Safari 확장을 비권장하는 등 다양한 변경 사항이 예정돼 있습니다.


아티클


davidea.st/articles/comlink-simple-web-worker

JavaScript webworker article

Web Worker의 동작에 관한 설명과 Comlink를 활용한 Web Worker 사용 방법에 대해 작성돼 있습니다.


Beyond SPAs: alternative architectures for your PWA  |  Web  |  Google Developers

developers.google.com/web/updates/2018/05/beyond-spa

server ServiceWorker article JavaScript

Service Worker와 Express를 사용한 페이지 단위(SPA가 아닌)의 웹 애플리케이션을 위한 아키텍처와 구현 샘플에 대해 소개돼 있습니다.
라우팅을 클라이언트와 서버에서 공유하고, 부분적인 View를 Stream API로 가져와 렌더링합니다. 또, 동적인 메타 정보의 전달 방법에 대해 소개돼 있습니다.


Getting Started With CSS Layout — Smashing Magazine

www.smashingmagazine.com/2018/05/guide-css-layout/

CSS article

CSS의 레이아웃에 관한 소개글입니다.
Float, Flex, Grid 등의 레이아웃 구조에 대해 작성돼 있습니다.
Box와 Contents, Alignment 등에 관해서도 이야기합니다.


슬라이드, 영상


JavaScript engines: The Good Parts™ // slidr.io

slidr.io/mathiasbynens/javascript-engines-the-good-parts#1

JavaScript slide

JavaScript 엔진의 최적화 패스에 대해 이야기하는 슬라이드입니다.
V8, Spidermonkey, Chackra, JavaScriptCore 각각 최적화 패스의 흐름이나 Shape와 최적화가 깨지는 패턴에 대해서 이야기합니다.


사이트, 서비스, 문서


GoogleChromeLabs/critters: A Webpack plugin to inline your critical CSS and lazy-load the rest.

github.com/GoogleChromeLabs/critters

webpack plugin performance

크리티컬 CSS 인라인화, 외부 파일의 lazy load와 prefetch를 담당하는 webpack plugin입니다.


Reach Router - Overview

reach.tech/router

JavaScript React library accessibility

React 용 라우터 라이브러리입니다.
React Router의 본 개발자가 개발하고 있고 Focus Mangement 등의 접근성가 고려돼 있습니다.


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


alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes

github.com/alangpierce/sucrase

babel jsx flowtype TypeScript Tools

Babel Parser를 fork하여 개발한 JSX / Flow / TypeScript 등을 JS로 변환하는 도구입니다.
ES2015+를 실행할 수 있는 환경을 고려해 코드를 변환하거나 JSX / Flow / TypeScript의 변환을 빠르게 변환하는 것에 목적을 두고 있습니다.
Babel와는 다르게 플러그인 시스템을 생략하여 변환 속도를 향상시키고 있습니다.


hybridsjs/hybrids: UI library for creating Web Components with simple and functional API

github.com/hybridsjs/hybrids/

WebComponents library

lit-html 처럼 Custom Element를 만들 수 있는 html이나 define 등을 제공하는 라이브러리입니다.


github.com/Alex1990/tiny-cookie

JavaScript library

작은 사이즈의 쿠키 조작 라이브러리입니다.


github.com/GoogleChromeLabs/comlink

JavaScript library webworker

Proxy를 사용한 Web Worker 라이브러리입니다.
Worker 내의 구현을 Proxy하여 postMessage 등의 메세지를 감춰줍니다.


marblejs/marble: Marble.js - functional reactive HTTP middleware framework built on top of Node.js platform, TypeScript and RxJS library.

github.com/marblejs/marble

Rx JavaScript server HTTP

Rxjs를 사용한 HTTP 미들웨어 프레임워크입니다.
Node.js 환경의 리퀘스트, 리스폰즈에 대한 처리를 작성할 수 있습니다.


Keyframes.app

keyframes.app/

CSS Tools editor

CSS animation의 GUI 에디터입니다. CSS animation의 프로퍼티를 설정하여 실제 애니메이션을 재생해보면서 애니메이션에 필요한 CSS 속성을 만들 수 있습니다.


도서


Testing Vue.js Applications: Edd Yerburgh: 9781617295249: Amazon.com: Books

www.amazon.com/dp/1617295248/

Vue testing book JavaScript

2018년 8월 31일 출간 예정인 Vue.js의 테스트를 주제로 한 도서입니다.


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