Fork me on GitHub

2020-08-25: TypeScript 4.0, Cypress 5.0, Electron 10.0

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #502 - TypeScript 4.0이 정식 릴리스 됐습니다.

Variadic Tuple Types, Labeled Tuple Elements 등이 추가되고 Class Property 타입이 Constructor에서 추론될 수 있도록 개선됐습니다.
또, ES2021에 도입될 예정인 Logical Operators and Assignment Expressions를 지원합니다.
그 외로 catch 절의 기본 타입이 unknown으로 변경됐으며 jsxFragmentFactory 옵션과 --incremental--noEmit을 함께 사용할 수 있도록 지원합니다.

이어서 TypeScript 4.0에 대응한 Babel, Preitter의 새 버전도 각각 릴리스 됐습니다.

TypeScript-ESLint 관련해서는 아래 이슈를 참고해주시기 바랍니다.


E2E 테스트 프레임워크인 Cypress 5.0이 릴리스 됐습니다.

cypress-plugin-retries가 비권장 되고 Cypress 자체에서 재시도를 설정할 수 있게 됐습니다.
자세한 내용은 아래 문서를 참고해주시기 바랍니다.

지원 대상이 TypeScript 3.4+, Node.js 10+로 변경했으며 테스트 파일 내에 작성된 __dirname__filename 경로에 /가 포함되지 않도록 수정됐습니다.


Electron 10.0이 릴리스 됐습니다.

Release electron v10.0.0 · electron/electron

Chromium 85, V8 8.5, Node.js 12.16으로각각 갱신됐습니다.
또, enableRemoteModulefalse로 변경되고 app.allowRendererProcessReusetrue로 변경됐습니다.

remote 모듈은 유저랜드(electron-userland)로 이전되기 때문에 이를 위해 단계적으로 enableRemoteModule 옵션이 도입됐으며 이번에 기본 값이 false(비활성)로 변경됐습니다.

자세한 내용은 아래 이슈나 예정돼 있는 비호환 변경 내용을 정리한 문서를 참고하시기 바랍니다.

그 외로 contents.backgroundThrottling 속성이 추가 됐고 sameSite 정보를 가져올 수 있도록 변경됐으며 worldSafeExecuteJavaScript 옵션이 추가 됐습니다.


헤드라인


Release 2.8.0 · pikapkg/snowpack

github.com/pikapkg/snowpack/releases/tag/snowpack%402.8.0

JavaScript Tools ReleaseNote

snowpack 2.8.0이 릴리스 됐습니다.
snowpack build --watch 인자가 추가됐고, --polyfill-node으로 Node 코어 모듈의 polyfill을 추가할 수 있도록 변경됐습니다.


Release v1.3.0 · Polymer/lit-html

github.com/Polymer/lit-html/releases/tag/v1.3.0

JavaScript DOM library ReleaseNote

lit-html 1.3.0이 릴리스 됐습니다.
Trusted Types를 지원합니다.


Announcing TypeScript 4.0 | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-0/

TypeScript ReleaseNote

TypeScript 4.0이 릴리드 됐습니다.
Variadic Tuple Types, Labeled Tuple Elements, Class Property 타입이 Constructor에서 추론될 수 있도록 개선됐습니다.
ES2021에서 도입될 예정인 Logical Operators and Assignment Expressions를 지원합니다.
catch 절의 기본 타입이 unknown으로 변경됐으며 jsxFragmentFactory 옵션 지원하고 --incremental--noEmit을 함께 사용할 수 있도록 지원합니다.


axios/CHANGELOG.md at master · axios/axios

github.com/axios/axios/blob/master/CHANGELOG.md#0200-august-20-2020

HTTP JavaScript library ReleaseNote

Axios 0.20.0이 릴리스 됐습니다.
BOM을 포함하는 JSON을 지원하며 maxBodyLength 옵션과 decompress 옵션이 추가 됐습니다.


Release 5.0.0 · cypress-io/cypress

github.com/cypress-io/cypress/releases/tag/v5.0.0

JavaScript browser ReleaseNote testing

Cypress 5.0.0이 릴리스 됐습니다.
cypress-plugin-retries가 비권장 되고 Cypress 자체에서 재시도를 설정할 수 있게 됐습니다.
지원 대상이 TypeScript 3.4+, Node.js 10+로 변경됐고 __dirname__filename 경로에 /가 포함되지 않도록 수정됐습니다.


Release electron v10.0.0 · electron/electron

github.com/electron/electron/releases/tag/v10.0.0

Electron ReleaseNote

Electron 10.0.0이 릴리스 됐습니다.
Chromium 85, V8 8.5, Node.js 12.16으로 각각 갱신됐습니다.
enableRemoteModule의 기본값이 false로, app.allowRendererProcessReuse의 기본값이 true로 변경됐습니다.
sameSite 정보를 가져올 수 있도록 개선됐고 contents.backgroundThrottling 속성과 worldSafeExecuteJavaScript 옵션이 추가됐습니다.


Prettier 2.1: new --embedded-language-formatting option and new JavaScript/TypeScript features! · Prettier

prettier.io/blog/2020/08/24/2.1.0.html

JavaScript TypeScript ReleaseNote

Prettier 2.1이 릴리스 됐습니다.
--embedded-language-formatting 플러그와 --ignore-unknown 플러그가 추가됐고 TypeScript 4.0을 지원합니다.
ES Proposal의 Pipeline operator, Record and Tuple 구문을 지원합니다.


아티클


ts-migrate: A Tool for Migrating to TypeScript at Scale | by Sergii Rudenko | Airbnb Engineering & Data Science | Aug, 2020 | Medium

medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc

JavaScript TypeScript article

JavaScript에서 TypeScript로의 이전을 보조하는 ts-migrate을 소개합니다.
.js.ts로 이름 변경, codemod 기반으로 any등의 타입 명시, 컴파일 에러가 나는 부분을 // @ts-expect-error 코멘트로 비활성화하여 점진적으로 마이그레이션 할 수 있도록 도와줍니다.


What's New In DevTools (Chrome 86)  |  Web  |  Google Developers

developers.google.com/web/updates/2020/08/devtools

Chrome article

Chrome 86 DevTools의 변경 사항이 정리돼 있습니다.
Media 패널 추가, 컨텍스트 메뉴에서 특정 요소를 스크린샷 촬영할 수 있는 기능이 추가됐습니다.
WebFont에 local()이 없는 경우를 애뮬레이트, Idle Detection 애뮬레이트, prefers-reduced-data 애뮬레이트 기능이 추가됐습니다.
Lighthouse 6.2로 갱신됐고 Application 패널에 Frame 정보 추가, X-Client-Data의 디코드를 지원합니다.


Protect your resources from web attacks with Fetch Metadata

web.dev/fetch-metadata/

Chrome article security

Fetch Metadata의 Sec-Fetch-* 헤더를 설명합니다.
Same-Origin과 Cross-Site의 구별, 각 Sec-Fetch-* 헤더 설명, 크로스 사이트 리퀘스트를사용한 공격과 판정 그리고 대책에 대해서 이야기합니다.


서비스, 사이트, 문서


HexEd.it - Browser-based Online and Offline Hex Editing

hexed.it/

browser editor Tools

브라우저 기반의 바이너리 에디터입니다.


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


azu/kvs: Key-Value storage library for Browser, Node.js, and In-Memory.

github.com/azu/kvs

JavaScript library

브라우저와 Node.js에서 동작하는 Universal한 Key-Value 기반 스토리지 라이브러리입니다.
IndexedDB와 동일한 인터페이스를 제공 하며 파일 기반 기능도 구현돼 있고 마이그레이션도 지원합니다.

각 구현은 개별 패키지로 나뉘어져 있으며 각 패키지의 크기는 1kb(gzip) 정도입니다.


Elderjs/elderjs: Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.

github.com/elderjs/elderjs

JavaScript Svelte library

Svelte를 사용한 정적사이트 생성기입니다.
규약이 아닌 route.js에 의한 유연한 퍼머링크(permalink) 생성, data.js로 빌드에 필요한 데이터를 한꺼번에 가져와 정적 사이트를 생성하는 도구입니다.


keiya01/react-performance-testing: A library to test runtime performance in React

github.com/keiya01/react-performance-testing

React testing library

React 컴포넌트의 렌더링 수와 렌더링 시간을 측정할 수 있는 라이브러리입니다.
React를 몽키패치(monkey patch)하여 관련 데이터를 측정합니다.


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