Fork me on GitHub

2020-10-19: Babel 7.12.0, Chrome 87 Beta, npm 7 릴리스

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #510 - Babel 7.12.0 릴리스

TypeScript 4.1, Stage 2 proposal의 Class static blocks 지원.
import/export 이름을 변경된 ECMAScript에 맞춰 다룰 수 있도록 수정, Import assertions 파서를 @babel/syntax-import-assertions 플러그인으로 분할.


Chrome 87 beta 릴리스

DevTools에 CSS Grid 디버깅 도구, WebAuthn 탭 추가.
DevTools와 관련된 내용은 다음 기사를 참고.

카메라의 pan / tilt / zoom 지원, Cookie Store API를 기본적으로 활성화, cross-origin isolation 지원.
또, 입력 중인지 판단하는 isInputPending(), Service Worker의 Range 요청, postMessage로 전달할 수 있는 Transferable Streams 지원.

그 외로 Chrome 86에서 비권장됐던 FTP 지원이 87에서 기본적으로 비활성화(15% 사용자 대상) 됐다.


npm 7.0.0 릴리스

비호환 변경 사항으로peerDependencies 자동 설치, package-lock.json의 타입 변경, yarn.lock 지원, npm audit의 출력 내용이 변경됐다.
또, npm exec 명령어가 추가됐으며 npx 명령어는 내부적으로 npm exec 명령어를 사용하도록 수정됐다.

추가된 기능으로서 Workspaces 지원, yarn의 resolusions에 해당하는 acceptDependencies 기능 지원 등이 있다.


헤드라인


Release v5.1.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.1.0

webpack ReleaseNote

webpack 5.1.0 릴리스
cleverMerge, EntryOptionPlugin, DynamicEntryPlugin을 Public API로 변경.
try-catch 내에서 require를 사용해 모듈의 유무를 판단할 때 발생하는 오류 수정.


7.12.0 Released: TypeScript 4.1, strings as import/export names, and class static blocks · Babel

babeljs.io/blog/2020/10/15/7.12.0

babel ReleaseNote

Babel 7.12.0 릴리스.
TypeScript 4.1 지원.
Stage 2 proposal의 Class static blocks 지원.
import/export 명을 변경된 ECMAScript에 맞춰 다룰 수 있도록 수정, Import assertions 파서를 플러그인으로 분리.


Node v14.14.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.14.0/

node.js ReleaseNote

Node v14.14.0 릴리스.
fs.rm추가, res.setHeader 등에 헤더를 배열로 전달할 수 있도록 변경.


Chromium Blog: Chrome 87 Beta: WebAuthn in DevTools, Pan/Tilt/Zoom, Flow Relative Shorthands and More

blog.chromium.org/2020/10/chrome-87-beta-webauthn-in-devtools.html

Chrome ReleaseNote

Chrome 87 베타 릴리스.
DevTools에 WebAuthn 탭 추가, 카메라 pan / tilt / zoom 지원, cross-origin isolation 지원 개선.
또, isInputPending과 Service Worker에서의 Range 요청 지원, postMessage에서 전달할 수 있는 Transferable Streams 지원.


Presenting v7.0.0 of the npm CLI - The GitHub Blog

github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/

npm ReleaseNote

npm 7 릴리스.
비호환 변경 사항으로 peerDependencies 자동 설치, package-lock.json의 형식 변경, yarn.lock 지원, npm audit의 출력 내용이 변경됐다.
기능 추가로서 Workspaces 지원, npm exec 추가 등이 이뤄졌다.


아티클


min(), max(), and clamp(): three logical CSS functions to use today

web.dev/min-max-clamp/

CSS article

CSS의 min(), max(), clamp() 함수 소개.


GraphQL 기초 중 기초 - Qiita(일본어)

qiita.com/shotashimura/items/3f9e04b93e79592030a4

node.js JavaScript GraphQL article

Node.js에서의 GraphQL API 서버 구현을 주제로 한 글.


Create TypeScript declarations from JavaScript and JSDoc - Human Who Codes

humanwhocodes.com/snippets/2020/10/create-typescript-declarations-from-javascript-jsdoc/

TypeScript JavaScript article

JSDoc에서 TypeScript의 타입 정의 파일을 생성하는 방법을 소개.
TypeScript의 출력 옵션에 emitDeclarationOnlyallowJs를 포함하여 JSDoc에서 d.ts 파일을 생성할 수 있다.


Video processing with WebCodecs

web.dev/webcodecs/

JavaScript WebPlatformAPI Chrome article

Chrome 86에 Origin Trial으로 도입된 WebCodecs를 소개하는 글.
영상과 음성를 인코딩 및 디코딩 할 수 있는 API와 VideoTrackReader, VideoEncoder, VideoDecoder를 다루고 있다.


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


Liaison – A love story between the frontend and the backend

liaison.dev/

JavaScript node.js library

백엔드, 프런트엔드를 포함한 풀스택 자바스크립트 프레임워크.


samizdatco/skia-canvas: A canvas environment for Node.js

github.com/samizdatco/skia-canvas

node.js canvas library

Skia를 사용해 개발한 Node.js 환경에서 동작하는 Canvas.


sciter – Multiplatform HTML/CSS UI Engine for Desktop and Mobile Application

sciter.com/

JavaScript HTML CSS software

앱 내 삽입할 목적으로 개발된 HTML / CSS 엔진
바이너리 크기가 작은 앱을 만들기 위한 프레임워크로, HTML / CSS 서브셋과 스크립트 엔진을 갖고있다.


MTG/essentia.js: JavaScript library for music/audio analysis and processing powered by WebAssembly

github.com/MTG/essentia.js

JavaScript WebAssembly C++ library

C++로 작성된 음성 / 음악 처리 라이브러리인 Essentia를 WebAssembly로 컴파일 한 자바스크립트 랩퍼 라이브러리.


TimvanScherpenzeel/detect-gpu: Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.

github.com/TimvanScherpenzeel/detect-gpu

JavaScript WebGL library performance

WebGL을 기반으로 한 3D 렌더링 벤치마크 점수를 활용해 GPU를 판단, 분류하는 라이브러리.


도서


프런트엔드 개발 입문 프로페셔널 개발 도구와 설계 및 구현 | 아다치 료, 타케다 사토시 | 책 | 통신판매 | Amazon(일본어)

www.amazon.co.jp/dp/4798061778/

HTML CSS JavaScript book Tools

2020년 10월 9에 출간된 웹 프런트엔드와 에코시스템을 다룬 도서


accrefs - Web 접근성 참고 자료 정리(일본어)

accrefs.jp/

accessibility links

웹 접근성과 관련된 자료를 정리한 페이지


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